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_vertical.php

<?php
/**
 * @package    J-BusinessDirectory
 * @author     CMSJunkie
 * @copyright  Copyright (C) 2007 - 2025 CMSJunkie
 * @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="simple-gallery-container-vertical">
    <!-- Thumbnails Section -->
    <div class="gallery-thumbnails">
        <div class="thumbnail-arrow thumbnail-prev">
            <i class="la la-angle-up"></i>
        </div>
        <div class="swiper gallery-thumbnails-swiper">
            <div class="swiper-wrapper">
                <?php foreach ($this->pictures as $index => $picture) : ?>
                    <div class="swiper-slide">
                        <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 class="thumbnail-arrow thumbnail-next">
            <i class="la la-angle-down"></i>
        </div>
    </div>

    <!-- Main Image Slider -->
    <div class="gallery-slider" id="gallery-main">
        <div class="swiper gallery-slider-swiper">
            <div class="swiper-wrapper">
                <?php foreach ($this->pictures as $index => $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>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var thumbnailSwiper = new Swiper(".gallery-thumbnails-swiper", {
            direction: "vertical",
            spaceBetween: 10,
            slidesPerView: 4,
            freeMode: true,
            watchSlidesProgress: true,
            navigation: {
                nextEl: ".thumbnail-next",
                prevEl: ".thumbnail-prev",
            }
        });

        var mainSwiper = new Swiper(".gallery-slider-swiper", {
            spaceBetween: 10,
            thumbs: {
                swiper: thumbnailSwiper,
            }
        });

        // Link thumbnail arrows to both sliders
        document.querySelector('.thumbnail-prev').addEventListener('click', function() {
            mainSwiper.slidePrev();
        });

        document.querySelector('.thumbnail-next').addEventListener('click', function() {
            mainSwiper.slideNext();
        });

        // Initialize LightGallery
        const gallery = lightGallery(document.getElementById('gallery-main'), {
            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
        });

        // Handle click on main slider images
        document.querySelectorAll('.gallery-item').forEach((item, index) => {
            item.addEventListener('click', (e) => {
                e.preventDefault();
                gallery.openGallery(index);
            });
        });
    });
</script>

<?php endif; ?>