Proseguiamo con l’assemblaggio di plugin all’interno del nostro layout a tema spionistico (qui e qui potete trovare i precedenti tutorial) con questa semplice variante del celebre Lightbox, questa volta in salsa MooTools. Scaricate la seguente immagine, clickando l’anteprima per visualizzarne la risoluzione originale:
Isolate con Adobe Photoshop i 4 rettangoli, salvandoli e cambiandone la dimensione e l’opacità per la fase rollover come abbiamo già visto: in alternativa sfruttate le precedenti risorse. Scomodiamo in ogni caso il Re della fotomanipolazione per creare 4 immagini di grandi dimensioni, quelle che al click sull’anteprima saranno mostrate all’interno dello Slimbox. Salviamole come [numero]_big.jpg. Abbiamo dunque una pagina index.html col seguente Css:
Aggiungiamo nell’<head> il richiamo ai 2 files javascript necessari per attivare Slimbox, e al file Css:
I tre files si trovano nelle risorse in download. Da notare che Slimbox risulta operativo solo con questa versione di MooTools, l’integrazione di altre versioni lo renderà inutilizzabile (ed ecco spiegata la rimozione dell’effetto Accordion visto nel tutorial precedente).
Non resta che attivare le funzioni della galleria all’interno del nostro <div> di contenuto:
Nel tag <a href> è contenuta l’immagine ingrandita da Slimbox, col percorso specifico che avete scelto. Di seguito trovate il download con tutte le risorse necessarie. Alla prossima!