Fw

Wordpress Creative Developer

Tutorial Jquery: Creare fantastici slideshow in 5 minuti

  • Plugin jQuery
  • -

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

93 Commenti

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

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

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

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

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

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

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

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

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

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

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

  12. Ciao! prova a mandarmi il link della pagina dove c’è questo problema..

  13. Ciao a tutti
    scusatemi una ultima cosa come si può fare per centrarlo in una tabella ? Intendo lo slideshow….non ci riesco 😉

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

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

  16. risolto, si possono inserire solo immagini jpeg

  17. Ciao, non ho ben capito il problema che avevi. Comunque sono contento che l’hai risolto!

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

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

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

  21. Ciao, riesci a mandarmi il sorgente via e mail così appena posso vedo cosa c’è che non va?

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

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

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

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

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

  27. mattia berarducci* sorry

  28. Mandami una mail con tutti i sorgenti e le foto ok?

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

  30. Ciao Andrea, grazie mille per i complimenti! non ho ben capito..vorresti mettere uno sfondo allo slideshow, inserendolo in un div?

  31. Ehi ciao!! ..

    sto provando a usare il codice per slideshow statico ma, inserendolo in dreamweaver, nell’effettivo visualizzo solo la scritta “Loading”.. !!!

  32. Ciao Su e benvenuta nel blog 😉
    Cosa hai fatto esattamente per utilizzare lo slideshow? le immagini che vuoi utilizzare che dimensione hanno?

  33. […] Tutorial Jquery: Creare fantastici slideshow in 5 minuti 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. blog: Fedeweb – La ragnatela ha catturato il mondo | leggi l'articolo […]

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

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

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

  37. rettifico… son riuscito a farlo funzionare.. thanks!!! 😀

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

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

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

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

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

  43. Grazie peppe per la spiegazione! E ho visto che ne hai fatto un ottimo uso! bravo! 😉

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

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

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

  47. ****gli script jquery e stile css sono nella HEAD, il resto fra i tag BODY.

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

  49. Ciao Fabio e benvenuto nel blog 😉
    Riesci a mettere l’indirizzo di dove hai pubblicato lo slideshow o al limite mandarmelo per e mail?

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

  51. Ok grazie per aver condiviso la soluzione (a volte è più semplice di quel che sembra!)

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

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

  54. Il negozio.

  55. scusate il doppio post. Volevo inserire il blocco “div” per la spiegazione del mio problema. 🙁
    Spero si capisca lo stesso.

  56. @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 😉

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

    • Scusate ma ho risolto, avevo praticamente implementato un altro script js che faceva conflitto… una volta rimosso è andato tutto alla perfezione :DD

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

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

    • Ciao Simone e benvenuto nel blog 😉

      Quale versione di Explorer crea problemi?

      • ciao fede!

        potresti sistemare il del Scarica jquery.cross-slide.js

        nn và più

        grazie infinite e complimenti

      • nnt Simò XD

        li ho trovati scaricando lo zip grazie cmq

        complimenti davvero! a presto!

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

    • 1-sì, vanno inseriti nell’html della pagina dove farli apparire,nel punto in cui vuoi che si vedano.
      2-sì, va messo il percorso delle tue immagini. Ovviamente il sito online non potrà prendere le immagini dal tuo desktop: dunque devi inserire le immagini in una cartella gemella nel sito.
      3-il file zip va spacchettato e il contenuto copiato nella cartella dove c’è la pagina su cui stai lavorando o, se in altra cartella, andrà indicato nell’html.
      Non sono una cima, ma spero che le mie risposte ti siano utili e, soprattutto, corrette. Io, d’altronde, ho fatto così.

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

  62. Salvo scarica il sorgente e lo trovi li….grazie fede.

  63. Ciao!…molto utile queste tue guide….ho provato la gallery n°2 e funziona molto bene…….però è possibile fare in modo che scelga le immagini da visualizzare in modo casuale, senza seguire l’ordine con cui sono state inserite nel codice?…vorrei le prendesse “random”, visto che io ho molte immagini da inserire (circa 80).

    Ti ringrazio moltissimo in anticipo!

    • Ciao Andrea e benvenuto il blog.

      Ti consiglierei di utilizzare una galleria fotografica per mostrare 80 immagini e non uno slideshow 😉

      • Innanzitutto grazie della risposta!

        http://www.lanciayclubitalia.it/home.php

        Nella pagina linkata c’è una slideshow di immagini (non la tua che ho provato solo in locale) come vedi, a me interesserebbe proprio che le immagini (in formato 640×400 e caricate da una cartella) vengano visualizzate una alla volta in successione casuale, possibilmente con un qualche effetto fade da una all’altra, senza anteprime, zoom o altri pulsanti. Per utilizzare la tua slideshow mi servirebbe solamente solo la visualizzazione casuale delle immagini e poi per i miei requisiti sarebbe perfetta. Qualche immagine (soprattutto quelle in bassa risoluzione) le posso eliminare in modo da ridurre il n° di immagini. In locale comunque anche con 70 immagini la slide funzionava bene, mentre con 88 non partiva. Fai conto anche che le immagini spesso vengono cambiate, cancellate, aggiunte, non rimangono sempre le stesse molto a lungo.

        Praticamente quella linkata è una pagina di “passaggio”, di transizione, in cui un possibile un utente si possa soffermarsi per poco tempo ad osservare qualche immagine, prima di passare al “forum”, che è la parte principale e più ricca del sito.

        Nell’attuale slideshow nella pagina è presente la funzione “random”, non so se è possibile implementarla anche nella tua slideshow n°2.

  64. Salve, grazie per il tutorial comprensibile persino per chi è alle prime armi.
    Ho un problema: lo slideshow 2 funziona benissimo in Internet Explorer, ma in Firefox le immagini non sono centrare: il lato sinistro, invece di essere a sinistra, è perfettamente al centro, lasciando di fatto il riquadro delle immagini vuoto a metò sul lato sinistro. Come mai?

  65. Ciao fedeweb
    vorrei aggiungere allo slideshow una caption per ogni immagine (come nell’esempio “Ken Burns effect” http://tobia.github.com/CrossSlide/)…ma non funziona.
    Posto il codice:

    //

    Loading…

    Questo è il CSS:

    #slideshow {
    width: 572px;
    height: 150px;
    }

    div.caption {
    position: absolute;
    margin-top: -75px;
    margin-left: -75px;
    width: 150px;
    text-align: center;
    left: 50%;
    padding: 5px 10px;
    background: black;
    color: white;
    font-family: sans-serif;
    border-radius: 10px;
    display: none;
    }

    Dove sbaglio??

    Grazie in anticipo.
    Gianluca

  66. Complimenti davvero per l’ottimo lavoro svolto.
    Il mio problema è che quando inserisco più di sette foto rimane fermo su loading, mentre se inserisco fino a 7 foto tutto fziona perfettamente. Ho inserito lo script così come scaricato e aggiunto le righe di richiamo alle foto. Sai darmi qualche soluzione in merito? grazie mille

    • Ciao Alberto e benvenuto nel blog 😉

      Comportamento strano, le foto hanno tutte le stesse dimensioni?

  67. Ciao Federico,
    questa mattina ho visto il tuo interessante sito
    e volevo cimentarmi con uno slideshow.
    Ho scaricato con successo la prima libreria
    ma quando tento di scaricare la seconda (jquery.cross-slide.js)
    mi dice che il link sembra essere non funzionante.
    Posso provare a scaricarlo in qualche altro sito ?
    Grazie
    Buona giornata
    alex

    • Ti ringrazio Alessandro per la segnalazione. Ora dovresti riuscire a scaricarlo.

      • Ciao Federico,
        si ora il link funziona perfettamente, grazie mille.
        Ovviamente avendo scaricato la versione “jquery-1.8.3.min.js”
        la prima riga (correggimi se sbaglio)
        andrà aggiornata come la seguente:

        Grazie ancora
        A presto

  68. Ciao Federico,
    ho realizzato il tuo slide show: funziona alla grande al primo colpo (testato anche su Opera).
    Ora vorrei apportare una piccola modifica (a dire il vero ci ho già provato senza successo):
    vorrei prevedere la pausa dello slide show al click del mouse (oppure semplicemente lasciandone il cursore sulla foto): questo per far si che un utente possa soffermarsi su una particolare immagine.
    Grazie
    Alex

  69. Ciao…
    Tu mi hai aiutato tantissimo…
    Grazie…

    Ma ho un dubbio…
    Si può mettere una piccola pausa al inizio del esempio 1??

    o cosa mi consigli??

    io vorrei fare uno come questo: http://www.bookafe.com.br

    Grazie mille!!

    • Ciao Maicon è la prima volta che vedo un effetto del genere in uno slide, con delle pause in in mezzo. Francamente non mi convince molto come tecnica e inoltre è stato fatto in Flash.

      Ti consiglierei piuttosto di utilizzare il plugin indicato nell’articolo, con movimenti più lenti nelle varie slide 😉

  70. Ciao Fede,
    ottimo lavoro e ottima slide show, facile da inserire e da personalizzare ma in explorer 7 non va..e neanche 8. Si blocca lo script e da errore riga 32: carattere: 38 manca identificatore. Ho notato che tanti altri hanno avuto problemi con explorer ma non ho trovato una risposta con una soluzione. Il sito non l’ho ancora pubblicato ma con ff, safari e chrome va alla grande!
    Grazie in anticipo per una tua gentile risposta.

  71. Ciao, ho scaricato il pacchetto dell’esempio 1, ma se aggiungo le foto che mi interessano non mi visualizza più nessuna foto… Mi piace così tanto, lo voglio far funzionare!! Help me please!! 🙂

  72. Ciao Fede, grazie per tutti i tutorial, ho un problema con questo cross slide, le immagini non riesco a vederle..non so da cosa dipenda, mi sto avvicinando ora al mondo html, css ecc. e non riesco a capire dove sbaglio….
    Penso di aver sbagliato qualcosa nello scaricare il plug-in…

    Grazie, Angelo…

  73. Ciao,
    finalmente una cosa semplice! Grazie di tutto, è stato utilissimo!
    Solo una cosa….è possibile fare apparire, quando viene cliccata un’immagine, una lightbox con tutte le immagini dello slideshow?
    Il codice per la lightbox ce l’ho, solo non so come integrarlo in questo caso!

    Grazie in anticipo!
    Brenda

  74. Ciao Fede, bel lavoro, unica cosa è che se allargo di 1200px il div, le immagini non vengono visualizzate correttamente(ovviamente parliamo di img da 1200 px). Si vedono solo a metà

  75. Ciao!Volevo sapere se era possibile non mettere una dimensione in pixel, ossia voglio metterla in percentuale….Praticamente la dimensione della finestra può variare e lasciare una dimensione in pixel non va bene..Il componente div è inserito all’interno di un tag td e io vorrei che il div si adattasse alla dimensione del tag td che è cmq lungo il 70% della pagina..Se provo a modificare mettendo

    #test2 {
    margin: 1em auto;
    border: 2px solid #555;
    width: 100%;
    height: 100%;
    }

    non carica più la gallery

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *