Fw

Wordpress Creative Developer

Tutorial Jquery – Uno Bellissimo Slideshow Di Foto Originale

  • Tutorial Jquery
  • -

Appuntamento con i tutorial su jquery, dove andremo a vedere uno bellissimo slideshow di foto dove potrai realizzare effetti di transizione davvero originali.

Ecco subito l’esempio che andremo a realizzare, grazie al plugin jqFancyTransitions.

Slideshow Originale di Foto

Andiamo a vedere come ottenere questo effetto

Passo preliminare

Scarica gli script necessari: jQuery e jqFancyTransitions

Passo 1. Inizializzazione dello script

Tra i tag head inserisci le righe di codice necessarie per inizializzare lo script.

  

Passo 2. Inserisci le immagini

Inserisci il codice HTML necessario, per inserire le immagini, possibilmente tutte della stessa dimensione.

Foto 1 Foto 2 Foto 3

Passo 3. Applichiamo lo script

Ora non ti resta che applicare lo script al div che hai appena creato, richiamando la funzione jqFancyTransition., subito dopo il div che hai inserito al punto 2.

Passo 4. Personalizzazione degli effetti

Questo passo è opzionale, ma ti permette di sfruttare al massimo lo script.

  • effect: ”, // puoi scegliere tra wave, zipper, curtain
  • width: 500, // larghezza dello slideshow
  • height: 332, // altezza dello slideshow
  • strips: 20, // numero delle strscie
  • delay: 5000, // tempo tra 2 immagini
  • stripDelay: 50, // tempo di comparsa delle striscie
  • titleOpacity: 0.7, // opacità della didascalia
  • titleSpeed: 1000, // velocità di apparizione della didascalia
  • position: ‘alternate’, // posizione della didascalia: top, bottom, alternate, curtain
  • direction: ‘fountainAlternate’, // direzione delle striscie: left, right, alternate, random, fountain, fountainAlternate
  • navigation: false // pulsanti di navigazione
  • links: false // immagini come link

Molto semplice da realizzare, ma di grande impatto. Se hai qualche dubbio chiedi pure!

Scarica il sorgente

Guarda il tutorial

13 Commenti

  1. […] Tutorial Jquery – Uno Bellissimo Slideshow Di Foto Originale | Fedeweb (tags: jquery tutorial slideshow) […]

  2. Bella slide, sempre articoli interessanti.
    Però, direi che il soggetto è di gran lunga meglio dello slide. 🙂

  3. Ciao Federico, ho un problema. Ho ridimensionato lo slide delle foto e la fascia del “title” mi è rimasta della dimensione che c’è nel tuo esempio. Come faccio ad adattarla? Grazie mille

  4. Ciao Aleinux, per ridimensionare anche il title devi modificare il selettore ft-title nel foglio di stile style.css.

    .ft-title {
    padding:10px;
    text-align:left;
    width:580px; /*valore da modificare*/
    }

  5. Grazie mille

  6. Ciao! Ho provato a inserire la slideshow con la navigazione. Va tutto perfettamente, ma non riesco a modificare l’aspetto dei numeri per la selezione rapida delle foto. Ho provato sul css con .ft-buttons ma non mi ha dato risultati. Ho visto sul css dell’esempio che per personalizzare si usa il “a” e “a:hover” ma non sarebbe proprio corretto. Suggerimenti?
    Grazie

  7. grande fede!!!! grazie!!!

  8. Voglio ringraziarti per avermi permesso di utilizzare questo componente ottenendo uno straordinario effetto con pochissima fatica!
    Vorrei però eliminare le scritte prev e next e magari anche i numeretti in basso, come potrei fare?
    Ciao.

  9. Ciao Lauro e benvenuto nel blog 😉

    Per eliminare le scritte e i numeretti metti nei parametri dello script navigation:false. Fammi sapere se risolvi 😉

  10. Perfettamente risolto! Grazie.

  11. Ciao,
    se le slide sono numerose vorrei dare una descrizione ma non vorrei vedere quella lunga serie di numeri in basso. Ho risolto “artigianalmente” applicando uno sfondo dello stesso colore del font, ma mi piacerebbe utilzzare una tecnica un pò più “scientifica.”
    Grazie

  12. spero che le capacità di questa “NUOVA” tecnologia non si limitino a queste presentazioni degne di power point

  13. grazie fede per la dritta.
    splendido ma nn mi funziona 🙁
    purtroppo son alle prime armi in javascript. avevo trovato anche tutorial in uk (senza successo anche quesi tentativi…).
    nn riesco a capire quale può essere la mia mancanza.
    ho aperto anche files di esempio in dreamweaver ma anch’esso nn funziona (collegato jquery.js ecc…)
    potrei inviarti link della pagina per avere qualche dritta?
    grazie mille per la disponbilità

Scrivi un commento

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