T
T
trenton2021-05-08 02:40:36
JavaScript
trenton, 2021-05-08 02:40:36

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
      }


Script
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 question

Ask a Question

731 491 924 answers to any question