Fw

Wordpress Creative Developer

Tutorial Jquery – Slideshow Di Foto Come Sfondo Del Sito

  • Tutorial Jquery
  • -

Uno dei trend del momento è l’utilizzo di immagini grandi come sfondo nel sito. In questo modo si vuol dare forte risalto alle immagini, suscitando forti emozioni nell’utente.

Oggi vediamo come si fa a realizzare questa tipologia di siti, utilizzando maxImage un plugin jquery, realizzato da Aaron Vanderzwan dove viene già spiegato come utilizzarlo, ma c’è qualche dettaglio di cui discutere per far funzionare il plugin al meglio.

Ecco quello che andremo a realizzare.

Tutorial Jquery - Slideshow Di Foto Come Sfondo

Vediamo quali sono i passi per realizzarlo.

Passo 1. Inizializzazione dello script

Come al solito tra i tag head bisogna insserire le righe di codice necessarie per inizializzare lo script

 

Passo 2. Inserimento delle immagini

Tra i tag body inserisci le righe di codice necessarie per inserire le immagini dello slideshow, a cui dovremo aggiungere l’attributo class (slidemaximage), che ci servirà nel passaggio successivo per applicare il plugin.





Passo 3. Applichiamo il plugin

Tra i tag head inserisci queste semplici righe di codice, per applicare lo script.

Passo 4. Gli stili

Bisogna applicare gli stili necessari per fare in modo di rimuovere le barre di scorrimento e impedire lo scrolling delle immagini tramite la proprietà position:fixed.

html    { overflow-x:hidden;overflow-y:scroll; }

img.slidemaximage     {
display:none;
position:fixed !important;/*le immagini non scrollano.non funziona in IE6*/
}

Scarica i sorgenti

Guarda il tutorial

