Volendo realizzare una galleria di immagini, ci si ritrova davanti un vasto assortimento di tecniche ed effetti; grazie all’evoluzione e diffusione di tecniche alternative al tanto blasonato Adobe Flash, è oggi possibile stupire senza appesantire.
Non è difficile immaginare, pertanto, che la scelta possa ricadere su soluzioni basate su JQuery e Ajax ovvero su Javascript. E’ incredibile quali e quanti passi avanti si siano compiuti in queste direzioni. Tanto per capirci, l’immagine a lato rappresenta un tipo di slideshow ottenibile mediante queste tecniche.
Oggi vi spiegherò come ottenere qualcosa di simile.
Se l’argomento vi appassiona, sul sito professorcloud.com -questo script proviene da la’- avrete di che gioire. Ma vediamo di imparare a personalizzarlo in maniera da avere anche noi il nostro “carousel” avanzato in stile “coverflow”.
Tanto per iniziare, bisogna copiare la cartella con all’interno le immagini che vogliamo mostrare sul nostro spazio web/server locale e fare altrettanto con i files js, scaricabili da questo link ; a questo punto va inserito nell’header della pagina il riferimento alla posizione di tali script (occhio agli errori di battitura) come nelle righe di seguito.
Con un breve sguardo al codice potrete notare che il file “jquery.min.js“, fa riferimento ad una posizione remota, più precisamente ad un Server di Google. Potrete avvalervi di questa tecnica se reputerete il vostro host poco performante, oppure fare come per gli altri files. La cosa è a vostra discrezione.
Come premesso, tutta questa roba va nell’header, che per chi non lo sapesse è quella parte della pagina compresa tra i tag <head>ed </head>.
Le coordinate xPos e yPos riguardano la posizione del carousel e vanno impostate in relazione all’area che vorrete assegnargli (e alle dimensioni delle immagini). In questo caso l’area misura 800 * 400px. Sentitevi liberi di fare le vostre prove.
Con il seguente codice indichiamo alla nostra pagina di creare un div che segua le caratteristiche indicate e che contenga i collegamenti alle immagini e i pulsanti per farle scorrere (decisamente migliorabili, sì).
<img class = “cloudcarousel” src=”/images/immagine3.jpg” alt=”descrizione immagine3″ title=”titolo immagine3″ />
<img class = “cloudcarousel” src=”/images/immagine4.jpg” alt=”descrizione immagine4″ title=”titolo immagine4″ />
</div>
<!– Define left and right buttons. –>
<input id=”left-but” type=”button” value=”Left” />
<input id=”right-but” type=”button” value=”Right” />
<!– Define elements to accept the alt and title text from the images. –>
<p id=”title-text”></p> <p id=”alt-text”></p>
Nell’esempio si è preferito impostare i dati relativi allo stile direttamente nel tag stesso, ma nulla vi vieta di linkare un foglio esterno ove lavorare in maggiore tranquillità. Ad ogni modo, se vorrete operare delle modifiche (magari cambiare lo sfondo o aggiungere un gradiente, come nell’esempio), vi toccherà intervenire all’interno del tag div.
Ovviamente, il tag con il collegamento all’ immagine, così come i campi relativi a nome, descrizione e titolo vanno compilati a dovere, uno per uno…(già!), ma presto vi spiegherò come automatizzare il tutto con un pizzico di php.
Per quanto attiene alla personalizzazione dello script, parametri quali quantità ed estensione della trasparenza, rotazione automatica e compagnia bella, potranno essere modificati a piacere portandosi all’interno del file “cloud-carousel.1.0.5.js” ed andando ad editare dalle parti della riga 335(per approfondire, date un’occhiata a questa pagina) .
Ad esempio, i parametri che interessano il riflesso sono reflHeight e reflOpacity.
Ora, se avrete fatto tutto come si deve, avrete una galleria da fare invidia a principi e re! Fateci sapere!
Ciao.
