Realizzare una gallery in stile LightBox

Creare una gallery con tutte le nostre foto per il nostro Blog è oggi più che mai una cosa semplicissima. Il mondo del web 2.0 ci porta tante tecniche a tal proposito, ma oggi vediamo come realizzarne una con moo.rd Virtual Box, un’estensione del potente mootools.

Per realizzarla ci basta qualche riga di codice copia/incolla, un editor (Irfan View và più che bene) e 5 minuti di pazienza.

Apriamo con blocco note o col vostro editor preferito la pagina su cui desideriamo inserire la gallery ed inseriamo prima del tag </head> questo codice:

<br /> <mce:style><!– #virtualBoxFullPage {font-size:12px;}p#virtualCaptionTitle {color:#3366CC; margin:0px;font-size:16px;padding-left:4px;} p#virtualCaptionContent {margin:0px;padding-left:4px;}div#thumbs img {border:2px solid #FF6600;margin-right:10px;float:left;}div#virtualArrowsBox a {color:#3366CC;float:left;margin-right:10px;padding:6px 6px 6px 0px;}div#virtualArrowsBox a:hover{color:#FF6600;}div#virtualArrowsBox a#virtualCloseButton {color:#FF6600;float:right;padding-right:0px;margin-right:0px;}div#virtualArrowsBoxText {padding:2px 6px 0px 0px;color:#CCCCCC;} –></mce:style><style mce_bogus=”1″>#virtualBoxFullPage {font-size:12px;}p#virtualCaptionTitle {color:#3366CC; margin:0px;font-size:16px;padding-left:4px;} p#virtualCaptionContent {margin:0px;padding-left:4px;}div#thumbs img {border:2px solid #FF6600;margin-right:10px;float:left;}div#virtualArrowsBox a {color:#3366CC;float:left;margin-right:10px;padding:6px 6px 6px 0px;}div#virtualArrowsBox a:hover{color:#FF6600;}div#virtualArrowsBox a#virtualCloseButton {color:#FF6600;float:right;padding-right:0px;margin-right:0px;}div#virtualArrowsBoxText {padding:2px 6px 0px 0px;color:#CCCCCC;}</style> <p><mce:script src=”http://www.risparmiocitta.it/source/moo.rd_1.3.1_mootools_1.2.js” mce_src=”http://www.risparmiocitta.it/source/moo.rd_1.3.1_mootools_1.2.js” type=”text/javascript”></mce:script><br /> <mce:script type=”text/javascript”><!– window.addEvent(’domready’, function() {var virtual = new Virtual.Box({enable: {arrows: true,closeButton: true},effect: ‘open’,leftArrowText: ‘prev’,rightArrowText: ‘next’,closeButtonText: ‘close’,captionOpacity: 0.6}).setLight(’#000000′);}); // –></mce:script>

Il gioco è fatto, ora non ci resta che inserire le nostre immagini, nel parametro alt inseriamo il numero progressivo della slideshow, e nel tag a che crea il collegamento all’imaggine, inseriamo la class virtualbox, nel title inseriamo le descrizione dell’immagine e ovviamente utilizziamo href con dentro l’indizzo dell’immagine, come nell’esempio:
<a id=”ok1″ class=”virtualbox” href=”img/1.jpg” mce_href=”img/1.jpg” title=”Wonderful Beach :: A wonderful tropical beach”><img id=”img1″ src=”img/1_little.jpg” mce_src=”img/1_little.jpg” alt=”1″ /></a>

Nell’esempio abbiamo utilizzato un’immagine di anteprima come collegamento alla gallery, ma possiamo utilizzare anche un semplice testo, come nell’esempio:
<a id=”ok1″ class=”virtualbox” href=”img/1.jpg” mce_href=”img/1.jpg” title=”Wonderful Beach :: A wonderful tropical beach”> QUA INSERISCI IL TESTO </a>

Scarica la demo