При попытке совместить в одной галереи различные удачные решения получались различные конфликты. Родной слайдер никак не хочет синхронизироваться с миниатюрами. При подключении Zoom Magnifier (например YITH) ломается вывод миниатюр, особенно при выборе вариативных товаров и т.д. Решил создать собственную галерею с девушками и блэкджеком.
Данное пользовательское решение, вероятно, будет конфликтовать со многими плагинами связанными с функционалом галереи.
Для решения потребуется подключение 2-х скриптов:
- image-magnifier.js (увеличение изображений)
- slick.js (карусель)
Подключение новой галереи
Отключаем стандартную галерею и подключаем файл с новой:
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
add_action( 'woocommerce_before_single_product_summary', 'the_woocommerce_new_gallery', 20 );
function the_woocommerce_new_gallery() { get_template_part( 'gallery' ); }Кстати теперь можно не подключать стандартную карусель и zoom:
add_action( 'after_setup_theme', 'yourtheme_setup' );
function yourtheme_setup() {
//add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
//add_theme_support( 'wc-product-gallery-slider' );
}Файл gallery.php должен находится в корне темы.
Содержимое галереи
Здесь предусмотрен вывод основного изображения, дополнительных изображений, а также изображений вариаций, если они есть.
<?php global $product;
$thumb_id = get_post_thumbnail_id($post->ID);
if( $product->is_type( 'variable' ) ) {
$variations = $product->get_available_variations();
} ?>
<div class="new-gallery">
<div class="slider slider-for">
<?php $thumb_src = wp_get_attachment_image_url($thumb_id, 'shop_single');
$thumb_sizes = wp_get_attachment_image_src($thumb_id, 'full');
$thumb_src_full = wp_get_attachment_image_url($thumb_id, 'full'); ?>
<div id="<?php echo $thumb_id; ?>"><!--<img src="<?php //echo $thumb_src; ?>">-->
<script type="text/javascript">
imageZoom(
{ blur: false, inner: false, tint: '#333', border: 0 },
<?php echo '{ src: "'.$thumb_src_full.'", height: '.$thumb_sizes[1].', width: '.$thumb_sizes[2].' },'; ?>
<?php echo '{ src: "'.$thumb_src.'", height: 600, width: 600 },'; ?>
);
</script>
<a class="lightbox" href="<?php echo $thumb_src_full; ?>"><i class="fas fa-search-plus"></i></a>
</div>
<?php $attachment_ids = $product->get_gallery_image_ids();
if ( $attachment_ids && $product->get_image_id() ) {
foreach ( $attachment_ids as $attachment_id ) { ?>
<div id="<?php echo $attachment_id; ?>">
<?php $thumb_src = wp_get_attachment_image_url($attachment_id, 'shop_single');
$thumb_sizes = wp_get_attachment_image_src($attachment_id, 'full');
$thumb_src_full = wp_get_attachment_image_url($attachment_id, 'full'); ?>
<!--<img src="<?php //echo $thumb_src; ?>">-->
<script type="text/javascript">
imageZoom(
{ blur: false, inner: false, tint: '#333', border: 0 },
<?php echo '{ src: "'.$thumb_src_full.'", height: '.$thumb_sizes[1].', width: '.$thumb_sizes[2].' },'; ?>
<?php echo '{ src: "'.$thumb_src.'", height: 600, width: 600 },'; ?>
);
</script>
<a class="lightbox" href="<?php echo $thumb_src_full; ?>"><i class="fas fa-search-plus"></i></a>
</div>
<?php }
} ?>
<?php if( $product->is_type( 'variable' ) ) {
foreach ( $variations as $key => $variation ) {
if($key === 0) continue; //кроме первой вариации ?>
<div id="<?php echo $variation['image_id']; ?>">
<?php $thumb_src = wp_get_attachment_image_url($variation['image_id'], 'shop_single');
$thumb_sizes = wp_get_attachment_image_src($variation['image_id'], 'full');
$thumb_src_full = wp_get_attachment_image_url($variation['image_id'], 'full'); ?>
<!--<img src="<?php //echo $thumb_src; ?>">-->
<script type="text/javascript">
imageZoom(
{ blur: false, inner: false, tint: '#333', border: 0 },
<?php echo '{ src: "'.$thumb_src_full.'", height: '.$thumb_sizes[1].', width: '.$thumb_sizes[2].' },'; ?>
<?php echo '{ src: "'.$thumb_src.'", height: 600, width: 600 },'; ?>
);
</script>
<a class="lightbox" href="<?php echo $thumb_src_full; ?>"><i class="fas fa-search-plus"></i></a>
</div>
<?php } } ?>
</div>
<div class="slider slider-nav">
<?php $thumb_src = wp_get_attachment_image_url($thumb_id, 'thumbnail'); ?>
<div><img src="<?php echo $thumb_src; ?>"></div>
<?php $attachment_ids = $product->get_gallery_image_ids();
if ( $attachment_ids && $product->get_image_id() ) {
foreach ( $attachment_ids as $attachment_id ) { ?>
<div><?php $thumb_src = wp_get_attachment_image_url($attachment_id, 'thumbnail'); ?>
<img src="<?php echo $thumb_src; ?>"></div>
<?php }
} ?>
<?php if( $product->is_type( 'variable' ) ) {
foreach ( $variations as $key => $variation ) {
if($key === 0) continue; //кроме первой вариации ?>
<?php $thumb_src = wp_get_attachment_image_url($variation['image_id'], 'thumbnail'); ?>
<div><img src="<?php echo $thumb_src; ?>"></div>
<?php } } ?>
</div>
</div>Инициализация галереи:
$(document).ready(function() {
$('.image-zoom .thumbnail').hover(function () {
$('.slider-for .slick-list.draggable').addClass('image-zoom-visible');
}, function () {
$('.slider-for .slick-list.draggable').removeClass('image-zoom-visible');
});
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
autoplay: false,
autoplaySpeed: 6000,
//asNavFor: '.slider-nav',
});
$('.slider-nav').slick({
slidesToShow: 6,
slidesToScroll: 1,
asNavFor: '.slider-for',
arrows: true,
//centerMode: true,
focusOnSelect: true,
infinite: false
});
});Некоторые дополнительные стили галереи:
.new-gallery {max-width: 600px; z-index: 9; position: relative;}
.slider-for {margin-bottom: 15px;}
.slider-for .slick-list.draggable.image-zoom-visible {overflow: visible;}
.slider-nav .slick-list.draggable {margin: 0 -10px;}
.slider-nav .slick-slide {padding: 10px;}
.slider-nav .slick-track > *:only-child {display: none;}
.slick-slide {cursor: pointer;}
.slick-slide img {border: 1px solid #eee;}
.slider-nav .slick-slide.slick-current img {border: 1px solid #ccc;}
div.image-zoom {display: flex;}
div.image-zoom div { background-repeat: no-repeat; }
div.image-zoom div.box {display: none; position: relative; border: 2px solid #333; margin: 0;}
div.image-zoom div.popup {display: none; position: relative; left: 0; border: 2px solid #333; pointer-events: none;}
div.image-zoom div.thumbnail {cursor: move; }
div.image-zoom.inner div.popup { margin: 0;}
a.lightbox {position: absolute; top: 15px; right: 15px; color: #ff242c;}Переключение изображения при выборе вариации
$(document).on('change', '.variations_form select', function() {
setTimeout(function(){
var curimage = $(".variations_form").attr('current-image');
var slide = $('.slick-slider [id=' + curimage + ']');
var slideIndex = slide.data('slick-index');
$('.slider-for').slick('slickGoTo', slideIndex);
},200);
});Работает на основе заложенной в slick функции slickGoTo, которая отправляет к определенному слайду по индексу. В данном случае я перехватываю slideIndex по ID слайда (установленному дополнительно).
у меня не работаєт( консоль видает Uncaught ReferenceError: imageZoom is not defined