Home Guide Un Carousel avanzato con jQuery.

Un Carousel avanzato con jQuery.

una immagine del risultato presa dal sito ufficiale

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 jsscaricabili 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.

<!– You can load the jQuery library from the Google Content Network. Probably better than from your own server. –>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script> <!– Load the CloudCarousel JavaScript file –> <script type=”text/JavaScript” src=”/js/cloud-carousel.1.0.0.js”></script>
<script> $(document).ready(function(){ // This initialises carousels on the container elements specified, in this case, carousel1.$(“#carousel1”).CloudCarousel( { xPos: 128, yPos: 32, buttonLeft: $(“#left-but”), buttonRight: $(“#right-but”), altBox: $(“#alt-text”), titleBox: $(“#title-text”) } ); });
</script>

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ì).

<!– This is the container for the carousel. –><div id = “carousel1″ style=”width:800px; height:400px;background:#000;overflow:scroll;”>
<!– All images with class of “cloudcarousel” will be turned into carousel items –>
<!– You can place links around these images –>
<img class = “cloudcarousel” src=”/images/immagine1.jpg” alt=”descrizione immagine1″ title=”titolo immagine1″ /><img class = “cloudcarousel” src=”/images/immagine2.jpg” alt=”descrizione immagine2″ title=”titolo immagine2″ />

<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 reflHeightreflOpacity.

Ora, se avrete fatto tutto come si deve, avrete una galleria da fare invidia a principi e re! Fateci sapere!

Ciao.

 

Luigi Lacquaniti
Web designer freelance.

LASCIA UN COMMENTO

Please enter your comment!
Please enter your name here

Ultime dal Blog

Netflix: ufficiale l’aumento dei prezzi sui piani Standard (HD) e Premium (UHD)

Era un rumors quasi certo, ed è stato alla fine ufficializzato: Netflix ha aumentato i prezzi su due dei tre piani sottoscrivibili. I piani Standard...

Google Maps: ora visibile anche il tachimetro mentre si guida

Da qualche settimana il famoso navigatore made in Google sta (finalmente) implementando delle funzioni prese in prestito dal suo fratellino Waze. Dopo aver visto...

Mounty: ed i dischi NTFS non sono più un tabù su MacOS

Chi possiede un Mac da diversi anni sa bene quanto sia poco intuitivo ed immediato poter scrivere su un disco esterno in formato NTFS. Il...

Tor Browser: la prima versione stabile è disponibile per Android

Tor, per chi non lo conoscesse, è un sistema di reti che permette di navigare nel web restando completamente anonimi e senza essere tracciati...

Share Mouse: controlla più computer usando un solo mouse

Oggi vi parleremo di Share Mouse, software veramente utile che vi permetterà di poter controllare più computer, usando un solo mouse e una sola...