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.
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
Mirko D'Isidoro on 
Rosario on 
Tamal on 
federica on 
fedeweb on 
12 aprile 2010 at 13:07
Grande Fede sei sempre un passo avanti!
12 aprile 2010 at 15:58
Grazie Luca! se hai qualche dubbio chiedimi pure!
ciao!
20 aprile 2010 at 11:24
Davvero un ottimo tutorial,
conoscevo già il plugin, ma non avevo ancora visto nessuna guida in italiano… complimenti!
20 aprile 2010 at 14:04
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!
3 maggio 2010 at 10:52
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.
4 maggio 2010 at 10:31
Ciao Mr. K e benvenuto nel blog
Chiedimi pure cosa non riesci a fare, o cosa hai modificato, così posso darti una mano.
Ciao!
12 maggio 2010 at 09:06
Ciao Fede….
Volevo chiederti…. e se volessi impostare la strasparenza sullo sfondo del testo che vado a scrivere del mio sito?
12 maggio 2010 at 15:09
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.
12 settembre 2010 at 17:42
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
13 settembre 2010 at 10:00
Ciao Nuala e benvenuta nel blog
Ti ringrazio per i complimenti. Mi puoi dire più in dettaglio che problemi ci sono?
27 settembre 2010 at 15:37
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!
27 settembre 2010 at 22:28
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!
28 settembre 2010 at 13:12
ok funziona, ti ringrazio!
29 settembre 2010 at 18:09
Ottimo! buono a sapersi!
30 novembre 2010 at 22:40
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!!!
2 dicembre 2010 at 15:39
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.
12 febbraio 2011 at 13:15
Grazie per la guida, mi èservita molto.
Avrei però una richiesta,
è possibile applicare un random alle immagini di sfondo?
grazie
16 febbraio 2011 at 19:05
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
25 febbraio 2011 at 23:22
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
13 marzo 2011 at 19:37
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?
14 marzo 2011 at 14:35
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
14 marzo 2011 at 15:12
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?
20 marzo 2011 at 22:44
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
4 aprile 2011 at 15:50
se volessi le immagini piu’ piccole cosa devo cambiare?
4 aprile 2011 at 15:52
Ciao Marcello e benvenuto nel blog
Cosa intendi esattamente per più piccole? cosa vorresti fare?
4 aprile 2011 at 16:00
vorrei metterle dentro a un div centrale tipo cosi
http://www.designgang.net/works/dogdesign/prodotti.php
4 aprile 2011 at 18:06
poi ho un altro problemaaaaa mi mette il div sotto le immagini………..
6 aprile 2011 at 15:51
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.
4 luglio 2011 at 20:50
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.
4 luglio 2011 at 20:51
Scusa, ho scritto male il mio indirizzo mail. Adesso è giusto
4 luglio 2011 at 23:17
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.
20 luglio 2011 at 10:08
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…..
19 ottobre 2011 at 12:10
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
5 dicembre 2011 at 12:05
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
9 gennaio 2012 at 18:22
Grazie! Non riuscivo a trovarlo da nessuna parte ed era proprio quello che cercavo! Grazie mille davvero!