Nous allons voir dans ce tutoriel comment créer un système de zoom d’image de type lightbox en modal ! Le principe sera de cliquer sur une petite vignette afin de voir l’image en grand.
Comment mettre cela en place ?
On part du principe que vous avez déjà un thème avec un système de zoom sur vos images produits. Du coup on va partir sur une création complète du système pour par exemple le mettre dans une page ou dans une description d’un produit pour un guide des tailles ou autre…
Le Javascript – Fonctionnement du système
Rendez-vous dans boutique en ligne – actions – modifier le code – trouvez le dossier Assets et ouvrez votre fichier .js généralement theme.js, base.js, global.js et copiez/collez le code suivant:
if ((typeof window.DG) == 'undefined') {
window.DG = {};
}
DG.ZoomImg = (id) => {
let zoomWrapper = document.querySelector('.dgImgZoomImg-wrapper');
let zoomWrapperImgs = zoomWrapper.querySelectorAll('.dgImgZoomImg');
if(zoomWrapperImgs.length > 1) zoomWrapper.classList.add('multiple-imgs');
let modal = document.getElementById('dgImgZoomModal');
const modal2 = modal.parentNode.removeChild(modal);
document.body.insertAdjacentHTML('beforeend', modal2.outerHTML);
setTimeout(function(){
let modal = document.getElementById('dgImgZoomModal');
const img = document.getElementById(id);
const modalImg = document.getElementById('dgImgZoomImg-zoom');
img.onclick = function() {
modal.style.display = "flex";
modalImg.src = this.src;
}
const close = document.getElementsByClassName("dg-iz-close")[0];
close.onclick = () => {
modal.style.display = "none";
}
}, 1000);
}
Le CSS – Style
Dans le même dossier et ouvrez cette fois votre fichier .css généralement theme.css, base.css, global.css et copiez/collez le code suivant:
.dgImgZoomImg-wrapper {
position:relative;
}
.dgImgZoomImg {
cursor: pointer;
transition: 0.3s;
width: 300px;
max-width: 100%;
}
.dgImgZoomImg-wrapper.multiple-imgs .dgImgZoomImg {
margin-right:7px;
margin-bottom:7px;
}
.dgImgZoomImg:hover {opacity: 0.7;}
.dg-iz-modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
flex-direction:column;
justify-content:center;
align-items:center;
height: 100%;
bottom:0;
overflow:visible;
background-color: rgba(0,0,0,0.9);
}
.dg-iz-modal-content {
margin: auto;
width: 80%;
max-width: 700px;
animation-name: dg-iz-zoom;
animation-duration: 0.3s;
}
@keyframes dg-iz-zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
.dg-iz-close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.dg-iz-close:hover,
.dg-iz-close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
@media only screen and (max-width: 700px){
.dg-iz-modal-content {
width: 100%;
}
}
Le HTML – Placement
Le code suivant est à copier/coller dans la description d’un de vos contenus, fiches produits, collections, pages etc…
<div class="dgImgZoomImg-wrapper">
<img id="dgImgZoomImg-1" class="dgImgZoomImg" src="url-image" alt="">
<div id="dgImgZoomModal" class="dg-iz-modal">
<img class="dg-iz-modal-content" id="dgImgZoomImg-zoom">
<span class="dg-iz-close">×</span>
</div>
</div>
<script defer="">
window.addEventListener("DOMContentLoaded", (event) => {
DG.ZoomImg("dgImgZoomImg-1");
DG.ZoomImg("dgImgZoomImg-2");
});
</script>
Fonctionnement
Rendez-vous dans paramètres – fichiers et ajoutez une image ou prenez en une existante et copiez l’url pour la coller à la place de « url-image »
Si vous avez plusieurs images alors vous devez dupliquer la ligne suivante et la copier juste en dessous de ca:
Changer l’url et l’id comme ceci « dgImgZoomImg-2 » si vous en avez d’autre « dgImgZoomImg-3 », « dgImgZoomImg-4 » etc
Il vous faudra également dupliquer le ligne suivante et l’adapter de la même manière:
Remplacer par « dgImgZoomImg-2 » etc…
Ce Tuto existe également en vidéo
VIDEO
Bon tuto à tous !
Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 1 votes]
