|
| 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.Vediamo una demo. 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: <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;}</style><script src="http://www.risparmiocitta.it/source/ moo.rd_1.3.1_mootools_1.2.js" type="text/javascript"></script> <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');});</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: <img id="img1" src="img/1_little.jpg" alt="1"> Nell'esempio abbiamo utilizzato un'immagine di anteprima come collegamento alla gallery, ma possiamo utilizzare anche un semplice testo, come nell'esempio:
QUA INSERISCI IL TESTO |
|