Референс, надо чтобы как здесь:
https://cargasm.com.ua/catalog/hyundai/h-1-2004-20...
В woocommerce я отключил flexslider, и скрыл основную галерею в виде figure.
Вместо этого дважды вывел галерею, чтобы сделать связанные слайдеры. Ничего хорошего из этого не вышло. С лайтбоксом в верхнем вышло, с объединением нет. В нижнем лайтбокс не нужен, и поэтому при клике оно переходит на страницу изображения. А надо, чтобы открывало картинку в верхнем большом слайдере.
Подскажите плз кто хорошо понимает, хотя бы в какую сторону думать. Может я вообще неправильно подхожу?
Но такая практика применяется, и образец по ссылке тоже сделан на слике, значит должно быть можно, это просто я только столкнулся.
jQuery
jQuery('.slider-big').each(function() {
var slider = jQuery(this);
slider.slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
dots:false,
arrows: false,
driggable:false,
prevArrow: "<span class='fa-arrow-left prev' alt='1'>",
nextArrow: "<span class='fa-arrow-right next' alt='2'>",
asNavFor: '.slider-standart',
});
var sLightbox = jQuery(this);
sLightbox.slickLightbox({
src: 'src',
itemSelector: '.woocommerce-product-gallery__image img',
});
});
jQuery('.slider-standart').each(function() {
var slider = jQuery(this);
slider.slick({
infinite: true,
slidesToShow: 2,
slidesToScroll: 1,
driggable:false,
dots: false,
arrows:false,
prevArrow: "<span class='fa-arrow-left prev' alt='1'>",
nextArrow: "<span class='fa-arrow-right next' alt='2'>",
asNavFor: '.slider-big',
});
});
РНР
add_action( 'woocommerce_before_single_product_summary', 'wrapper_product_image_start', 5 );
function wrapper_product_image_start() {
?>
<div class="row">
<div class="col-lg-6 order-md-2 order-0">
<?php
global $product;
$attachment_ids = $product->get_gallery_image_ids();
if ( $attachment_ids && $product->get_image_id() ) {?>
<div class="slider-big">
<?php
foreach ( $attachment_ids as $attachment_id ) {
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', wc_get_gallery_image_html( $attachment_id ), $attachment_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped
}
?>
</div>
<?php
}
global $product;
$attachment_ids = $product->get_gallery_image_ids();
if ( $attachment_ids && $product->get_image_id() ) {?>
<div class="slider-standart">
<?php
foreach ( $attachment_ids as $attachment_id ) {
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', wc_get_gallery_image_html( $attachment_id ), $attachment_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped
}
?>
</div>
<?php
}
?>
<?php}
