Immagine prima e dopo HTML

After Before image in HTML

In questa guida vedremo il codice Html già pronto per creare un after before image, l’immagine prima e dopo HTML interattive per l’utente.

Se usi WordPress sei nel posto giusto! Troverai anche lo shortcode già pronto con le istruzioni per inserirlo nel tuo sito WordPress.

Iniziamo subito! Ecco il risultato finale:

Prima

Dopo

settings_ethernet

Ecco le tue immagini prima e dopo in codice html: la struttura è molto semplice e potrai personalizzarla a piacimento con il CSS

<div class="ekw_after_before_container">
  <div class="ekw_before">
    <p>Prima</p>
    <img src="www.la-tua-immagine-prima.it" alt="">
  </div>
  <div class="ekw_after">
    <p>Dopo</p>
    <img src="www.la-tua-immagine-dopo.it" alt="">
  </div>
  <div class="ekw_moove_after">
    <span class="material-icons">settings_ethernet</span>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
<!-- per il touch da dispositivo mobile -->
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
</script>

Ricordati di:

1 – Installare le librerie delle icone, io utilizzo Google Material Design

2 – Inserire la libreria “jquery-ui.min.js” altrimenti il tuo after before image non funzionerà!

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">

3 – Inserire la libreria “jqueryui-touch-punch” per consentire il trascinamento anche su dispositivo mobile

 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

Vediamo ora il codice CSS. Puoi modificare colori, font e qualsiasi altro stile ma ti consiglio di non modificare i tag overflow, position e display per non incorrere in errori.

.ekw_after_before_container {
  height: max-content;
  position: relative;
  width: max-content;
  max-width: -webkit-fill-available;
  overflow: hidden;
}
.ekw_after_before_container div {
  min-height: inherit;
  max-height: 100%;
  user-select: none;
}
.ekw_after_before_container p {
  position: absolute;
  background-color: #4a44f2;
  color: white;
  padding: 5px 15px;
  font-size: 16px;
  bottom: 10px;
  display: block;
  z-index: 10;
  opacity: 0;
  transition: all 0.8s;
  margin: 0px!important;
  width: max-content;
}
.ekw_after_before_container:hover p {
  opacity: 1;
}
.ekw_before { /* prima */
  display: block;
  z-index: 0;
  width: 100%;
  overflow: hidden;
  left: 0;
  position: relative;
  top: 0;
}
.ekw_before p {
  bottom: 10px;
  right: 15px;
}
.ekw_after { /* dopo */
  display: block;
  z-index: 1;
  width: 50%;
  height: inherit;
  overflow: hidden;
  left: 0;
  position: absolute;
  top: 0;
}
.ekw_after p {
  left: 15px;
}
.ekw_moove_after {
  display: block;
  z-index: 1;
  width: 6px;
  background-color: #4a44f2;
  left: 50%;
  margin-left: -3px;
  position: absolute;
  top: 0;
  height: 100%;
}
.ekw_moove_after span {
  content: 'settings_ethernet';
  font-family: 'Material Icons';
  font-size: 40px;
  color: #4a44f2;
  position: absolute;
  top: 45%;
  right: -27px;
  display: block;
  z-index: 5;
  padding: 5px;
  background-color: white;
  border-radius: 50%;
  border: 4px solid #4a44f2;
  cursor: pointer;
  user-select: none;
}
.ekw_before img {
  height: 100%;
  width: auto;
  position: relative;
  top: 0;
  left: 0;
  user-select: none;
  max-width: unset!important;
}
.ekw_after img {
  height: 100%;
  width: auto;
  top: 0;
  left: 0;
  user-select: none;
  max-width: unset!important;
}

Ricordati di:

1 – installare le librerie jQuery prima di caricare lo script

Perché non dai un’occhiata a questa guida su come installare correttamente jQuery in WordPress? Se il tuo sito web non riconosce l’alias $ di jQuery questa guida è la soluzione!

jQuery.noConflict();
jQuery(document).ready(function($) {
  jQuery(window).on("load", function() {
    $(".ekw_moove_after").draggable({
      axis: "x",
      containment: '.ekw_after_before_container',
      scroll: false,
      drag: function(event, ui) {
        var after = $(this).parent().find(".ekw_after");
        var left = $(this).css("left");
        after.css("width", left);
      }
    });
  });
});

Se vuoi usare il tuo carosello su WordPress copia ed incolla il seguente codice nelle pagine del tuo sito web!

Perché non dai uno sguardo a come creare correttamente uno shortcode per WordPress?

Ecco lo shortcode:

[after_before immagine_prima="5496" immagine_dopo="6018"]

Il numero indica l’ID dell’immagine caricata su WordPress, lo trovi nella schermata libreria media, cliccando sull’immagine che vuoi inserire e spostando il mouse su “modifica i dettagli aggiuntivi” in basso.

Ti apparirà in basso a sinistra il link per raggiungere la pagina di modifica e in quell’url è scritto l’ID dell’immagine, ad esempio: “/wp-admin/post.php?post=5948&action=edit”. 5948 è il numero da inserire nello shortcode.

Ecco la funzione per inserire il tuo after before image per WordPress:

<?php
function after_before_shortcode($attr) {
  ob_start();
  extract(shortcode_atts(array(
    'immagine_prima' => false,
    'immagine_dopo' => false,
  ), $attr ));
?>
 <div class="ekw_after_before_container">
   <div class="ekw_before">
     <p>Prima</p>
     <?php echo wp_get_attachment_image($attr['immagine_prima'], 'full'); ?>
   </div>
   <div class="ekw_after">
     <p>Dopo</p>
     <?php echo wp_get_attachment_image($attr['immagine_dopo'], 'full'); ?>
   </div>
   <div class="ekw_moove_after">
     <span class="material-icons">settings_ethernet</span>
   </div>
 </div>
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 <?php
  $content = ob_get_clean();
  return $content;
}
add_shortcode('after_before', 'after_before_shortcode');