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.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="simple-gallery-container">
    <!-- Main Slider -->
    <div class="gallery-slider swiper" id="lightgallery">
        <div class="swiper-wrapper">
            <?php foreach ($this->pictures as $index => $picture) : ?>
                <a href="<?php echo $this->escape(BD_PICTURES_PATH . $picture->picture_path); ?>" 
                   class="swiper-slide lightbox-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">
                </a>
            <?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>

    <!-- Thumbnail Slider -->
    <div class="gallery-thumbnails swiper">
        <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); ?>">
                    <img src="<?php echo $this->escape(BD_PICTURES_PATH . $picture->picture_path); ?>" 
                         alt="<?php echo $this->escape($picture->picture_info); ?>" 
                         class="thumbnail-image">
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var thumbnailSwiper = new Swiper(".gallery-thumbnails", {
            spaceBetween: 10,
            slidesPerView: 5,
            freeMode: true,
            watchSlidesProgress: true,
        });

        var mainSwiper = new Swiper(".gallery-slider", {
            spaceBetween: 10,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            thumbs: {
                swiper: thumbnailSwiper,
            },
        });

        // Initialize LightGallery with thumbnails
        lightGallery(document.getElementById('lightgallery'), {
            selector: '.lightbox-item',
            plugins: [lgZoom, lgThumbnail, lgRotate, lgShare],
            thumbnail: true,
           // Zoom settings
           zoom: true,
            zoomFromOrigin: true,
            zoomPluginStrings: {
                zoomIn: 'Zoom In',
                zoomOut: 'Zoom Out',
                close: 'Close'
            },
            scale: 3,
            actualSize: true,
            animateThumb: true,
            showThumbByDefault: true,
            rotate: true,
            share: true,
            download: true,
            counter: true,
            actualSize: true
        });
    });
</script>

<?php endif; ?>