Галерея woocommerce, НО НЕ ПЛАГИН, просто руками выведена разметка.
В галерее 5 фотографий, а как открываю в увеличенном виде - показывает 1 из 9.
jQuery('.slider-big').each(function() { // the containers for all your galleries
jQuery(this).magnificPopup({
delegate: 'a', // the selector for gallery item
type: 'image',
gallery: {
enabled:true
}
});
});
Перед тем еще на этой же галерее навешен слик слайдер. В двух разных функциях.
jQuery('.slider-big').each(function() {
var slider = jQuery(this);
slider.slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
dots:false,
arrows: false,
driggable:true,
swipe: false,
swipeToSlide: false,
touchMove: false,
asNavFor: '.slider-standart',
});
});
Для меня примеры на кодпен, как их применить в одной функции, какие-то непонятные.
Когда одна фото в галерее, она и открывается одна, а как 4-5, то почему-то 9.
Разметка галереи
add_action( 'woocommerce_before_single_product_summary', 'themename_wrapper_product_image_start', 5 );
function themename_wrapper_product_image_start() {
?>
<div class="row single-row">
<div class="col-xl-7 col-12 slider-wrapper">
<?php
global $product;
$attachment_ids = $product->get_gallery_attachment_ids();
if ( ! empty( $attachment_ids ) ) {?>
<div class="slider-big">
<?php
$attachment_ids = $product->get_gallery_attachment_ids();
foreach( $attachment_ids as $attachment_id ) {?>
<div class="slider-big-item">
<a href="<?php echo wp_get_attachment_image_src( $attachment_id, 'full' )[0]; ?>">
<?php
echo wp_get_attachment_image($attachment_id, 'full');?>
</a>
</div>
<?php }?>
</div>
<?php } else{
$attachment_id = get_post_thumbnail_id( $product->get_id() );
$product_thub = wp_get_attachment_image_src( $attachment_id, 'full' )[0];
?>
<div class="slider-big"><div class="slider-big-item"><a href="<?php echo wp_get_attachment_image_src( $attachment_id, 'full' )[0]; ?>"><img class="attachment-woocommerce_single" src="<?php echo $product_thub;?>" alt="slider-item"></a></div></div>
<?php }?>
<?php
global $product;
$attachment_ids = $product->get_gallery_attachment_ids();
if ( ! empty( $attachment_ids ) ) {?><div class="slider-standart"><?php
$attachment_ids = $product->get_gallery_attachment_ids();
foreach( $attachment_ids as $attachment_id ) {?><div class="slider-standart-item"><?php
echo wp_get_attachment_image( $attachment_id, 'woocommerce_single' );?></div><?php
}
?></div><?php } else{
$attachment_id = get_post_thumbnail_id( $product->get_id() );
$product_thub = wp_get_attachment_image_url($attachment_id, 'woocommerce_single'); ?>
<div class="slider-big"><div class="slider-big-item"><img class="attachment-woocommerce_single" src="<?php echo $product_thub;?>" alt="slider-item"></div></div>
<?php }
}
Плагин ставить не хочу - хочу понять, что неправильно, и пофиксить руками, и slick lightbox не подходит, хоть вместе со слайдером ставить и легко - с ним на телефонах нельзя приблизить пальцами, а с магнификом можно.
Может кто-нибудь увидит, где ошибаюсь? Нет, нежелание ставить плагин не ошибка, или не ошибка, которую я ищу здесь.