Creare slideshow di foto in una pagina web

Capita di aver bisogno di mostrare in un sito web uno slideshow, una carrellata o una sequenza di immagini o fotografie, e i modi per fare questo sono sicuramente molti.
Esistono servizi online in cui basta caricare le foto e dopo averle caricate ci viene fornito il codice per incorporare un player con il nostro slideshow, magari pure arricchito di musica.
Però se vogliamo qualcosa di relativamente più semplice, che non comporti l’uso di servizi esterni o l’utilizzo di tecnologie video o Flash, ci sono dei javascript che fanno al caso nostro!

Cycle è un plugin per jQuery per creare slideshow e caroselli di immagini, animare sequenze di immagini, con diversi tipi di animazioni e transizioni; supporta la pausa on-hover del mouse, l’auto-stop, l’adattamento automatico delle immagini, …e tanto altro. Supporta – ma non richiede – i plugin Metadata e Easing.

Cycle Lite è una versione più leggera di Cycle.
Questa versione lite è ottimizzata nelle dimensioni dei file e supporta solamente la transizione in dissolvenza.
Supporta anche il pause-on-hover (e cioè arresta il ciclo nel momento in cui il mouse si sovrappone all’immagine), l’adattamento automatico, i callback prima/dopo, e reagisce al click del mouse.

Per funzionare, il plugin mette a disposizione un metodo chiamato “cycle” il quale è richiamato su un contenitore di elementi (le immagini, o gli elementi, che andremo a “ciclare”); ogni elemento figlio del contenitore diventa uno “slide”.

Ci sono diversi parametri facoltativi per personalizzare lo slideshow: il tempo tra le varie transizioni, la loro velocità, l’altezza del contenitore, ritardo addizionale per la prima transizione (anche negativo), ecc.ecc.

Ad esempio, per farlo creare uno slideshow nella configurazione base basta una riga:
$('#slideshow1').cycle()

link: Cycle , Cycle Lite

Altri sono arrivati qui cercando:
SLIDESHOW HTML, creare slideshow html, html slideshow automatico, inserire slide show in pagina web, slideshow sito web, inserire slideshow html, inserire slideshow in sito web, slideshow per siti web, javascript slideshow automatico, slideshow per sito, slideshow automatico html, animazione immagini javascript sequenza, slide foto.

Un pensiero su “Creare slideshow di foto in una pagina web”

  1. non ho capito come e cosa scarico sul server per poter avere le mie immagini con questi effetti. ho visto il codice ma le immagini dove le devo inserire?
    grazie

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

You can add images to your comment by clicking here.