Edit History

Voici le code.

Mon fichier : custom.js

document.addEventListener("DOMContentLoaded", function() {
  var helpIcon = document.getElementById("helpIcon");
  var modal = document.getElementById("imageModal");
  var modalImgs = document.querySelectorAll("#modalImg"); // Sélectionnez toutes les images du modal
  var modalText = document.getElementById("modalText");
  var imageUrls = []; // Tableau pour stocker les URL des images

  modalImgs.forEach(function(modalImg, index) { // Itérer sur toutes les images
    modalImg.addEventListener("load", function() {
      var totalHeight = modalText.offsetHeight; // Commencez avec la hauteur du texte

      modalImgs.forEach(function(img) { // Ajoutez la hauteur de chaque image
        totalHeight += img.offsetHeight;
      });

      modal.style.bottom = "-" + totalHeight + "px"; // Ajustez la hauteur du modal
    });

    // Ajouter l'URL de chaque image dans le tableau
    imageUrls[index] = modalImg.getAttribute("data-image-url");
  });

  helpIcon.addEventListener("click", function(event) {
    event.preventDefault();
    modal.style.display = "block";
    
    // Charger les images avec leurs URL respectives
    modalImgs.forEach(function(img, index) {
      img.src = imageUrls[index];
    });
  });

  helpIcon.addEventListener("touchstart", function(event) {
    event.preventDefault();
    modal.style.display = "block";
    
    // Charger les images avec leurs URL respectives
    modalImgs.forEach(function(img, index) {
      img.src = imageUrls[index];
    });
  });

  var span = document.getElementsByClassName("close")[0];
  span.addEventListener("click", function() {
    modal.style.display = "none";
  });
});

[Click and drag to move]



Mon fichier: product-customization.tpl

<section class="product-customization js-product-customization">
  {if !$configuration.is_catalog}
    <div class="card card-block">