[cssdesign] Photo gallery

[Simone Onofri]

Ciao,

io l'ho fatta in questo modo http://www.siatec.net/evolutionfest/
dando lo stile con i CSS.

E' in php e si basa totalmente su filesystem generando le miniature in
automatico.


Simone


2006/2/1, Tamtando's Web Administrator <web a tamtando.com>:
> Ciao a tutti.
>
> Devo sviluppare una galleria fotografica.
> Pensavo di farlo utilizzando una lista ordinata e lavorando con gli stili,
> ma mi sorge qualche dubbio.
> Leggendo l'articolo CSS Swag: Multi-Column Lists, mi sono accorto che non è
> prevista una certa eventualità.
> Supponiamo, per l'appunto, di voler visualizzare una classica galleria,
> formata da NxM miniature.
> Ciascuna miniatura ha può essere grande al massimo 150x150 pixel (vuol dire
> che, per un'immagine rettangolare, il lato più grande sarà di 150px).
> Ciascuna miniatura ha un titolo (utilizzato come alternate text e come title
> del link, ma visualizzato anche sotto la miniatura) e una didascalia.
>
> Il risultato sarebbe qualcosa del genere:
>
>       150      150      150      150
>     +------+ +------+ +------+ +------+
> 1 + ######## ########  ######  ########
> 5 | ###1#### ###2####  ##3###  ###4####
> 0 | ######## ########  ######  ########
>   + ########           ######
>     (Didasc) (Didasc) (Didasc)
> 1 +  ######   ######   ######  ########
> 5 |  ##5###   ##6###   ##7###  ###8####
> 0 |  ######   ######   ######  ########
>   +  ######   ######   ######  ########
>     (Didasc)          (Didasc)
> 1 + ######## ########  ######  ########
> 5 | ###9#### ###10###  ##11##  ###12###
> 0 | ######## ########  ######  ########
>   + ########           ######
>     (Didasc)          (Didasc) (Didasc)
> 1 +  ######   ######   ######  ########
> 5 |  ##13##   ##14##   ##15##  ###16###
> 0 |  ######   ######   ######  ########
>   +  ######   ######   ######  ########
>     (Didasc) (Didasc) (Didasc) (Didasc)
>
>
>
> Si vede poco, ma all'interno di ciascuna miniatura c'è un numero.
> Il codice html risultante, pensavo che potrebbe essere qualcosa del genere:
>
> <ul>
>     <li>
>         <img src="dominio.tld/img/1.jpg" alt="titolo1" />
>         <cite>Titolo1</cite>
>         <p>Didascalia1</p>
>     </li>
>     <li>
>         <img src="dominio.tld/img/2.jpg" alt="titolo2" />
>         <cite>Titolo2</cite>
>         <p>Didascalia2</p>
>     </li>
>     <li>
>         <img src="dominio.tld/img/3.jpg" alt="titolo3" />
>         <cite>Titolo3</cite>
>         <p>Didascalia3</p>
>     </li>
>     <li>
>         <img src="dominio.tld/img/4.jpg" alt="titolo4" />
>         <cite>Titolo4</cite>
>     </li>
>     <li>
>         <img src="dominio.tld/img/5.jpg" alt="titolo5" />
>         <cite>Titolo5</cite>
>         <p>Didascalia5</p>
>     </li>
>     ...........
> </ul>
>
> dal punto di vista del foglio di stile, pensavo di rendere flottante ciascun
> li con qualcosa del tipo:
>
> li
> {
>     float: left;
> }
>
> Inizialmente non voglio preoccuparmi di stabilire quante colonne e quante
> rige vedere, ma iniziare una nuova riga quando si raggiunge il bordo destro
> del contenitore della lista ordinata.
>
> Però mi chiedo come fare per ottenere l'equivalente di una tabella.
> Immagino che con il codice che ho scritto, avrei dei grossi problemi di
> visualizzazione (miniature allineate in un modo, titoli e didascalie in un
> altro), dovuti alle diverse dimensioni dell'immagine.
>
> _______________________________________________
> cssdesign mailing list
> cssdesign a itlists.org
> http://itlists.org/mailman/listinfo/cssdesign
>
>


--
Simone Onofri

"Nessun byte è stato abbattuto per creare questo messaggio. Salva
internet usando bit riciclati al 100%"

-----------------------------------------------------------------------------------------------------------------------

 Member of International Webmasters Association / HTML Writers Guild
 Member of AICA: Italian Association for Computer and Automated Calculation
 IWA Certified Web Professional Candidacy Status in HTML
 Microsoft Certified Preinstallation Specialist
 Microsoft Certified Sales Specialist
 Microsoft Certified Licensing Specialist
 Brainbench Certified Internet Professional

-----------------------------------------------------------------------------------------------------------------------