Come creare uno slider per confrontare fotografie

Oggi vediamo come realizzare un semplice slider HTML per poter paragonare due fotografie nella stessa finestra . Andrà bene per un sito dedicato alla fotografia , dove per esempio vogliamo mostrare una foto prima di ritocco e dopo, oppure per un sito dedicato alle donne foto prima di mak-up e dopo, o in altri situazioni e credetemi che ce ne sono parecchie. Lo  slider sarà realizzato con aiuto di CSS3 e  jQuery.

Prova di trascinare il bottone con le frecce...

Original Image Prima
Modified Image Dopo

Markup HTML dello slider

Entrambe le immagini da confrontare sono collocati in un elemento figure:

<figure class="cd-image-container">
    <img src="/img/img-original.jpg" alt="Original Image">
    <span class="cd-image-label" data-type="original">Original</span>
    <div class="cd-resize-img"> <!-- the resizable image on top -->
        <img src="/img/img-modified.jpg" alt="Modified Image">
        <span class="cd-image-label" data-type="modified">Modified</span>
    </div>
    <span class="cd-handle"></span> <!-- slider handle -->
</figure> <!-- cd-image-container -->

 

Stili CSS dello slider

Le dimensioni dell'immagine originale sono utilizzati per impostare la larghezza e l'altezza della classe .cd-image-container;  la seconda immagine viene inserita nel div.cd-resize-image.  Questo <div>  avra  position: absolute  rispetto a div con la classe .cd-image-container  e la sua larghezza sara cambiata a secondo della posizione del cursore che ha la  classe .cd-handle .

Inizialmente, la larghezza dell'elemento con la classe .cd-resize-image  è uguale a 0, poi cambia al 50%. Usiamo la classe cd-bounce-in  per creare un effetto di animazione.

Così, l'animazione inizierà solo quando .cd-image-container sarra nella zona visbile dal utente .

.cd-resize-img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  overflow: hidden;
 
  transform: translateZ(0);
  backface-visibility: hidden;
}
.is-visible .cd-resize-img {
  width: 50%;
  animation: cd-bounce-in 0.7s;/* bounce in animation of the modified image */
}
@keyframes cd-bounce-in {
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}

Gestione  eventi

Per implementare la funzionalità programmata, dobbiamo definire la funzione drags() , che sposta l'elemento .cd-handle  cio è il nostro cursore .
Spostando il cursore .cd-handle, aggiorniamo il valore della proprieta left  e impostiamo le dimensioni di div.cd-image-size .
Quando l'elemento .cd-image-container  rientra nel zona visibile  da utente, si  aggiunge la classe .is-visibile per il lancio della animazione iniziale.
Vediamo codice del nostro java script

jQuery(document).ready(function($){
    $('.cd-image-container').each(function(){
        var actual = $(this);
        drags(actual.find('.cd-handle'), actual.find('.cd-resize-img'), actual);
    });
 });
// realizziamo trascinamento come descritto qui http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/
function drags(dragElement, resizeElement, container) {
    dragElement.on("mousedown vmousedown", function(e) {
        dragElement.addClass('draggable');
        resizeElement.addClass('resizable');
        var dragWidth = dragElement.outerWidth(),
            xPosition = dragElement.offset().left + dragWidth - e.pageX,
            containerOffset = container.offset().left,
            containerWidth = container.outerWidth(),
            minLeft = containerOffset + 10,
            maxLeft = containerOffset + containerWidth - dragWidth - 10;
        dragElement.parents().on("mousemove vmousemove", function(e) {
            leftValue = e.pageX + xPosition - dragWidth;
            if(leftValue < minLeft ) {
                leftValue = minLeft;
            } else if ( leftValue > maxLeft) {
                leftValue = maxLeft;
            }
            widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%';
            $('.draggable').css('left', widthValue).on("mouseup vmouseup", function() {
                $(this).removeClass('draggable');
                resizeElement.removeClass('resizable');
            });
            $('.resizable').css('width', widthValue);
            // ...
        }).on("mouseup vmouseup", function(e){
            dragElement.removeClass('draggable');
            resizeElement.removeClass('resizable');
        });
        e.preventDefault();
    }).on("mouseup vmouseup", function(e) {
        dragElement.removeClass('draggable');
        resizeElement.removeClass('resizable');
    });
}

Ed è tutto ! Prova sul tuo sito.

P.s. e per provare sul tuo sito scarica archivio sotto dove a parte il codice indicato sopra troverai anche altri fail di supporto. Perché nel articolo è stata descritta e spiegata brevemente la idea e il funzionamento ma non ho riportato tutti i fail. Ho aggiunto anche un fail  index.html dove lo slider  viene mostrato separatamente. E invece forse ti chiederai come ho realizzato questo slaider qui su questa pagina. Ho messo le cartelle dal archivio che scarichi in un altra cartella sul sito ed ho creato dei collegamenti a fail in queste cartelle al fail di stile style.css  il fail normalizza.css serve soltanto per la pagina di esempio index.html, a java script che troverai nella cartella js e ad immagini di esempio quelli che vedi sullo slaider, ho creato anche la struttura html quella che hai letto sopra. La stessa cosa puoi fare anche tu sul tuo sito. Perché so che ad uno che sta facendo i primi passi nel mondo di creatori siti web un articolo del genere senza questo P.s. avrebbe fatto piu domande che risposte e quindi ho deciso di approfondire un può... 

 

Letto 1010 volte