whatsapp
keyboard_arrow_down Contatti

Sabato

19

Marzo 2022

immagine prima e dopo HTML

Immagine prima e dopo HTML

  1. blog Immagine prima e dopo HTML
event_available
schedule

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

Ti è piaciuto questo articolo?

favorite thumb_down
Autore articolo

Fabio

Sono un terribile realista. Pratico e determinato ma anche un grande sognatore, ecco perché do continuamente vita a nuovi progetti online e non. Nel 2019 ho fondato Eureka Web proprio per rendere possibile tutto questo. Insieme possiamo realizzare la tua idea!


Visita il sito
library_books

Leggi anche

Come inviare dati dei form con Ajax serialize() a php
Scopri
Come usare le chiavi API Google
Scopri
Come unire file Javascript e CSS in WordPress
Scopri

Contattami

perm_identity
alternate_email
phonelink_ring
message

Il tuo messaggio è stato inviato con successo!
Ti risponderemo a breve

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

message
perm_identity
alternate_email

keyboard_arrow_up