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

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

JBusinessUtil::enqueueStyle('libraries/slick/slick.css');
JBusinessUtil::enqueueScript('libraries/slick/slick.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');

$lang = JFactory::getLanguage();
$dir = $lang->get('rtl');
$sliderId = rand(1000, 10000);
?>

<div class="gallery-slider responsive slider" id="slider-<?php echo $sliderId ?>">
    <?php if (!empty($this->pictures)) {?>
        <div class="slider-loader" id="slider-<?php echo $sliderId ?>-loader">
            <div class="loader"></div>
        </div>
        <div class="gallery-main-slider" id="gallery-main-<?php echo $sliderId ?>">
            <?php foreach ($this->pictures as $picture) { ?>
                <div class="gallery-slider-item abs-img gallery-item"
                     data-src="<?php echo 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 BD_PICTURES_PATH.$picture->picture_path ?>" 
                         alt="<?php echo $picture->picture_info ?>"
                         class="gallery-image">
                </div>
            <?php }?>
        </div>
    <?php } ?>
</div>

<script type="text/javascript">
    window.addEventListener('load', function() {
        jQuery(".gallery-main-slider").slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            prevArrow: '<div class="slick-arrow slick-prev"><span class=""><svg  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 19.5L11.55 18.45L5.925 12.75L21.75 12.75L21.75 11.25L5.925 11.25L11.55 5.55L10.5 4.5L3 12L10.5 19.5Z" fill="#344F6E"/></svg></span></div>',
            nextArrow: '<div class="slick-arrow slick-next"><span class=""><svg  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 4.5L12.45 5.55L18.075 11.25H2.25V12.75H18.075L12.45 18.45L13.5 19.5L21 12L13.5 4.5Z" fill="#344F6E"/></svg></span></div>',
            fade: !0,
            infinite: !0,
            responsive: [{
                breakpoint: 768,
                settings: {
                    fade: !1
                }
            }]
        });

        // Initialize LightGallery
        const galleryMain = document.getElementById('gallery-main-<?php echo $sliderId ?>');
        if (galleryMain) {
            const gallery = lightGallery(galleryMain, {
                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
            jQuery('.gallery-slider-item').on('click', function(e) {
                e.preventDefault();
                const index = jQuery(this).parent().children().index(this);
                gallery.openGallery(index);
            });
        }

        jQuery(".controller-prev").click(function(event){
            event.stopPropagation();
        });
        jQuery(".controller-next").click(function(event){
            event.stopPropagation();
        });
        
        if(jQuery(".slick-initialized").length) {
            jQuery(".slider-loader").hide()
        }
    });
</script>