jQuery jCarousel Script

• Aprile 25, 2024

jQuery ha reso semplice l'aggiunta di immagini ai siti Web. Esistono molti script jQuery rilasciati con le licenze MIT e / o GPL. La maggior parte di questi sono script plug-and-play (plug-in) che non richiedono alcuna conoscenza di programmazione da utilizzare sul tuo sito Web o installare sul sito del tuo cliente. Potresti prendere in considerazione l'aggiunta di script jQuery ai tuoi servizi di progettazione.

Uno di questi script jQuery di Jan Sorgalla è jCarousel. Questo plug-in può avere molte applicazioni sia per la grafica che per il testo. La funzione principale dello script è di scorrere il contenuto in orizzontale o in verticale. Il contenuto può essere statico o caricato dinamicamente tramite Ajax, JavaScript, PHP o Flickr. Naturalmente, questa seconda opzione richiede familiarità con queste lingue. jCarousel funziona anche con Thickbox 3 in modo che un'immagine di grandi dimensioni si apra in Thickbox quando si fa clic sull'immagine di anteprima nel carosello.

La maggior parte del codice per lo script è indicato nella sezione Head della pagina Web. Avrai bisogno della libreria jQuery, del codice sorgente jCarousel e dei file del foglio di stile. La cosa bella di questo plug-in è che può essere "scuoiato" dai CSS per avere molti aspetti. Il contenuto che deve essere fatto scorrere dallo script viene inserito nel corpo della pagina Web in un elenco UL di base.

Sono disponibili diverse opzioni per la configurazione dello script, tra cui l'aggiunta di animazioni personalizzate e semplificazione. Può funzionare con i pulsanti di scorrimento automatico o di navigazione. Un'altra caratteristica interessante è che la larghezza della giostra si ridimensiona automaticamente per adattarsi alla finestra del browser. Può essere configurato per mostrare più o meno immagini a seconda delle dimensioni del browser o configurato per avere un numero fisso di immagini con spaziatura flessibile tra le immagini secondo necessità. Puoi avere più di un carosello su una pagina e dare a ciascuno di essi una skin diversa.

L'integrazione con il flusso di foto di Flickr e l'API di Flickr è una funzione interessante che non si vede nella maggior parte degli script. È stato testato per funzionare con diversi browser, incluso il famigerato Internet Explorer 6.

Potresti chiederti perché dovresti usare questo invece di una semplice animazione gif che puoi creare in Photoshop. Il motivo principale è la facilità di aggiornamento del carosello una volta installato. È più semplice cambiare contenuto nell'elenco UL piuttosto che creare una nuova gif ogni volta che è necessario disporre di un diverso set di immagini.

//sorgalla.com/projects/jcarousel/

Istruzioni Video: jQuery Tutorial #6 - Building a jQuery Image Slider (Aprile 2024).