Prima e dopo. Visualizzatore di immagini scorrevoli siamesi

Questo è il tipico giochino di due immagini sovrapposte che, tramite un controllo, facciamo apparire alternativamente, potendo regolarne la visibilità da 0 a 100, ma passando per tutti i punti intermedi della loro larghezza.
Esistono molti sistemi per ottenere questo effetto, ma poiché ci piace semplificarvi le cose e siamo anche interessati a rendere le cose adattabili a tutte le larghezze dello schermo, ho scelto un plugin jQuery di ZURB Studios chiamato TwentyTwenty – suppongo un gioco di parole legato all'espressione cinquanta-cinquanta – che soddisfaceva entrambi i requisiti.
Ho compresso e adattato un po' il codice JavaScript in modo che possiate ospitarlo nel vostro template ( senza scherzi questa volta ) e quindi non doverlo caricare da un hosting esterno.
Il CSS è più o meno lo stesso, quindi possiamo spiegarvi tutto in due parti, basta copiare e incollare. In ogni caso, JS è complicato da spiegare, quindi salterò questo passaggio.
Ecco la demo e poi continueremo. Test...

Per impostarlo, bastano due passaggi:
1. Modifica il modello e inserisci il contenuto di questo file , che contiene il CSS e il JavaScript principali, subito prima di </head> . Salva le modifiche.
2. Aggiungi questo codice al post (o a un gadget) in cui desideri visualizzare il prima/dopo:

<div id="beforeafter" class='twentytwenty-container'>
<img src=" BEFORE_IMAGE_URL " alt="Prima">
<img src=" AFTER_IMAGE_URL " alt="Dopo" />
</div>
<script>$(window).load(function() {
$("#beforeafter").twentytwenty();
});</script>

Ovviamente, IMAGE_URL_BEFORE deve essere sostituito con l'indirizzo di un'immagine e IMAGE_URL_AFTER con l'indirizzo dell'altra. È importante che entrambi abbiano esattamente le stesse dimensioni, altrimenti questo trucco non funzionerà.
Note

• Se hai già jQuery nel tuo modello per un altro scopo, puoi eliminare la prima riga copiata nel passaggio 1, che è quella che carica esattamente quella libreria.
• #beforeafter è il contenitore generale del visualizzatore e in quel selettore è possibile configurare la larghezza minima o massima, se necessario, nonché aggiungere un bordo o qualsiasi altra cosa consentita da CSS.
• Se vuoi vedere solo un prima/dopo per pagina (un visualizzatore per post), le ultime tre righe del passaggio 2 potrebbero essere inserite direttamente nel modello, dopo ciò che abbiamo copiato nel passaggio 1.
• Se intendi utilizzare più di un visualizzatore per pagina, dovrai replicare l'intero codice del passaggio 2 per ogni visualizzatore aggiuntivo che desideri aggiungere. In questo caso, l' ID del contenitore #beforeafter dovrà essere modificato per ogni visualizzatore, quindi, ad esempio, il secondo dovrebbe essere #beforeafter2 , il terzo #beforeafter3 , ecc.
  Allo stesso modo, e con lo stesso ID, dovrai modificare la sezione JavaScript sulla riga $("# beforeafter "). twentytwenty(); . Esempio per un secondo riquadro:

  <div id="beforeafter2" class='twentytwenty-container'>
  <img src=" BEFORE_IMAGE_URL " alt="Prima">
  <img src=" AFTER_IMAGE_URL " alt="Dopo" />
  </div>
  <script>$(window).load(function() {
  $("#beforeafter2").twentytwenty();
  });</script>

• In .twentytwenty-before-label:before{content:"Before"} puoi modificare la parola o l'etichetta che appare a sinistra..twentytwenty -after-label:before{content:"After"} è dove puoi cambiare la parola sul lato destro.

E questo è tutto, questo è tutto ciò di cui hai bisogno per avere un visore di questo tipo.

fonte