templates/front/gallery/index.html.twig line 1

Open in your IDE?
  1. {% set numberElement = images_collection|length %}
  2. <div class="package-img-group mb-50">
  3.     <div class="row align-items-center g-3">
  4.         <div class="col-lg-6">
  5.             <div class="gallery-img-wrap thumb">
  6.                 <img src="{{ main_picture_path }}" alt="{{ main_picture_name }}" class="thumbnail"> <a href="#" class=" handleEye"><i
  7.                             class="bi bi-eye handleEye"></i></a>
  8.             </div>
  9.         </div>
  10.         <div class="col-lg-6 h-100">
  11.             <div class="row g-3 h-100">
  12.                 {% set compt = 1 %}
  13.                 {% for image in images_collection %}
  14.                     {% if compt <= 3 %}
  15.                         <div class="col-3 col-lg-6">
  16.                             <div class="gallery-img-wrap  handleEye">
  17.                                 <img src="{{ image.url }}" alt="{{ image.alt }}" class="thumbnail">
  18.                                 <a href="#" class=" handleEye"><i class="bi bi-eye handleEye"></i></a>
  19.                             </div>
  20.                         </div>
  21.                     {% elseif(compt == 4) %}
  22.                         <div class="col-3 col-lg-6">
  23.                             <div class="gallery-img-wrap handleEye active">
  24.                                 <img src="{{ main_picture_path }}" alt="">
  25.                                 <button class="StartSlideShowFirstImage "><i
  26.                                             class="bi bi-plus-lg handleEye"></i> {{ numberElement - 3 }} {{ 'Pages.Common.Messages.OtherImages'|trans({}, 'messages_front') }}
  27.                                 </button>
  28.                             </div>
  29.                         </div>
  30.                     {% endif %}
  31.                     {% set compt = compt + 1 %}
  32.                 {% endfor %}
  34.             </div>
  35.         </div>
  36.     </div>
  37. </div>
  39. <div id="modal-gallery" class="modal-gallery">
  40.     <span class="close">&times;</span>
  41.     <img class="modal-content" id="modal-image">
  42.     <div id="caption"></div>
  43.     <!-- Navigation buttons grouped at the top right -->
  44.     <div class="nav-buttons">
  45.         <span class="prev">&#10094; Prev</span>
  46.         <span class="next">Next &#10095;</span>
  47.     </div>
  48. </div>
  50. <style>
  51.     /* Modal styling */
  52.     .modal-gallery {
  53.         display: none; /* Hidden by default */
  54.         position: absolute;
  55.         border-radius: 10px;
  56.         z-index: 1;
  57.         left: 0;
  58.         top: 0;
  59.         width: 100%;
  60.         height: 100%;
  61.         overflow: hidden;
  62.         background-color: rgba(0, 0, 0, 0.9); /* Black background with opacity */
  63.     }
  65.     .modal-content {
  66.         margin: auto;
  67.         display: block;
  68.         width: auto;
  69.         height: auto;
  70.         max-width: 100%;
  71.         max-height: 100%;
  72.     }
  74.     .close {
  75.         position: absolute;
  76.         top: 20px;
  77.         right: 35px;
  78.         color: #ffffff;
  79.         font-size: 30px;
  80.         font-weight: bold;
  81.         transition: 0.3s;
  82.         z-index: 1;
  83.         padding: 0px 9px;
  84.         background-color: rgba(0, 0, 0, 0.5);
  85.         border-radius: 5px;
  86.     }
  88.     .close:hover,
  89.     .close:focus {
  90.         color: #bbb;
  91.         text-decoration: none;
  92.         cursor: pointer;
  93.     }
  95.     /* Navigation buttons styling for bottom-right corner */
  96.     .nav-buttons {
  97.         position: absolute;
  98.         bottom: 20px;
  99.         right: 20px;
  100.         display: flex;
  101.         gap: 10px;
  102.     }
  104.     .prev, .next {
  105.         cursor: pointer;
  106.         color: white;
  107.         font-size: 18px;
  108.         padding: 8px 16px;
  109.         background-color: rgba(0, 0, 0, 0.5);
  110.         border-radius: 5px;
  111.         user-select: none;
  112.         transition: background-color 0.3s, color 0.3s;
  113.     }
  115.     .prev:hover, .next:hover {
  116.         background-color: rgba(0, 0, 0, 0.8);
  117.         color: #bbb;
  118.     }
  119. </style>
  122. <script>
  124.     // Select all thumbnail images
  126.     const modal = document.getElementById('modal-gallery');
  127.     const modalImg = document.getElementById('modal-image');
  128.     const captionText = document.getElementById('caption');
  129.     const closeBtn = document.querySelector('.close');
  130.     const prevBtn = document.querySelector('.prev');
  131.     const nextBtn = document.querySelector('.next');
  132.     //const galleryImages = document.querySelectorAll('.thumbnail');
  133.     const galleryImages = [
  134.         {% for image in images_collection %}
  135.         {
  136.             src: "{{ image.url }}",
  137.             alt: "{{ image.alt }}"
  138.         }{% if not loop.last %},{% endif %}
  139.         {% endfor %}
  140.     ];
  141.     const handleEyes = document.querySelectorAll('.handleEye');
  142.     let currentIndex = 0;
  144.     // Function to open modal and display the clicked image
  145.     function openModal(event) {
  148.         const icon = event.target; // The clicked eye icon
  149.         const parentDiv = icon.closest('.gallery-img-wrap'); // Find the closest div containing the image
  150.         const image = parentDiv.querySelector('img'); // Get the image inside the same gallery-img-wrap div
  152.         if (image) {
  153.             modal.style.display = 'block'; // Show the modal
  154.             modalImg.src = image.src; // Set the modal image to the clicked image's src
  155.             captionText.innerHTML = image.alt; // Set the caption to the alt text of the image
  156.             currentIndex = Array.from(galleryImages).indexOf(image); // Set the current index of the clicked image
  157.         }
  159.     }
  161.     // Function to close the modal
  162.     function closeModal() {
  163.         modal.style.display = 'none';
  164.     }
  166.     /*
  167.       modal.style.display = 'block';
  168.         modalImg.src = event.target.src;
  169.      */
  170.     // Function to show the next image
  171.     function showNextImage() {
  172.         currentIndex = (currentIndex + 1) % galleryImages.length;
  174.         modalImg.src = galleryImages[currentIndex].src;
  175.         captionText.innerHTML = galleryImages[currentIndex].alt;
  176.     }
  178.     // Function to show the previous image
  179.     function showPrevImage() {
  180.         currentIndex = (currentIndex - 1 + galleryImages.length) % galleryImages.length;
  181.         modalImg.src = galleryImages[currentIndex].src;
  182.         captionText.innerHTML = galleryImages[currentIndex].alt;
  183.     }
  186.     handleEyes.forEach(eye => {
  187.         eye.addEventListener('click', openModal);
  188.     });
  190.     // Attach click event to each gallery image
  194.     // Attach click event to close button
  195.     closeBtn.addEventListener('click', closeModal);
  197.     // Attach click events to navigation buttons
  198.     nextBtn.addEventListener('click', showNextImage);
  199.     prevBtn.addEventListener('click', showPrevImage);
  201.     // Close the modal when clicking outside the image
  202.     window.addEventListener('click', (event) => {
  203.         if (event.target === modal) {
  204.             closeModal();
  205.         }
  206.     });
  209. </script>