Per gentile concessione di extrowebsite.com

Uno dei maggiori utilizzi in un sito web personale o professionale è contraddistinto, molte volte, dalla presenza di una galleria fotografica. Inutile dire che fino a qualche tempo fa il tutto veniva realizzato con linguaggi di scripting come, per esempio, il JavaScript. Molteplici sono, in effetti, gli esempi che tale tecnologia offre ancora oggi. Avendo scritto più volte, come avrete avuto modo di vedere dagli esempi in questa sezione, che sono un sostenitore dei CSS, ho voluto realizzare il tutto con tale codice; i vantaggi, lo si capisce da soli, sono quelli di avere una pagina molto più leggera oltre al fatto che non si fa nessun uso di script su menzionati.

Un pò di teoria prima della pratica

Prima di passare alla realizzazione della galleria fotografica vera e propria vorrei esporre, almeno concettualmente, di cosa si tratta. Comincio col dire che questo tutorial altro non è che una "estensione" di un altro già trattato precedentemente, dal titolo: Creare un roll-over disgiunto con i CSS. In questo odierno avremo anche del testo, ma la parte preponderante saranno le immagini.
In un contenitore ho posizionato delle immagini in miniatura, 10 per la precisione, suddivise in 2 file composte da 5 piccole foto ciascuna. Quando si passa con il mouse su una miniatura, la stessa apparirà in basso con altre dimensioni, ovviamente più grandi. Detto questo, passiamo alla descrizione del codice CSS.

Realizzare il contenitore

L' elemento di blocco #container l' ho realizzato in base alla misura sia delle miniature che delle immagini più grandi. Ovvio che maggiori saranno le dimensioni delle foto, più banda verrà richiesta all' utente; questa cosa è a vostra discrezione. Potete cambiare come volete e quello che volete per le vostre applicazioni future. Il codice è:

#container {
position:relative;
width:425px;
height:480px;
background:#fff;
border:1px solid #4a679f;
margin:0 auto;
}

Fin qui nulla di particolarmente difficoltoso. All' interno di tale box, in alto, ho pensato di inserire del testo che spieghi quello che l' applicazione sta a significare. In pratica ho messo un altro box che l' ho nominato #head il cui codice è:

#head{
margin:0;
padding:0;
background:#000;
height:50px;
}
#head h1{
margin:0;
padding:0;
font-size:1.3em;
color:#fff;
line-height:50px;
}

Possiamo vedere una prima pagina di esempio nella quale è il contenitore generale. Ovviamente quanto è scritto anticipa il risultato finale. Fatto questo primo passaggio, vediamo adesso come implementare le immagini piccole e grandi all' interno del contenitore.

Inserire le miniature nel #container

Premesso che l' esempio si avvale di 10 miniature, ed altrettante immagini corrispondenti di dimensione più grande, dobbiamo inserire adesso le piccole foto nel contenitore. Lo faremo attraverso 10 classi alle quali saranno associate le miniature stesse, posizionate come background, cioè:

a.mini1{background:url(NomeImmagine.jpg);}
a.mini2 {background:url(NomeImmagine2.jpg);}
ecc...

Adesso nella pagina html dobbiamo scrivere in questo modo:

<a class="galleria mini1" href="#"></a>
<a class="galleria mini2" href="#"></a>
ecc...

fino a scrivere tutte e 10 le classi di cui ho detto più su. Anche in questo caso ho preparato una pagina di esempio per far vedere lo stato di "avanzamento" del lavori. :)))

L' elemento span nascosto

Per fare in modo che le immagini grandi siano "pronte", vale a dire visibili, quando passiamo con il mouse sulle miniature, dobbiamo creare un elemento in linea, <span>, con delle particolari caratteristiche. Serve semplicemente per creare l' effetto di preload delle stesse foto. Esso sarà posizionato in maniera assoluta rispetto al #container e con una dimensione di 1 pixel X 1 pixel (larghezza ed altezza). Domanda lecita: se le immagini grandi avranno una dimensione di 400px X 250px, come è possibile "nasconderle"? Semplicemente adottando la proprietà overflow:hidden. Il codice CSS è:

a.galleria span {
display:block;
position:absolute;
width:1px;
height:1px;
top: 5px;
left: 5px;
overflow:hidden;
background:#000;
}

Creare il link alle miniature

Adesso passiamo a realizzare i link su ogni miniatura presente. Il codice è:

a.galleria, a.galleria:visited {
display:block;
color:#4a679f;
font-weight:bold;
text-decoration:none;
border:1px solid #fff;
width:75px;
height:47px;
float:left;
margin:3px;
z-index:100;
}

Questa pseudo-classe è valida sia per lo stato a: che per lo visited dell' immagine; notare sia la larghezza [width:75px] che l' altezza [height:47px]. Esse non sono altro che le misure delle immagini piccole. Il colore del testo [color:#4a679f] ed il peso [font-weight:bold] li vedremo in seguito alla fine del tutorial; sotto l' immagine ingrandita, possiamo inserire anche del testo.

Lo stato :hover delle miniature

Per quanto riguarda lo stato :hover da dare alle immagini, il codice è molto semplice: ho assegnato un bordo di colore grigio molto chiaro:

a.galleria:hover {
border:1px solid #ddd;
}

Lo stato :hover va assegnato, però, anche al seguente elemento: a.galleria:hover img. Il codice completo è:

a.galleria:hover img {
border:1px solid #ddd;
position:relative;
z-index:100;
}

Lo stato :hover sull' elemento span

Il presente elemento inline span è molto importante in quanto al suo posto appariranno le immagini di dimensioni più grande. È questo, si può dire, il cuore di tutta l' applicazione. Vediamo il suo codice:

a.galleria:hover span{
display:block;
position:absolute;
width:400px;
height:300px;
top:170px;
left: 5px;
padding:5px;
background:transparent;
z-index:100;
}

Esso assumerà una posizione assoluta rispetto al #container in quanto stabiliamo con le coordinate left e top dove la foto ingrandita vogliamo vederla stampata a video. Infatti le distanze sono dall' alto pari a 170 pixel dall' alto e da sinistra 5 pixel. Le dimensioni sono anch' esse pari alla grandezza della foto [width:400px; height:300px;]. In realtà l' altezza della fotografia è pari a 250 pixel. I 50 pixel in più li ho assegnati perchè, come ho scritto prima, al di sotto della foto, inserirò anche del testo. Tutto l' altro codice è di facile ed intuibile comprensione.

L'elemento .image

In ultimo, ho inserito anche un altro elemento realizzato con la classe .image. Esso altro non è che un elemento che conterrà una immagine .gif all' apertura della pagina. Si potrebbe anche omettere ma, per rendere più simpatica la cosa, direi che non guasta. Il codice CSS:

.image{
display:block;
position:absolute;
width:400px;
height:250px;
top:175px;
left:10px;
padding:0;
}

Molto semplice ed intuitivo; esso non fa altro che posizionare, sempre con il posizionamento assoluto, l' immagine di "presentazione" non appena si carica la pagina.

Adesso siamo davvero giunti alla fine del tutorial. La pagina completa dell' esempio mostra tutti i passaggi sin qui descritti.
Come sempre potete contattarmi per delucidazioni in merito.
 

Segnala questo articolo ai tuoi amici su Facebook