Answer the question
In order to leave comments, you need to log in
Slick lightbox in woocommerce gallery - how to make images open full size, not compressed for product card?
How do I display the gallery
add_action( 'woocommerce_before_single_product_summary', 'themename_wrapper_product_image_start', 5 );
function themename_wrapper_product_image_start() {
?>
<div class="row">
<div class="col-lg-6 col-12 order-md-2 order-0">
<h1 class="product-title-mob d-block d-md-none">
<?php the_title( ) ?>
</h1>
<?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_attachment_ids();
if ( ! empty( $attachment_ids ) ) {
$attachment_ids = $product->get_gallery_attachment_ids();?>
<div class="slider-standart">
<?php
foreach( $attachment_ids as $attachment_id ) {
echo wp_get_attachment_image( $attachment_id, 'woocommerce_gallery_thumbnail' );
}
}
?>
</div>
<?php
}
add_action( 'woocommerce_before_single_product_summary', 'themename_wrapper_product_image_end', 25 );
function themename_wrapper_product_image_end() {
?>
</div>
<?php
}
jQuery('.slider-big').each(function() {
var slider = jQuery(this);
slider.slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
dots:false,
arrows: false,
driggable:false,
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,
focusOnSelect: true,
prevArrow: "<span class='fa-arrow-left prev' alt='1'>",
nextArrow: "<span class='fa-arrow-right next' alt='2'>",
asNavFor: '.slider-big',
});
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question