Premetto che mi trovo a scrivere questo post grazie ad una segnalazione ricevuta via mail da un lettore.
Penso che sia utile fare un’altra premessa il seguente sito utilizza una piattaforma opensource e molto conosciuta chiamata WordPress e l’effetto applicato sulle immagini è dato da un plug-in chiamato thumbnail-viewer.
la seguente premessa è stata fatta in quanto nella segnalazione che ho ricevuto mi veniva richiesto come facevo ad applicare questo effetto sulle immagini.
Detto questo vorrei presentare un piccolo HowTo su come applicare un effetto molto simile sul proprio sito e senza l’ausilio di questo plug-in .
Una delle librerie più conosciute che permette di avere questo effetto sulle immagini è LightBox
Questo HowTo utilizza infatti questa libreria.
Step 1
Scaricate la libreria da qui scompattatela ed inseriti tutti i file nelle relative directory del vostro sito
Step 2
Lightbox 2 usa come librerie Prototype e scritpaculous, quindi dovrete includere anche esse nella pagina. a questo punto potete inserire all’interno del vostro header e più in particolare tra i tag <head> </head> le seguenti righe
(seguendo l’ordine)
<script type="text/javascript" src="js/prototype.js"></script><script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>Step3
Inserire sempre tra i tag <head> </head> il foglio di stile
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Step 4
Assicurarsi che i file prev.gif , next.gif, loading.gif, close.gif si trovino nella stessa directory citata nel file lightbox.css
Step 5
A questo punto andiamo ad applicare questo effetto aggiungendo un tag rel ad ogni immagine es.
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
Opzioni
Questa libreria ci mette a disposizione anche un utile opzione e cioè quella di poter ragruppare le immagini in gruppi es.
<a href="images/image-1.jpg" rel="lightbox[montagna]">image #1</a><a href="images/image-2.jpg" rel="lightbox[montagna]”>image #2</a>
<a href="images/image-3.jpg" rel="lightbox[montagna]”>image #3</a>
Tengo a precisare che questa non è l’unica libreria che permette questo effetto, infatti prossimamente scriverò altri HowTo utilizzando appunto altre librerie ed altri frameworks Javascript
