A volte ci può essere l’esigenza di mostrare l’evoluzione di un ritocco fotografico, di una donna con e senza trucco, e più in generale di far vedere l’inizio e la fine del lavoro, un po’ come in questo esempio preso dal New York Times, realizzato però in flash.

Grazie al plugin Before/After, implementato da Catch My Frame, vedremo quanto è semplice ottenere un effetto come quello che hai visto nell’esempio, utilizzando la libreria Jquery.

Bell’effetto vero? Vediamo quali sono i passi per ottenerlo. Alla fine dell’articolo troverai i sorgenti dell’esempio che hai appena visto.

Passo Preliminare.

Scarica i file necessari dalla pagina dell’autore del plugin

Passo 1

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

Lo script agirà su un div #container, che vediamo come deve essere scritto nel passo successivo.

Passo 2

Tra i tag body, dovrai inserire le righe di codice necessare per creare un div #container, con all’interno altri 2 div contenenti le 2 immagini che si vogliono visualizzare.

Passo 3 (opzionale)

Si può personalizzare lo script, modificando le righe di codice al passo 1, attraverso questi quattro parametri:

• animateIntro – crea un’animazione che porta la barra da destra verso il centro della foto (default  false)
• introDelay – se animateIntro è impostato su true, permette di impostare quanti millisecondi bisogna aspettare prima che la barra vada al centro della foto (default  1000)
• introDuration – se animateIntro è impostato su true, permette di impostare quanti millisecondi devono passare nel spostamento della barra da destro verso il centro (default 1000)
• showFullLinks – permette di visualizzare i link per visualizzare l’immagine prima o dopo la modifica (default true)

Ecco un esempio di codice con tutti i parametri attivi.

$('#container').beforeAfter({
	animateIntro : true,
        introDelay : 2000,
        introDuration : 500,
        showFullLinks : false
});

Finito. Semplice vero?

Guarda altri esempi

Scarica l’esempio

L'articolo ti è stato utile? se vuoi ringraziarmi offrimi un caffè, o una pizza se vuoi esagerare!

E non dimenticarti di restare aggiornato abbonandoti gratis ai feed RSS.Se non sai cosa sono, guarda questo video. Ora non sai come abbonarti? Guarda questo video

Inoltre potrai seguirmi su twitter, facebook o friendfeed!

Articoli simili che potrebbero interessarti

Tutorial Jquery – Uno Bellissimo Slideshow Di Foto Originale

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

Tutorial Jquery – Bellissime Gallery Di Foto in 5 Minuti

Per la serie di tutorial e risorse su javascript, oggi ti segnalo jPhotoGrid, un fantastico plugin jquery che ti permetterà di realizzare gallerie...

Javascript Vs Flash: The Winner Is..

Javascript! Ormai slideshow, menu e testi animati, e molto altro ancora si possono tranquillamente realizzare con javascript, con il vantaggio di...