51 Commenti

  1. Grande Fede sei sempre un passo avanti!

  2. Grazie Luca! se hai qualche dubbio chiedimi pure! 😉 ciao!

  3. Davvero un ottimo tutorial,
    conoscevo già il plugin, ma non avevo ancora visto nessuna guida in italiano… complimenti!

  4. Ciao Carlo e benvenuto nel blog 😉
    Sono felice di esserti stato d’aiuto e se hai qualche problema nell’utilizzo del plugin chiedi pure! ciao!

  5. davvero interessante come tutorial
    provato ad usare così com’è e funziona tutto bene
    quando ho provato a modificare un pò invece non mi carica le immagini ma credo che sia una scemata che mi sfugge: ti vorrei chiedere però un consiglio riguardo le dimensioni delle immagini.

    grazie mille

    k.

  6. Ciao Mr. K e benvenuto nel blog 😉
    Chiedimi pure cosa non riesci a fare, o cosa hai modificato, così posso darti una mano.

    Ciao!

  7. Ciao Fede….
    Volevo chiederti…. e se volessi impostare la strasparenza sullo sfondo del testo che vado a scrivere del mio sito?

  8. Ciao Leila e benvenuta nel blog 😉
    Per la trasparenza, puoi utilizzare delle png trasparenti (tagliando fuori internet explorer 6) oppure costruendo prima l’immagine con lo sfondo e la trasparenza sopra, in modo da non escludere nessun browser.

  9. ciao fede,
    complimenti per il tutorial.
    su un sito statico non ho avuto problemi, ma con wordpress (3) ho un problema strano: con safari tutto ok, ma con firefox e chrome non va…

    sapresti mica aiutarmi ??

    grazie,
    nuala

  10. Ciao Nuala e benvenuta nel blog 😉

    Ti ringrazio per i complimenti. Mi puoi dire più in dettaglio che problemi ci sono?

  11. ciao, vorrei chiederti se è possibile partendo da questo codice poter aggiungere un bottone o simili per visualizzare la foto che sta scorrendo in quel momento (facendo sparire il corpo del sito) e poi poter tornare al sito come fatto qui

    http://www.excelsiorpesaro.it/onlyforyou.php?utm_source=newsletter_exscelsior_ilsole24ore

    Sai come si possa fare? anche se hai una pagina da linkarmi per poter vedere come fare mi sarebbe molto d’aiuto, grazie!

  12. Ciao Andrea e benvenuto nel blog 😉

    Interessante la tua idea, come anche l’esempio che hai proposto!

    Un plugin per nascondere e visualizzare un div è questo: http://www.learningjquery.com/2006/09/slicker-show-and-hide.

    Prova e fammi sapere! 😉

  13. ok funziona, ti ringrazio!

  14. Ottimo! buono a sapersi! 😉

  15. Ciao complimenti per la tua guida…
    Volevo chiederti se sapresti come aggiungere degli effetti di transizione alle foto che cambiano tipo sito samsung http://www.samsung.com/it anche se quello ovviamente è fatto in flash… 🙂

    Grazie!!!

  16. Ciao Dario e benvenuto nel blog 😉

    Ti sei risposto da solo nella domanda, nel senso che quegli effetti di transizione non si riescono a fare con flash, ma probabilmente con HTML5, CSS3 e jQuery si può riuscire a fare qualcosa del genere.

  17. […] questa gallery di Speckyboy viene dimostrato che utilizzare le immagini come sfondo del sito non è una pratica ristretta solo a fotografi o portfolio, ma può essere usato in […]

  18. Grazie per la guida, mi èservita molto.
    Avrei però una richiesta,
    è possibile applicare un random alle immagini di sfondo?
    grazie

  19. Ciao bel plugin lo proverò sicuramente. Sapresti suggerirmi come posso fare apparire un menù andando per esempio sul nome oppure su un logo o pulsante tipo come in questo sito http://www.davidnolangallery.com/

    Un’altra esigenza è un plugin tipo questo del tutorial però che mi metta in autoplay un video possibilmente non in flash.

    grazie

  20. Grazie di nuovo per il tutoria, lo stó usando tantissimo.
    Quando hai tempo e voglia, mi fai sapere se esiste un modo di cambiare l’effetto fade che c’é tra un’immagine e l’altra?
    Mi piacerebbe far scorrere le immagini in orizzontale.
    É possibile?
    Grazie

  21. Ciao Fede, complimenti per il sito. Sto da poco approcciandomi a questo mondo e volevo porti una domanda.
    Nel passaggio 4, dove vanno inserite quelle righe di codice?

  22. Ciao Ale e benvenuto nel blog 😉

    Quel codice lo devi mettere nel foglio di stile CSS, se scarichi il sorgente forse capisci meglio di cosa parlo 😉

  23. Ciao fedeweb grazie per la risposta, ma volevo domandarti una cosa, mi sono accorto che forse andavano messi nel foglio css ma andandolo ad aprire ho visto che quel codice è già richiamato all’interno (qui di seguito incollo quello trovato all’interno del css):

    * { margin:0;padding:0;font-family:arial;font-size:13px; }
    html { overflow-x:hidden;overflow-y:scroll; }

    img.slidemaximage {
    display:none;
    position:fixed !important;/*le immagini non scrollano.non funziona in IE6*/
    }

    vedo che è lo stesso ma nonostante questo devo andarlo a copiare ed incollare quel codice del passaggio 4?

  24. No nel mio sorgente è già tutto presente. Se pero devi utilizzare questa tecnica in un tuo progetto, dovrai copiare quel codice nel tuo foglio di stile css 😉

  25. se volessi le immagini piu’ piccole cosa devo cambiare?

  26. Ciao Marcello e benvenuto nel blog 😉

    Cosa intendi esattamente per più piccole? cosa vorresti fare?

  27. vorrei metterle dentro a un div centrale tipo cosi
    http://www.designgang.net/works/dogdesign/prodotti.php

  28. poi ho un altro problemaaaaa mi mette il div sotto le immagini………..

  29. Forse allora questo non è il tutorial adatto.

    Potresti provare ad esempio a fare un div “contenitore” dove realizzi uno semplice slideshow di foto (trovi diversi tutorial nel mio blog su come realizzarli) a cui dai position:absolute nel CSS. Poi all’interno del div “contenitore” inserisci gli elementi di cui avrai bisogno, associando ad essi la proprietà position:relative, sempre nel foglio di stile.

  30. Ciao Fede, complimenti per il tuo sito. Ho trovato interessante il quesito posto da alf a cui però non hai risposto. Vorrei ottenere anch’io una cosa tipo quella indicata nel suo esempio.
    Un’altra domanda: è possibile intervenire sulla velocità di dissolvenza delle immagini per renderla un po’ più “morbida” o meno brusca che dir si voglia?
    Grazie.

  31. Scusa, ho scritto male il mio indirizzo mail. Adesso è giusto 😛

  32. Ciao Gian Maria e benvenuto nel blog 😉

    Per quanto riguarda quell’effetto vediamo se più avanti riuscirò a scriverci un tutorial..in questo momento purtroppo per motivi di lavoro non riesco a seguirlo tanto.

    Per la velocità dell’effetto, puoi agire sul tempo di permanenza di una foto, ma non sulla velocità dell’effetto.

    • Ho trovato che per modificare la velocità della transizione si può, nel file jquery.maximage.js inserire alle righe 254 e 255 un valore in millisecondi invece di ‘slow’. Ad esempio io ho messo 2000 millisecondi e l’effetto è molto bello.
      Ciao ciao

  33. Complimenti per lo script è molto bello e funzionale.
    Volevo chiderti se era possibile creare delle categorie di foto di sfondo che potevo selezionare da un’elenco menu.
    Per esempio la categoria montagna, campagna, nare, città. ecc…..

  34. Ciao Fede,
    complimenti per lo script : è proprio quello che cercavo.
    Volevo chiederti : ma se volessi che le immagini scrollassero insieme alla pagina e non rimanessero fisse come dovrei fare .
    Grazie

  35. Ottimo tutorial, ma avrei una domanda da porti: All’interno della mia pagina, a un certo punto avrei bisogno di interromperlo evitando che lo script continui a girare “sotto”, sai per caso come fare?
    E poi altra question: Se volessi passare dall’effetto slideshow all’effetto background? grazie in anticipo
    luca

  36. Grazie! Non riuscivo a trovarlo da nessuna parte ed era proprio quello che cercavo! Grazie mille davvero!

  37. […] Tutorial Jquery – Slideshow Di Foto Come Sfondo Del Sito […]

  38. Ciao, complimenti per il blog e grazie per questo prezioso tutorial, finalmente per merito tuo ho trovato la soluzione per il problema delle immagini di background che mi assillava da settimane!

    Avrei però una domanda; in realtà il quesito ti è già stato posto dall’utente Gian Maria, e la tua risposta era stata negativa, ma a differenza di un anno fa magari ora hai scritto qualche altro tutorial adatto al mio caso o comunque è cambiato qualcosa, per cui ti vorrei chiedere:
    E’ possibile intervenire in qualche parametro dei file .js o anche nel .css per modificare la velocità di dissolvenza allungandola per renderla meno brusca di com’è attualmente?

    E’ un problema che vorrei risolvere, e mi faresti veramente un gran favore 🙂

    Grazie.

  39. Ciao
    ottima la tua guida,

    ti vorrei chiedere se in questo plugin si potrebbe mettere un controllo delle immagini di sfondo con dei tasti(per cambiare l’immagine)

    grazie

  40. Ciao Federico,
    ho un problema con questo script, riscontrato solo su Chrome (solo versione Windows) e Safari (Mac) entrambe ultime release..
    Se apro i files in locale è tutto perfetto, quando li carico su server, lo sfondo si sposta in basso a dx nella pagina!
    Appena ridimensiono la finestra va tutto a posto..
    Qualcuno ha avuto lo stesso problema? idee per provare a risolverlo…….?
    Grazie!

    • Ciao Mauro e benvenuto nel blog 😉

      Hai lo stesso problema anche con la demo on line?

      • Ciao e grazie per la risposta!
        Si, appena aperta la demo con Chrome Win (Versione 23.0.1271.97 m) e lo sfondo è in basso a dx..
        Se ti può essere utile, ho notato che impostando la variabile:
        slideShow: false,
        nello script (in una pagina non ho bisogno dello slide delle immagini avendone solo una), lo sfondo è centrato, si ridimensiona…insomma funziona tutto perfettamente!

      • Grazie per la segnalazione verificherò 😉

  41. Ciao Fede,
    Prima di tutto grazie per i tuoi preziosi consigli.
    Ho usato questo tutorial per modernizzare il mio sito http://www.hotelolimpic.com, ma una volta caricato online, ho riscontrato lo stesso problema di mauro. Non funziona solo con Crome.
    Ciao grazie

  42. Ottimo tutorial!!!
    Una informazione: se volessi avere la slideshow di sfondo esclusivamente sulla home page?

    Ancora Complimenti!

    • Ciao,

      puoi assegnare una classe o un id specifico al tag body dell’home page e poi con jQuery utilizzare un selettore del tipo $(‘.classe-body img.slidemaximage’).

  43. ciao, grazie per aver postato questo tutorial mi è stato utilissimo, e soprattutto molto chiaro, complimenti… volevo chiederti però come posso inserire le frecettine e la pausa per poter far scorrere e bloccare le immagini a piacimento… grazie mille

  44. anche i pallini di scorrimento andrebbero bene

  45. I like just being able to build a sales force with a llot of money
    working online by themselves. It can be tempting to have a personal
    computer andd a photo-editing program. Whhen considering setfing up a business related
    credit card and use that for your expenses instead of
    your personal cards. If you have considered a Work from Sba Commercial Loans to become
    financially independant, thuen do so, or if they have the opportunity to
    purchase supplies wholesale. A fine wall mirrror is
    a lovely decorating accessory in any business, right?

  46. Ho utilizzato il tuo tutorial e devo dire che ha funzionato perfettamente, anche per me che sono una neofita, veramente ottimo.
    Volevo chiederti, cortesemente, se mi puoi indicare come fare la stessa cosa, soprattutto così semplicemente, utilizzando però immagini non grandi come lo schermo (950w – 461h.) vorrei usarle sempre come sfondo, ma non devono prendere tutta la grandezza della finestra del browser. Grazie.

Scrivi un commento

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