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_gallery_carousel.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/rotate/lg-rotate.min.js');
JBusinessUtil::enqueueScript('libraries/lightgallery/plugins/share/lg-share.min.js');
JBusinessUtil::enqueueScript('libraries/lightgallery/plugins/zoom/lg-zoom.min.js');

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

    <div class="overflow-gallery-container">
        <div class="gallery-slider swiper" id="lightgallery">
            <div class="swiper-wrapper">
                <?php foreach ($this->pictures as $index => $picture) : ?>
                    <div class="swiper-slide" 
                         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>
            <div class="swiper-pagination"></div>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var mainSwiper = new Swiper(".gallery-slider", {
                effect: "coverflow",
                grabCursor: true,
                centeredSlides: true,
                slidesPerView: "auto",
                initialSlide: Math.floor(document.querySelectorAll('.swiper-slide').length / 2),
                coverflowEffect: {
                    rotate: 0,
                    stretch: 0,
                    depth: 100,
                    modifier: 2.5,
                    slideShadows: false,
                },
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
            });

            // Initialize LightGallery
            const gallery = lightGallery(document.getElementById('lightgallery'), {
                selector: '.swiper-slide',
                plugins: [lgZoom, lgThumbnail, lgRotate, lgShare],
                mode: 'lg-fade',
                speed: 500,
                thumbnail: true,
                animateThumb: true,
                showThumbByDefault: true,
                rotate: true,
                share: true,
                zoom: true,
                download: true,
                counter: true,
                actualSize: true,
                thumbWidth: 100,
                thumbHeight: 80
            });

            // Sync Swiper with LightGallery
            gallery.on('afterSlide', (detail) => {
                mainSwiper.slideTo(detail.index);
            });
        });
    </script>

<?php endif; ?>