Elektroden-Managementcenter

<?php
// Fetch images from 'produktfotky' custom field
$image_objects = get_field('product_gallery');
?>

<!-- Splide CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide/dist/css/splide.min.css">

<!-- Main Slider -->
<div id="main-slider" class="splide" style="margin-bottom: 0px;">
    <div class="splide__track">
        <ul class="splide__list">
            <?php foreach ($image_objects as $image): ?>
                <li class="splide__slide"><img class="lightbox-image" style="border-radius: 1rem; min-height: 300px; object-fit: contain;" src="<?php echo esc_url($image['url']); ?>" alt="Image"></li>
            <?php endforeach; ?>
        </ul>
    </div>
</div>

<!-- Thumbnail Slider -->
<div id="thumbnail-slider" class="splide">
    <div class="splide__track">
        <ul class="splide__list">
            <?php foreach ($image_objects as $image): ?>
                <li class="splide__slide"><img class="lightbox-image" style="border-radius: 1rem;" src="<?php echo esc_url($image['url']); ?>" alt="Image"></li>
            <?php endforeach; ?>
        </ul>
    </div>
</div>

<!-- Lightbox -->
<div id="lightbox" class="lightbox" onclick="hideLightbox(event)">
    <div id="lightbox-slider" class="splide">
        <div class="splide__track">
            <ul class="splide__list">
                <?php foreach ($image_objects as $image): ?>
                    <li class="splide__slide"><img src="<?php echo esc_url($image['url']); ?>" alt="Image"></li>
                <?php endforeach; ?>
            </ul>
        </div>
    </div>
</div>


<!-- Splide JS -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide/dist/js/splide.min.js"></script>

<!-- Initialize Splide -->
<script>
  var lightboxSplide;
  var thumbnailSplide;
  
document.addEventListener( 'DOMContentLoaded', function () {
    var mainSplide = new Splide( '#main-slider', {
        type   : 'loop',
        perPage: 1,
        gap    : '40px',
        pagination: false,
    } ).mount();

    thumbnailSplide = new Splide( '#thumbnail-slider', {
        type    : 'loop',
        perPage : 4,
        breakpoints: {
		    600: {
			        perPage: 3,
          },
        500: {
			        perPage: 2,
          },
        400: {
			        perPage: 2,
          }
		    },
        gap     : '20px',
        focus   : 'center',
        pagination: false,
        arrows: false,
    } ).mount();

    // Sync the sliders
    mainSplide.sync( thumbnailSplide );


    // Add lightbox functionality
    const images = document.querySelectorAll('#main-slider > div > ul > li > img');
    const lightbox = document.getElementById('lightbox');

    images.forEach((img, index) => {
    img.addEventListener('click', function() {  // log the index

      
      lightbox.style.display = "flex";
      lightboxSplide = new Splide( '#lightbox-slider', {
        type   : 'loop',
        pagination: false,
        perPage: 1,
        gap    : '40px',
        start: index - 2
    }).mount();
      
    });
});
} );
  

  function hideLightbox(event) {
    const lightboxSlider = document.getElementById('lightbox-slider');

    if (!lightboxSlider.contains(event.target)) {
        document.getElementById('lightbox').style.display = 'none';
      lightboxSlider.destroy();
    }
  
}

</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
	setTimeout(() => {
    var splide = thumbnailSplide
    
    // initial load
              var slides = splide.Components.Elements.slides;
    slides[0].classList.add("slide-visible")
    
  splide.on('move', function (newIndex) {
    console.log("started moving")



      slides.forEach(function (slide) {
       slide.classList.remove("slide-visible")
      });
    
    slides[newIndex].classList.add("slide-visible")


    
  });
});
}, 1000);
</script>

<!-- Lightbox CSS -->
<style>
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    z-index: 1000;
}
</style>