Your IP : 216.73.216.84
<?php
/**
* @package J-BusinessDirectory
*
* @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/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');
?>
<?php if(!empty($this->pictures)){?>
<div class="gallery-grid" id="gallery-grid">
<!-- Main/Featured Image -->
<div class="gallery-item gallery-item-main">
<a href="<?php echo $this->escape(BD_PICTURES_PATH.$this->pictures[0]->picture_path); ?>"
class="gallery-popup"
data-sub-html="<h4><?php echo $this->escape($this->pictures[0]->picture_info) ?></h4>">
<img src="<?php echo $this->escape(BD_PICTURES_PATH.$this->pictures[0]->picture_path); ?>"
alt="<?php echo $this->escape($this->pictures[0]->picture_info) ?>"
class="gallery-image">
</a>
</div>
<div class="gallery-secondary">
<?php
$maxDisplayImages = 4; // Show 4 secondary images in a 2x2 grid
for ($i = 1; $i <= $maxDisplayImages && $i < count($this->pictures); $i++) : ?>
<div class="gallery-item">
<a href="<?php echo $this->escape(BD_PICTURES_PATH.$this->pictures[$i]->picture_path); ?>"
class="gallery-popup"
data-sub-html="<h4><?php echo $this->escape($this->pictures[$i]->picture_info) ?></h4>">
<img src="<?php echo $this->escape(BD_PICTURES_PATH.$this->pictures[$i]->picture_path); ?>"
alt="<?php echo $this->escape($this->pictures[$i]->picture_info) ?>"
class="gallery-image">
<?php if ($i == 4 && count($this->pictures) > 5): ?>
<div class="gallery-overlay">
<div class="show-all-button">Show all</div>
</div>
<?php endif; ?>
</a>
</div>
<?php endfor; ?>
</div>
<!-- Hidden Gallery Items -->
<?php for ($i = $maxDisplayImages + 1; $i < count($this->pictures); $i++) : ?>
<a href="<?php echo $this->escape(BD_PICTURES_PATH.$this->pictures[$i]->picture_path); ?>"
class="gallery-popup hidden"
data-sub-html="<h4><?php echo $this->escape($this->pictures[$i]->picture_info) ?></h4>">
<img src="<?php echo $this->escape(BD_PICTURES_PATH.$this->pictures[$i]->picture_path); ?>"
alt="<?php echo $this->escape($this->pictures[$i]->picture_info) ?>">
</a>
<?php endfor; ?>
</div>
<?php } ?>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Initialize LightGallery
const gallery = lightGallery(document.getElementById('gallery-grid'), {
selector: '.gallery-popup',
plugins: [lgZoom, lgThumbnail, lgRotate, lgShare],
speed: 500,
download: true,
counter: true,
enableDrag: true,
enableTouch: true,
// Zoom plugin options
zoomFromOrigin: false,
zoom: true,
closeOnScroll: false,
mousewheel: true,
zoomPluginStrings: {
zoomIn: 'Zoom In',
zoomOut: 'Zoom Out',
close: 'Close'
},
// Zoom specific settings
maxZoom: 5,
minZoom: 1,
// Thumbnail settings
thumbnail: true,
animateThumb: true,
showThumbByDefault: true,
thumbWidth: 100,
thumbHeight: 80,
// Gallery specific options
loop: true,
hideScrollbar: true,
closable: true,
escKey: true,
keyPress: true
});
// Handle "Show all" button click
document.querySelector('.show-all-button')?.addEventListener('click', function(e) {
e.preventDefault();
// Find first gallery item and trigger click
document.querySelector('.gallery-popup').click();
});
});
</script>