Ecco un altro post dal passato che ha destato molto interesse nei lettori di questo blog. Di seguito vedrai come è possibile realizzare slideshow di immagini, in poco tempo senza sapere nulla di flash!
Oggi vediamo l’ennesima applicazione della libreria jquery, che ogni giorno mi sorprende sempre di più per quante cose si possano fare.
In particolare vedremo come creare uno slideshow di immagini, il tutto senza utilizzare minimamente flash, con conseguente risparmio di tempo sia per la creazione , sia successivamente per il caricamento dello slideshow nelle pagine web, dato che lo script è davvero leggero (solo 12 kb!!!).
In questo articolo vedremo 3 esempi di slideshow.
La parte in comune tra tutti gli esempi è che tra i tag <head> ed </head> dovrete inserire questo codice:
<script src=’jquery-1.2.6.min.js’ type=’text/javascript’></script>
<script src=’jquery.cross-slide.js’ type=’text/javascript’></script>
Scarica jquery-1.2.6.min.js
Scarica jquery.cross-slide.js
A fine articolo troverete i sorgenti di tutti e tre gli esempi.
1. Slideshow più movimento delle immagini (esempio)
Questo primo tutorial mostra come creare uno slideshow con in più il movimento delle immagini.
Per realizzarlo dovrete scrivere questo codice:
<style type=”text/css”>
#test1 {
margin: 1em auto;
border: 2px solid #555;
width: 550px;
height: 200px;
}
</style>
<script type=’text/javascript’ id=’source-test1′>//<![CDATA[
$(function() {
$('#test1').crossSlide({
speed: 45, //in px/sec
fade: 1 //in sec
}, [
{ src: 'lib/sand-castle.jpeg', dir: 'up' },
{ src: 'lib/sunflower.jpeg', dir: 'down' },
{ src: 'lib/flip-flops.jpeg', dir: 'up' },
{ src: 'lib/rubber-ring.jpeg', dir: 'down' }
]);
});
//]]></script>
<div id=’test1′>Loading…</div>
In questo esempio c’è una prima parte che riguarda le caratteristiche css da dare al div “test1″, dopo di che c’è la funzione necessaria per la realizzazione dello slideshow, dove si settano:
- la velocità del movimento delle foto -> speed:45;
- la velocità dell’effetto di transizione -> fade:1;
- le foto che fanno parte dello slideshow, con la direzione che esse avranno: ->
{ src: ‘lib/sand-castle.jpeg’, dir: ‘up’ },
{ src: ‘lib/sunflower.jpeg’, dir: ‘down’ },
{ src: ‘lib/flip-flops.jpeg’, dir: ‘up’ },
{ src: ‘lib/rubber-ring.jpeg’, dir: ‘down’ }
2. Slideshow statico (esempio)
Il procedimento è identico al precedente:
<style type=”text/css”>
#test2 {
margin: 1em auto;
border: 2px solid #555;
width: 550px;
height: 367px;
}
</style>
<script type=’text/javascript’ id=’source-test2′>//<![CDATA[
$(function() {
$('#test2').crossSlide({
sleep: 2, //in sec
fade: 1 //in sec
}, [
{ src: 'lib/sand-castle.jpeg', href: 'http://flickr.com/photos/spacetrucker/94209642/' },
{ src: 'lib/sunflower.jpeg', href: 'http://flickr.com/photos/hichako/1125341449/' },
{ src: 'lib/flip-flops.jpeg', href: 'http://flickr.com/photos/jayniebell/1125216143/' },
{ src: 'lib/rubber-ring.jpeg', href: 'http://flickr.com/photos/ruminatrix/1125292682/' }
]);
});
//]]></script>
<div id=’test2′>Loading…</div>
L’unica differenza è che ora c’è la voce sleep, ovvero per quanto tempo resterà ferma l’immagine, in questo caso 2 secondi
3. Ken Burns effect (esempio)
Questo slideshow è simile al primo con l’aggiunta dello zoom su un particolare della foto.
<style type=”text/css”>
#test3 {
margin: 1em auto;
border: 2px solid #555;
width: 550px;
height: 367px;
}
</style>
<script type=’text/javascript’ id=’source-test3′>//<![CDATA[
$(function() {
$('#test3').crossSlide({
fade: 1
}, [
{
src: 'lib/sand-castle.jpeg',
from: '100% 80% 1x',
to: '100% 0% 1.7x',
time: 3
}, {
src: 'lib/sunflower.jpeg',
from: 'top left',
to: 'bottom right 1.5x',
time: 2
}, {
src: 'lib/flip-flops.jpeg',
from: '100% 80% 1.5x',
to: '80% 0% 1.1x',
time: 2
}, {
src: 'lib/rubber-ring.jpeg',
from: '100% 50%',
to: '30% 50% 1.5x',
time: 2
}
]);
});
//]]></script>
<div id=’test3′>Loading…</div>
In questo terzo esempio, per ogni immagine, si decide da che posizione deve cominciare l’immagine e in quale posizione arrivare (from: ’30% 50%’, o ‘top left’, come negli esempi), e in più lo zoom di partenza e di arrivo (1x, 1.5x).
Scarica il sorgente 1
Scarica il sorgente 2
Scarica il sorgente 3
Fonte: gruppo4
Mirko D'Isidoro on 
Rosario on 
Tamal on 
federica on 
fedeweb on 
21 ottobre 2008 at 11:24
questo codice è spettacolare: poco pesante e molto efficace!!!
22 ottobre 2008 at 09:45
23 gennaio 2009 at 18:29
Ciao e grazie per l’utile guida, l’ho seguida passo per passo, ho usato nel mio sito l’esempio 1, funziona benissimo con Opera e con Firefox, ma vedo che purtroppo no nse ne parla di funzionare con quel coso di Internet Explorer… sbaglio qualcosa io oppure devo semplicemente rassegnarmi?
Ciao!
24 gennaio 2009 at 11:33
Ciao in che senso non funziona con Internet Explorer? che problemi ti da? lo script funziona con tutti i browser e quindi probabilmente c’è qualche errore..
24 gennaio 2009 at 13:20
Lo script non da alcun errore, rimane su “Loading…” e non fa visualizzare alcuna immagine….
24 gennaio 2009 at 14:49
mah strano..se provi gli esempi che ho messo nell’articolo, con internet explorer funzionano..controlla meglio il tuo codice..se non risolvi mandamelo pure per e mail che gli do’ un’occhiata
18 maggio 2009 at 15:14
Salve Fede,
Complimenti davvero per le tue guide
Ti scrivo per dirti che io ho provato con l’esempio 1 ma non riesco a farlo funzionare…..io sono davvero un INESPERTO
scusami…….ho provato ad inserire delle mie foto ma non succede niente rimane su loading……forse ho sbagliato io a scrivere il codice ?
Ho provato anche a
Scaricare il Sorgente 1
ma il link non funziona….
Se e quando avrai tempo mi potresti risponedre per favore Grazie dell’aiuto e mi scuso ma non sono proprio un mago della programmazione sono solo alle prime armi…Grazie ancora
ciao
jack
18 maggio 2009 at 16:15
Ciao, si ho notato anch’io che da qualche giorno i link non funzionano più..mah..ora li ho sistemati..prova a scaricarli e se ci sono ancora problemi scrivimi pure!
26 maggio 2009 at 23:24
Ciao mi dispiace ma i link dei sorgente a me ancora non funzionano…se mi potessete aiutare in qualche modo….Grazie Fede e Complimenti ancora ciao
27 maggio 2009 at 09:47
Ora li ho sistemati..fammi sapare se riesci a scaricarli..ciao!
29 maggio 2009 at 00:11
ci sono riuscito
))))
Tutto funziona a meraviglia !!!!!
Grazie infinite Fede è stupendo
Ciao buon lavoro
Grazie
29 maggio 2009 at 18:24
ciao, ho provato a creare la slide e funziona perfettamente. l’ho posizionata sotto un menu multilivello che utilizza anch’esso jquery. Il problema è che con internet explorer la slide sta sopra i menu a discesa, quindi non si leggono e non sono accessibili, anche cambiando gli z-index del menu. Coin firefox e safari tutto ok invece!!!
cosa può essere?
1 giugno 2009 at 12:23
Ciao! prova a mandarmi il link della pagina dove c’è questo problema..
2 giugno 2009 at 15:40
Ciao a tutti
scusatemi una ultima cosa come si può fare per centrarlo in una tabella ? Intendo lo slideshow….non ci riesco
3 giugno 2009 at 14:56
Dovrebbe già centrarsi nella tabella, se hai utilizzato i sorgenti presenti nell’articolo..in caso prova a mandarmi il codice dove hai inserito lo slide
3 settembre 2009 at 17:28
a me non funziona se prvo solo a cambiare le immagini , non appare nulla, ho inserito immagini con estensione jpg. Mi potreste dare una mano, grazie
3 settembre 2009 at 17:41
risolto, si possono inserire solo immagini jpeg
4 settembre 2009 at 09:57
Ciao, non ho ben capito il problema che avevi. Comunque sono contento che l’hai risolto!
14 settembre 2009 at 17:31
Ciao, innanzi tutto complimenti per lo script… uno dei migliori che ho trovato in giro.
Ho un solo un problema che magari sai come risolvermi…
Esclusi Firefox e Safari che san fare il loro mestiere, su IE si presenta il problema della “barra oro” che chiede di autorizzare il contenuto bloccato ecc.. ecc…
Siccome visitando la tua pagina tale barra non compare, volevo sapere se avevi utilizzato un qualche codice che la “inibisca”.
Grazie mille in anticipo!
14 settembre 2009 at 23:47
Ciao Maverick e benvenuto su Fedeweb.
Per quanto riguarda la barra del contenuto bloccato, viene fuori solo se vedi la pagina in locale. Una volta messo on line quella “barra” non verrà più fuori, e infatti guardando il mio esempio non c’è. La stessa cosa vale per i contenuti in flash.
Spero di essere stato chiaro
16 settembre 2009 at 17:45
Ciao scusa ho nuovamente un problema…
Se sostituisco le immagini di esempio nella cartella lib con altre mie personali lo slideshow smette di funzionare con IE, mentre su firefox nessun problema.
Specifico che:
- ho cambiato il nome delle immagini anche nel sorgente della pagina ovviamente
- le immagini hanno estensione .JPEG (ho letto un pò di commenti sopra che ci sono dei problemi con le .JPG invece..)
- come editor uso frontpage 2003
Possibile soluzione?
Grazie mille!
17 settembre 2009 at 00:07
Ciao, riesci a mandarmi il sorgente via e mail così appena posso vedo cosa c’è che non va?
27 novembre 2009 at 19:39
Ciao fedeweb,
ho trovato di grande interesse i tuoi script.
Ho provato (neofita inesperto!!!) ad inserirlo in una pagina e tutto è ok. Dovendo però inserire nella medesima pagina un javascript relativo ad un menù verticale non riesco a far coesistere entrambi gli script.
Hai una soluzione? Trovi qui un file con il codice ( http://wikisend.com/download/908730/CODICE.txt )
28 novembre 2009 at 12:01
Ciao A&O e benvenuto su fedeweb
La cosa migliore è si mandi la pagina con tutti i file relativi (script, immagini ecc.) così posso aiutarti meglio.
10 gennaio 2010 at 23:06
scusa fede,
ho sto usando la seconda tabella, sono abbastanza inesperto, ma quando la vado ad inserire nella mia tabella (div) mi viene solo scritto loading.. mi sai spiegare il perchè?
spero mi risponderei presto!
ti ringrazio anticipatamente..
Mattia
11 gennaio 2010 at 10:24
Ciao Mattia e benvenuto su Fedeweb.
La prima cosa che ti consiglio di fare è di spostare il codice che va dello script tra i tag
.Poi controlla che i percorsi delle immagini siano giusti. Ho visto che c’è uno spazio tra urbanistica e infrastrutture di troppo forse, come ad esempio qui:
src: ‘urbanistica – infrastrutture/1.jpeg’
Inoltre come estensione metti jpg e non jpeg.
Fammi sapere come va!
11 gennaio 2010 at 22:15
ho provato a modificare quello picole cose che mi hai detto, ma non funziona comunque risulta sempre loading.. se riesci a darmi una mano mi faresti un grandissimo favore.. se vuoi puoi prendere la mia email (contatto msn) o mi trovi perennemente connesso su facebook (Mattia Berarduci) scusa per il disturbo
comunque è un gran bel sito, soprattutto utile!
11 gennaio 2010 at 22:15
mattia berarducci* sorry
12 gennaio 2010 at 12:57
Mandami una mail con tutti i sorgenti e le foto ok?
8 febbraio 2010 at 14:42
ciao fede e complimenti per il sito!
volevo fare una domanda: se io volessi inserire sopra allo slide statico un div ed inserirci dentro chesso un colore di bg o del testo come dovrei fare?
Ho provato usando lo zindex ma non funziona! grazie
9 febbraio 2010 at 00:12
Ciao Andrea, grazie mille per i complimenti! non ho ben capito..vorresti mettere uno sfondo allo slideshow, inserendolo in un div?
17 febbraio 2010 at 18:33
Ehi ciao!! ..
sto provando a usare il codice per slideshow statico ma, inserendolo in dreamweaver, nell’effettivo visualizzo solo la scritta “Loading”.. !!!
18 febbraio 2010 at 11:18
Ciao Su e benvenuta nel blog
Cosa hai fatto esattamente per utilizzare lo slideshow? le immagini che vuoi utilizzare che dimensione hanno?
15 maggio 2010 at 12:33
Ciao.. ho implementato la slideshow tipo1 nel sito solo che io la vorrei in verticale e non orizzontale. Ho provato ad allungare le foto e impostare un height maggiore ma oltre ad un certo limite(254px) le immagini non vengono più visualizzate.. che devo fare? modificare i file .js?
grazie 1000!
17 maggio 2010 at 12:34
Ciao Matteo e benvenuto nel blog.
L’altezza che imposti nel codice CSS deve essere 91 pixel inferiore all’altezza delle immagini, altrimenti non è possibile visualizzare le foto. Quindi se ad esempio hai le foto alte 500 pixel, nel CSS potrai mettere un’altezza massima di 409 pixel.
Spero di averti chiarito i dubbi, ciao!
17 maggio 2010 at 12:42
Ciao.. grazie per la risposta ma purtroppo non cambia nulla. Le immagini le ho alte 500px come hai detto tu ma impostando 409px si allunga solamente il riquadro che dovrebbe contenere le immagini ma le stesse non vengono visualizzate. Il limite inferiore rimane 254px.
17 maggio 2010 at 12:46
rettifico… son riuscito a farlo funzionare.. thanks!!!
31 maggio 2010 at 12:10
ciao, ho apprerzzato lo script che hai illustrato; non capisco perchè funziona senza problemi quando apro la pagina index.htm in locale, mentre non funziona (rimane su ‘loading…) quando trasferisco la pagina sul server (utilizzo lo spazio gratuito di xoom).
Sai se xoom applica dei blocchi agli script? E’ il secondo script che non riesco a far funzionare in remoto.
Grazie.
1 giugno 2010 at 16:23
Ciao Enzo e benvenuto nel blog
Non ho mai provato ad utilizzare xoom, quindi non saprei darti una risposta.
Prova su altervista, li sono sicuro che non c’è nessun problema
14 giugno 2010 at 20:10
ciao Fede, complimenti, bello script, comodo e intuitivo……MA (brutta cosa quando c’è un ma di mezzo…..in stand alone tutto ok, ho provato ad integrarlo in un wordpress utilizzando il suo jQuery e il crossSlide preso qui…..ma niente.
Carica le foto ma non le muove e restituisce un mess di errore caricamento pagina per un metodo errato nel crossSlide
il sito è questo (in demo ancora) http://www.wtkaitaliakravmaga.it/demo.php
Grazie anticipatamente.
Peppe
15 giugno 2010 at 09:18
Ciao peppe e benvenuto nel blog;)
Attenzione che integrare in wordpress degli script jquery non è semplicissimo. Non è come integrarli in un sito statico html/css.
In standalone lo hai provato con wordpress?
P.S. la demo non funziona
Ciao!
15 giugno 2010 at 13:32
grazie per la risposta Fede,
ho risolto e ne approfitto per dare la soluzione a chi volesse integrare il crossSlide in wordpress.
Semplicissimo: richiamare l’ultima versione di jQuery direttamente da Google….quindi la lib jQuery da Google e il file cross-slide dalla root del sito e tutto funziona alla grande
Per vederlo in azione:
http://www.wtkaitaliakravmaga.it/index.php
16 giugno 2010 at 10:03
Grazie peppe per la spiegazione! E ho visto che ne hai fatto un ottimo uso! bravo!
22 luglio 2010 at 12:16
ciao Fede,
ho utilizzato lo script dell’esempio 2…quando ho una serie di immagini lo script funziona perfettamente ma ho un problema nel caso in cui ho una sola immagine (sono in attesa delle altre)…compare per un brevissimo tempo e poi più nulla…cosa posso fare?
22 luglio 2010 at 13:15
Ciao Francy e benvenuta nel blog
Direi intanto di non utilizzare lo script perchè con un’immagine non ha senso. Quando avrai le altre foto, potrai utilizzare lo script. Che dici?
9 ottobre 2010 at 10:24
Ciao Fede, fantastici tutorial! Ho provato a inserire il codice dell’esempio 1, usando delle immagini in jpg. Ho inserito nella sia gli script jquery (ovviamente indicando l’indirizzo di riferimento sul mio dominio) e lo stile css. Nei tag invece ho inserito il resto, specificando anche questa volta l’intero percorso delle immagini sul mio sito. Purtroppo non succede nulla..si vede solo “loading” e nient’altro. Dove sbaglio? grazie mille per il tuo aiuto!
ps: ho provato con Firefox, Safari, IE.. ma niente.
9 ottobre 2010 at 10:25
****gli script jquery e stile css sono nella HEAD, il resto fra i tag BODY.
2 novembre 2010 at 15:36
Ottimo script sono riuscito ad integrarlo alle mie esigenze, ma usando il secondo ho notato che lascia un bordo blu in alto e a sinistra, come posso toglierlo?, pur togliendolo dallo style ugualmente rimane, qualche consiglio?
2 novembre 2010 at 16:50
Ciao Fabio e benvenuto nel blog
Riesci a mettere l’indirizzo di dove hai pubblicato lo slideshow o al limite mandarmelo per e mail?
6 novembre 2010 at 18:54
Ho risolto è un problema dovuto ad ie, per risolverlo basta mettere border 0 anche nel teg a o come nel mio caso che non mi serviva togliere l’a href
Grazie ugualmente
9 novembre 2010 at 12:25
Ok grazie per aver condiviso la soluzione (a volte è più semplice di quel che sembra!)
9 febbraio 2011 at 17:55
Ciao, ho ripescato questo tuo articolo nell’esigenza di inserire una slide in un header di un sito fatto con wordpress.
Ho provato e riprovato ma non riesco.
L’unico effetto ho ottenuto è un abbassamento di una 50ina di pixel di tutto il sito. Ma niente slide. Forse non è dei più adatti da usare con WP.
Sapresti suggerirmi qualche istruzione su dove agire?
Personalmente ho utilizzato l’editor della sezione amministrazione.
21 febbraio 2011 at 12:12
ciao, ho bisogno di un aiuto.
ho questo script:
div.imgbox {
float:right;
width:310px;
height:350px;
text-align:center;
margin-left:10px;
margin-bottom:10px;
}
div.imgbox img {
padding-top:65px;
}
div.imgbox p {
text-align:left;
margin:5px;
padding:0px;
font-size:10px;
color:#aaaaaa;
}
jQuery(‘.imgbox’).crossSlide({
sleep: 3,
fade: 1
}, [
{ src: 'images/Esterno negozio.jpg' },
{ src: 'images/interno1.jpg' },
{ src: 'images/interno2.jpg' },
{ src: 'images/interno3.jpg' }
]);
<!– –>
Il negozio.
Quello che vorrei è la possibilità di vedere la scritta “Il negozio” sotto l’animazione. Come posso fare?
Se inserisco un’immagine statica, senza jquery, nel div compare tutto correttamente. Con lo script attivo, invece, la scritta mi viene completamente nascosta.
Grazie a tutti.
21 febbraio 2011 at 12:14
Il negozio.
21 febbraio 2011 at 12:16
scusate il doppio post. Volevo inserire il blocco “div” per la spiegazione del mio problema.
Spero si capisca lo stesso.
22 febbraio 2011 at 09:36
@Giovanni
Scusa il ritardo nella risposta, ma se hai letto gli ultimi avvenimenti, puoi capirne il motivo. Provo e ti faccio sapere prima possibile
@Spike
Così su due piedi mi è difficile aiutarti. Hai il lavoro on line? oppure al limite mandamelo per e mail
6 giugno 2011 at 10:55
Ciao Fede… la gallery è davvero interessante… l’unico problema non funziona su IE… qualcuno ha avuto lo stesso problema e l’ha risolto. Non ho capito come… potreste aiutarmi??? spero in un commento rapido perchè ho devo consegnare questo lavoro. ti ringrazio
22 novembre 2011 at 16:34
Scusate ma ho risolto, avevo praticamente implementato un altro script js che faceva conflitto… una volta rimosso è andato tutto alla perfezione
D
22 novembre 2011 at 16:26
Ciao, provando con internet explorer il primo esempio di slide (cross-slide) funziona… una volta implementato sul mio sito… seguendo in modo identico stessi modi stesso tutto il procedimento… con internet explorer si blocca tutto… e appare sulla pagina solo lo sfondo… mentre con gli altri browser tutto ok… come faccio? spero in un vostro aiuto… vi ringrazio e saluto
6 febbraio 2012 at 12:48
Ciao,
inanzitutto complimenti per il lavoro!
Ho un problema che forse è già stato evidenziato; leffetto non funziona su exlorer…. come può essere?
Ciao e grazie!!!!
9 febbraio 2012 at 11:08
Ciao Simone e benvenuto nel blog
Quale versione di Explorer crea problemi?
2 marzo 2012 at 12:59
ciao fede!
potresti sistemare il del Scarica jquery.cross-slide.js
nn và più
grazie infinite e complimenti
2 marzo 2012 at 13:37
nnt Simò XD
li ho trovati scaricando lo zip grazie cmq
complimenti davvero! a presto!
25 marzo 2012 at 13:09
Ciao Federico, purtroppo sono alle prime armi!
Io uso wordpress. Innanzitutto:
1- devo inserire i codici nell’html della pagina dove far apparire lo slide?ma lì non c’è una sezione ed .
2- al posto delle immagini del tuo es. devo mettere il percorso delle mie,ok?es.C:\Users\Desktop/immagine
3- il file zip che si può scaricare come e dove va messo?
scusa per l’imbranataggine.
ti ringrazio di un’eventuale risposta
ciao
12 aprile 2012 at 09:33
Volevo provare uno degli script proposti per realizzare uno slideshow ma non riesco a scaricare “jquery.cross-slide.js”, come mai ? Il server mi risponde che non trova il file.
In attesa di riscontro porgo cordiali saluti. Salvo T.
Trackbacks & Pingbacks
Gli ultimi articoli in Javascript
Gli ultimi articoli in Tutorial Jquery
I più commentati
Gli articoli più letti del mese
Feed RSS
Cosa sono i feed rss?
Come mi abbono?
Quanti siamo on line?
Iscritto a