Quello che vado a condividere in questa guida è un sistema da me adottato tempo fa per creare una fotogallery utilizzando solo html e css3, senza scomodare javascript.

Premesse:
1 - Il browser deve supportare interamente CSS3, senza se e senza ma.
Se volete supportare utenti con browser scrausi o non aggiornati dovete per forza ricorrere a javascript.

2 - Questo sistema può rivelarsi macchinoso in caso di fotogallery con molte foto o che devono essere aggiornate spesso, in quanto senza script è necessario linkare e ordinare le immagini una ad una.

Io lo adottai soprattutto per mancanza di esperienza nell'approntare velocemente uno script più complesso, in quanto mi avevano messo una certa fretta nel fare almeno una prima versione funzionante del sito da aggiornare in seguito.

Codice html:
Codice HTML:
Only registered members can view HTML code.
Spiegazione html:
Le immagini piccole (miniature) sono inserite all'interno di collegamenti che puntano a ID, iniziare un collegamento senza nomi di dominio significa che il collegamento è relativo alla pagina in cui ci si trova, terminare un collegamento con # significa che si sta impostando un ID css come TARGET.

Le immagini grandi sono inserite all'interno di un div che contiene anche due collegamenti che puntano rispettivamente all'immagine precedente e a quella successiva e come contenuto hanno due belle frecce. Io ho usato un carattere ASCII per comodità, ma potete anche metterci delle immagini. (A voler essere pignoli si potrebbe usare anche il content in css per impostare il medesimo contenuto a tutti gli elementi di classe freccia, ma questa è un'altra storia).

L'Area invisibile è un semplice collegamento che punta a "nessun target", il resto lo fa il css.
Il cancelletto da solo in questo caso è un "trucchetto" che serve a evitare il ricaricamento della pagina o l'apertura della stessa in una nuova scheda, che, secondo le impostazioni del browser, potrebbero verificarsi richiamando l'url "pulito".
Attenzione che deve stare dopo tutti i div di tipo 'zoom' per poterla richiamare con il selettore fratelli del css (che non vede i fratelli "precedenti").

Esempio e spiegazione (commenti) codice css:

Codice:
Only registered members can view code.
Vista la lungaggine del codice ho eliminato dall'esempio le parti riguardanti la personalizzazione grafica delle frecce, che basterà richiamare con la classe arrow, come da codice html (Le due classi arrow_left e arrow_right invece servono solamente a impostare posizioni diverse per la freccia a sinistra e per quella a destra) e le impostazioni per le miniature.

Le parti importanti del codice, ovvero quelle che concernono la comparsa e scomparsa delle immagini grandi sono tutte riportate e spiegate (spero abbastanza chiaramente) nei commenti.

Resto comunque disponibile a chiarire eventuali dubbi che vi fossero rimasti dopo la lettura.