Всем привет.
Возникла задача сделать разворачивание фото у товара и видео не с помощью lightbox, а с помощью magnific popup.
Плюс, была задача сделать так, чтобы превью разворачивались сразу при клике, как и видео во всплывающем окне.
Есть платные решения, но там много лишнего.
С видео было еще вот что - код вставлялся в товар, как HTML, а я сделал так, чтобы вставлять как ссылку на видео.
Итак, решение.
Подключаем magnific.js и .css файлы.
http://dimsemenov.com/plugins/magnific-popup/<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/magnific.js"></script>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/magnific.css" rel="stylesheet" type="text/css">
В index.php шаблона, или иным удобным способом.
Далее идем в шаблон product_default.php отображение страницы товара в JoomShopping.
Я убрал большое изображение товара, оставив только превью, которые разворачиваются в галерею.
Меняем отображение превью на
<div class="popup-gallery">
<span id='list_product_image_thumb'>
<?php if ( (count($this->images)>1) || (count($this->videos) && count($this->images)) ) {?>
<?php foreach($this->images as $k=>$image){?>
<a href="<?php print $this->image_product_path?>/<?php print $image->image_full;?>" title="<?php print htmlspecialchars($image->_title)?>">
<img class="jshop_img_thumb" src="<?php print $this->image_product_path?>/<?php print $image->image_thumb?>" alt="<?php print htmlspecialchars($image->_title)?>" title="<?php print htmlspecialchars($image->_title)?>" />
</a>
<?php }?>
<?php }?>
</span>
</div>
То есть, просто в div с классом
popup-gallery вставляются наши превью. Получается красивая центрированная галерея.
Пример:
http://prntscr.com/ihpy4whttp://prntscr.com/ihpyc0Для того, чтобы галерея заработала, в самый низ файла добавляем скрипт:
$(document).ready(function() {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
}
});
});
Доп опции можно посмотреть на сайте плагина
С видео интересней.
В товаре, во вкладке видео выбираем вставить код. И вставляем просто ссылку на видео в Youtube.
Далее, в место, где хотите вставить видео
<?php if (count($this->videos)){?>
<?php foreach($this->videos as $k=>$video){?>
<?php if ($video->video_code) { ?>
<a class="popup-youtube" href="<?php echo $video->video_code?>" id="video_<?php print $k?>"><img class="jshop_img_thumb" src="<?php print $this->video_image_preview_path."/"; if ($video->video_preview) print $video->video_preview; else print 'video.gif'?>" alt="video" />
</a>
<?php } else { ?>
<a href="<?php print $this->video_product_path?>/<?php print $video->video_name?>" id="video_<?php print $k?>" onclick="showVideo(this.id, '<?php print $this->config->video_product_width;?>', '<?php print $this->config->video_product_height;?>'); return false;"><img class="jshop_video_thumb" src="<?php print $this->video_image_preview_path."/"; if ($video->video_preview) print $video->video_preview; else print 'video.gif'?>" alt="video" /></a>
<?php } ?>
<?php } ?>
<?php }?>
А в низ файла скрипт
$(document).ready(function() {
$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
});
Важный момент - превью у видео не будет. Тут я делаю просто картинку - заглушку. При нажатии на картинку всплывает окно с плеером.
Пример:
http://prntscr.com/ihq099Вот и все.
Если уже было, извините, можете удалить, я не нашел.
13.04.2023, 21:06:09