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.
