email

Immagine prima e dopo HTML

Ti trovi in:
  1. blog Immagine prima e dopo HTML

Pubblicato il , aggiornato il 20 Luglio 2021

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

carosello immagini in codice html

Dopo

immagine prima e dopo HTML
settings_ethernet
code

immagine prima e dopo HTML

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>

Codice CSS

code

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;
}
code

Codice Javascript

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);
      }
    });
  });
});

immagine prima e dopo HTML Shortcode per WordPress

code

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');

Contattaci!

Preventivo sempre gratuito

Fabio Fresia, fondatore e titolare di Eureka Web di Asti

perm_device_information366 - 400 9542       emailinfo@agenziawebeureka.it

perm_identity
alternate_email
phonelink_ring
message