http://blog.DoZarte.com

Se volete mostrare una tipica foto “prima e dopo la cura” in una pagina web, ora c’è più di una opzione per farlo.
Prima d’ora l’unica possibilità, parlando di soluzioni pratiche e veloci da mettere in pratica, era pubblicare le due foto affiancate; ora c’è un plugin per jQuery che consente di sovrapporre le due foto e implementa un sistema per passare da una all’altra in maniera controllata.

Il plugin per jQuery Before/After inserisce infatti un cursore (slider) – totalmente manovrabile tramite il mouse – che scorre a destra e a sinistra, rivelando l’una o l’altra fotografia; inoltre è possibile inserire due pulsanti per visualizzare completamente una delle due immagini.

Il plugin pesa solamente 7 KB è può essere usato più di una volta sulla stessa pagina; se il navigatore non ha javascript attivato allora vedrà entrambe le fotografie. Per usarlo bisogna richiamare jQuery e jQuery UI, oltre al plugin:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.beforeafter.js"></script>
<script type="text/javascript">
$(function(){
 $('#container').beforeAfter();
});
</script>

Le immagini, che devono ovviamente avere entrambe le stesse dimensioni, devono essere sistemate ognuna dentro un DIV, i quali a loro volta vanno messi dentro un altro DIV contenitore; inoltre è obbligatorio inserire altezza e larghezza, altrimenti il plugin non funziona su browser basati su Webkit (come Safari e Chrome).

<div id="container">
 <div><img alt="before" src="before.jpg" width="600" height="366" /></div>
 <div><img alt="after" src="after.jpg" width="600" height="366" /></div>
</div>

DEMO e link: Before/After jQuery Plugin