Your IP : 216.73.216.84

Current Path : /home/helpink/www/components/com_jbusinessdirectory/include/gallery/
Upload File :
Current File : /home/helpink/www/components/com_jbusinessdirectory/include/gallery/image_slick_gallery.php

<?php
/**
 * @package    J-BusinessDirectory
 * @author     CMSJunkie http://www.cmsjunkie.com/
 * @copyright  Copyright (C) 2007 - 2025 CMSJunkie. All rights reserved.
 * @license    https://www.gnu.org/licenses/agpl-3.0.en.html
 */ 
defined('_JEXEC') or die('Restricted access');

JBusinessUtil::enqueueStyle('libraries/swiper/swiper-bundle.min.css');
JBusinessUtil::enqueueScript('libraries/swiper/swiper-bundle.min.js');

// Include LightGallery
JBusinessUtil::enqueueStyle('libraries/lightgallery/lightgallery.min.css');
JBusinessUtil::enqueueScript('libraries/lightgallery/lightgallery.min.js');
JBusinessUtil::enqueueScript('libraries/lightgallery/plugins/thumbnail/lg-thumbnail.min.js');
JBusinessUtil::enqueueScript('libraries/lightgallery/plugins/zoom/lg-zoom.min.js');
JBusinessUtil::enqueueScript('libraries/lightgallery/plugins/rotate/lg-rotate.min.js');
JBusinessUtil::enqueueScript('libraries/lightgallery/plugins/share/lg-share.min.js');

if (!empty($this->pictures)) :
?>

<div class="gallery-container" id="gallery-container">
    <div class="gallery-slider swiper">
        <div class="swiper-wrapper">
            <?php foreach ($this->pictures as $picture) : ?>
                <div class="swiper-slide gallery-item"
                     data-src="<?php echo $this->escape(BD_PICTURES_PATH . $picture->picture_path); ?>"
                     data-sub-html="<h4><?php echo $this->escape($picture->picture_title); ?></h4><p><?php echo $this->escape($picture->picture_info); ?></p>">
                    <img src="<?php echo $this->escape(BD_PICTURES_PATH . $picture->picture_path); ?>" 
                         alt="<?php echo $this->escape($picture->picture_info); ?>" 
                         class="gallery-image">
                </div>
            <?php endforeach; ?>
        </div>

        <!-- Custom Arrows -->
        <div class="swiper-button-prev custom-arrow"></div>
        <div class="swiper-button-next custom-arrow"></div>

        <!-- Pagination -->
        <div class="swiper-pagination"></div>
    </div>
</div>

<script>
   document.addEventListener("DOMContentLoaded", function () {
    // Initialize Swiper
    var swiper = new Swiper(".gallery-slider", {
        slidesPerView: 3,
        centeredSlides: true,
        spaceBetween: 0,
        loop: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        breakpoints: {
            1024: { slidesPerView: 3 },
            768: { slidesPerView: 2 },
            480: { slidesPerView: 1 },
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        on: {
            click: function(swiper, event) {
                // Trigger lightGallery on slide click
                const clickedSlide = event.target.closest('.swiper-slide');
                if (clickedSlide) {
                    const slideIndex = [...clickedSlide.parentElement.children].indexOf(clickedSlide);
                    gallery.openGallery(slideIndex);
                }
            }
        }
    });

    // Initialize LightGallery
    const gallery = lightGallery(document.getElementById('gallery-container'), {
        selector: '.gallery-item',
        plugins: [lgZoom, lgThumbnail, lgRotate, lgShare],
        speed: 500,
        download: true,
        counter: true,
        enableDrag: true,
        enableTouch: true,
        // Thumbnail settings
        thumbnail: true,
        animateThumb: true,
        showThumbByDefault: true,
        thumbWidth: 100,
        thumbHeight: 80,
        // Zoom settings
        zoom: true,
        zoomFromOrigin: false,
        scale: 3,
        // Gallery specific options
        loop: true,
        hideScrollbar: true,
        closable: true,
        escKey: true,
        keyPress: true
    });
});
</script>

<?php endif; ?>