Pubblicato da: fedeweb | ottobre 21, 2008

Creare fantastici slideshow in 5 minuti

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/&#8217; },
{ src: ‘lib/sunflower.jpeg’,   href: ‘http://flickr.com/photos/hichako/1125341449/’    },
{ src: ‘lib/flip-flops.jpeg’,  href: ‘http://flickr.com/photos/jayniebell/1125216143/&#8217; },
{ src: ‘lib/rubber-ring.jpeg’, href: ‘http://flickr.com/photos/ruminatrix/1125292682/&#8217; }
]);
});
//]]></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

Annunci

Responses

  1. questo codice è spettacolare: poco pesante e molto efficace!!!

  2. 😉

  3. 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!

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

  5. Lo script non da alcun errore, rimane su “Loading…” e non fa visualizzare alcuna immagine….

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

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

  8. 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!

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

  10. Ora li ho sistemati..fammi sapare se riesci a scaricarli..ciao!

  11. ci sono riuscito ;-)))))
    Tutto funziona a meraviglia !!!!!
    Grazie infinite Fede è stupendo 😉
    Ciao buon lavoro
    Grazie

  12. 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?

  13. Ciao e grazie per la guida!
    ho una sola domanda da porti… visto che sto utilizzando questo slide con una larghezza al 100% è possibile centrare automaticamente l’immagine all’interno del box? se si, in che modo?

    Ti ringrazio anticipatamente
    Ciao
    Ema


Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

Categorie

%d blogger hanno fatto clic su Mi Piace per questo: