<?php $galleryImages = $this->getGalleryImages(); ?>
<?php $zoom_image = $this->getEnableZoom(); ?>
<?php $lbox_image = $this->getLbox(); ?>
<?php $rtl = $this->getRightToLeft(); ?>
<div class="gallery-list">
    <?php foreach($galleryImages as $image): ?>
        <?php $lbImage = $image->getLabel() ? $image->getLabel() : $image->getLabelDefault(); ?>
		<?php $isVideo = $image->getMediaType() == 'external-video' ? true : false; ?>
		<?php $href = $isVideo ? $image->getVideoUrl() : $image->getImageZoom(); ?>
			
        <div class="product item-image imgzoom<?php if($isVideo): ?> item-image-video<?php endif ?>" data-zoom="<?php echo $image->getImageZoom(); ?>">
			
			<?php if($isVideo): ?><div class="label-video"><?php echo __('Video') ?></div><?php endif ?>
			
			<?php if($lbox_image): ?>
				<a class="lb<?php if($isVideo): ?> video-link<?php endif ?>" href="<?php echo $href; ?>">
					<img class="img-fluid" src="<?php echo $image->getLargeImageUrl(); ?>" alt="<?php echo $lbImage ?>"/>
				</a>
			<?php else: ?>
				<img class="img-fluid" src="<?php echo $image->getLargeImageUrl(); ?>" alt="<?php echo $lbImage ?>"/>
				<?php if($isVideo): ?>
					<a target="_blank" class="popup-video" href="<?php echo $image->getVideoUrl(); ?>">
						<span class="ti-video-camera"></span>
					</a>
				<?php endif ?>
			<?php endif ?>
		</div>
    <?php endforeach ?>
</div>
<script type="text/javascript">
    <?php if($zoom_image): ?>
        require([ 'jquery', 'zoom-images' ],function($) { 
            $(".imgzoom").each(function( index ) {
                zoomElement(this);
            });
        });
    <?php endif ?>
	<?php if($lbox_image): ?>
	require([ 'jquery', 'magnificPopup' ], function ($) {
		$('.product.media').magnificPopup({
			delegate: '.imgzoom .lb',
			type: 'image',
			tLoading: 'Loading image #%curr%...',
			mainClass: 'mfp-img-gallery',
			fixedContentPos: true,
			gallery: {
				enabled: true,
				navigateByImgClick: true,
				preload: [0,1]
			},
			iframe: {
				markup: '<div class="mfp-iframe-scaler"><div class="mfp-close"></div><iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe><div class="mfp-bottom-bar"><div class="mfp-title"></div><div class="mfp-counter"></div></div></div>'
			},
			image: {
				tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
			},
			callbacks: {
				elementParse: function(item) {
					if(item.el.context.className == 'lb video-link') {
						item.type = 'iframe';
					} else {
						item.type = 'image';
					}
				}
			}
		});
	});
	<?php endif ?>
	require([ 'jquery' ],function($) {
		var $padding = 0;
		var $offset = $('.product-info-clearfix').offset().top;
		var $heightEl = $('.product-info-clearfix .product-info-main').innerHeight();
		
		$(window).scroll(function(){
			var $scroll = $(this).scrollTop();
			if($(window).width() > 991.98){
				var $mediaHeight = $('.product.media').innerHeight();
				var $thisHeight = $('.product-info-clearfix .product-info-main').innerHeight();
				
				if($scroll < ($mediaHeight + $offset + 20)){
					if($('.header.start-stk:not(".hide-sticky")').length){
						$padding = $scroll - $offset + 100;
					}else {
						$padding = $scroll - $offset + 20;
					}
					
					if($padding < 0){
						$padding = 0;
					}
					
					if($mediaHeight > $thisHeight && ($padding + $heightEl - 20) <= $mediaHeight){
						$('.product-info-clearfix .product-info-main').attr('data-padding', $padding);
						$('.product-info-clearfix .product-info-main').css('padding-top', $padding);
						
					}else {
						if($padding < $('.product-info-clearfix .product-info-main').attr('data-padding')){
							$('.product-info-clearfix .product-info-main').attr('data-padding', $padding);
							$('.product-info-clearfix .product-info-main').css('padding-top', $padding);
							
						}
					}
				}
			}else {
				$('.product-info-clearfix .product-info-main').css('padding-top', 0);
			}
		});
		
		$(window).resize(function(){
			if($(window).width() < 992){
				$('.product-info-clearfix .product-info-main').css('padding-top', 0);
			}
		});
	});
</script>