<style>.flickity-viewport {transition: height 0.2s;}</style>
<section>
  <?php
  $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'large', false);
  $attachment_ids = $product->get_gallery_image_ids();
  if($attachment_ids):
   ?>
    <div class="highlight-main">
      <?php if($image != false): $post_image = $image[0]; ?>
        <div class="carousel-cell">
          <span class="full-image-show">
            <a class="glightbox" href="<?php echo $post_image; ?>">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 16h-8v-8h8v8zm-10-7.172v-2.828h2.828l-3.414-3.414 2.586-2.586h-8v8l2.586-2.586 3.414 3.414zm2.828 9.172h-2.828v-2.828l-3.414 3.414-2.586-2.586v8h8l-2.586-2.586 3.414-3.414zm9.172-2.828v2.828h-2.828l3.414 3.414-2.586 2.586h8v-8l-2.586 2.586-3.414-3.414zm-2-15.172l2.586 2.586-3.414 3.414h2.828v2.828l3.414-3.414 2.586 2.586v-8h-8z"/></svg>								</a>
          </span>
      <img src="<?php echo $post_image; ?>" alt="<?php the_title(); ?>" data-hash="0">
        </div>
     <?php endif; ?>
      <?php
      $counter = 1;
      foreach ( $attachment_ids as $attachment_id ) {
        $counter++;
        $src = wp_get_attachment_image_src($attachment_id, 'large');
          ?>
          <div class="carousel-cell">
            <span class="full-image-show">
              <a class="glightbox" href="<?php echo $src[0]; ?>">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 16h-8v-8h8v8zm-10-7.172v-2.828h2.828l-3.414-3.414 2.586-2.586h-8v8l2.586-2.586 3.414 3.414zm2.828 9.172h-2.828v-2.828l-3.414 3.414-2.586-2.586v8h8l-2.586-2.586 3.414-3.414zm9.172-2.828v2.828h-2.828l3.414 3.414-2.586 2.586h8v-8l-2.586 2.586-3.414-3.414zm-2-15.172l2.586 2.586-3.414 3.414h2.828v2.828l3.414-3.414 2.586 2.586v-8h-8z"/></svg>								</a>
            </span>
        <img class="no-lazy" src="<?php echo $src[0]; ?>" alt="<?php the_title(); ?>" data-hash="<?php echo $counter; ?>">
          </div>
      <?php  } ?>
    </div>
    <div class="highlight-thumbs">
      <?php
      if($image != false):
        $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID));
        $post_image = $image[0]; ?>
      <div class="carousel-cell">
        <img src="<?php echo $post_image; ?>" alt="<?php the_title(); ?>">
      </div>
      <?php endif; ?>
      <?php
      $counter = 1;
      foreach ( $attachment_ids as $attachment_id ) {
        $counter++;
          ?>
        <div class="carousel-cell">
          <img src="<?php $src = wp_get_attachment_image_src($attachment_id); echo $src[0]; ?>" alt="<?php the_title(); ?>">
        </div>
        <?php } ?>
        <div class="carousel-scrollbar is-hidden">
          <div class="carousel-scrollbar-inner"></div>
        </div>
    </div>
  <?php else: ?>
    <?php
    if($image == false):
    if (get_theme_mod( 'charsoogh_ad_no_image' )) : $post_image = get_theme_mod( 'charsoogh_ad_no_image'); else: $post_image = get_template_directory_uri().'/assets/img/no_image_available.jpg'; endif;
    else:
    $post_image = $image[0];
    endif;
     ?>
    <img src="<?php echo $post_image; ?>" class="no_image_available" alt="<?php the_title(); ?>"  />
    <?php endif; ?>
    <script>
    const lightbox = GLightbox({
      touchNavigation: true,
      loop: true,
      autoplayVideos: true
    });
    (function ($) {
      var $doc = $(document);

      /**
       * Slider
       */
      $('.highlight-main').flickity({
        pageDots: false,
        adaptiveHeight: true,
        lazyLoad: true,
        imagesLoaded: true
      });

      /**
       * Thumbnails
       */
      var $thumbnails = $('.highlight-thumbs').flickity({
        asNavFor: '.highlight-main',
        cellSelector: '.carousel-cell',
        contain: true,
        pageDots: false,
        prevNextButtons: false,
        freeScroll: true,
        imagesLoaded: true
      });

      /**
       * Thumbnails Scrollbar
       */
      var $scroll = $thumbnails.find('.carousel-scrollbar');
      var $scrollInner = $scroll.find('.carousel-scrollbar-inner');
      var flkty = $thumbnails.data('flickity');

      // recalculate scrollbar size
      var scrollInnerSize = 0;
      var recalculateScrollSizeTimeout;
      function recalculateScrollSize() {
        clearTimeout(recalculateScrollSizeTimeout);
        recalculateScrollSizeTimeout = setTimeout(function() {
          $scrollInner.width(flkty.size.width * flkty.size.width / flkty.slideableWidth);

          // hide scrollbar if don't needed
          if ( flkty.size.width >= flkty.slideableWidth ) {
            $scroll.addClass('is-hidden');
          } else {
            $scroll.removeClass('is-hidden');
          }

          scrollInnerSize = $scrollInner.width() / $scroll.width();
        }, 155); // flickity has debounce 150ms
      }
      recalculateScrollSize();
      $thumbnails.on( 'ready.flickity change.flickity', recalculateScrollSize);
      $(window).on('ready load resize orientationchange', recalculateScrollSize);

      // set scrollbar position
      $thumbnails.on('scroll.flickity', function(event, progress) {
        $scrollInner.css({
          left: (progress * (1 - scrollInnerSize)) * 100 + '%'
        });
      });
      $thumbnails.flickity('reposition');

      // scrollbar drag event.
      var lastPageX = 0;
      var lastThumbsX = 0;
      function drag(e) {
        e.preventDefault();
        var delta = e.pageX - lastPageX;

        flkty.x = lastThumbsX - (flkty.slideableWidth * delta / flkty.size.width);

        if ( ! flkty.isFreeScrolling ) {
          flkty.animate();
        }
      }
      function stop(e) {
        e.preventDefault();
        $doc.off('mousemove', drag);
        $doc.off('mouseup', stop);

        if ( flkty.options.freeScroll ) {
          flkty.isFreeScrolling = true;
        }

        // set selectedIndex based on where flick will end up
        var index = flkty.dragEndRestingSelect();

        if ( flkty.options.freeScroll && !flkty.options.wrapAround ) {
          // if free-scroll & not wrap around
          // do not free-scroll if going outside of bounding slides
          // so bounding slides can attract slider, and keep it in bounds
          var restingX = flkty.getRestingPosition();
          flkty.isFreeScrolling = -restingX > flkty.slides[0].target &&
            -restingX < flkty.getLastSlide().target;
        }

        flkty.select( index );
      }
      $scrollInner.on('mousedown', function(e) {
        e.preventDefault();

        lastPageX = e.pageX;
        lastThumbsX = flkty.x;

        flkty.isFreeScrolling = true;
        flkty.startAnimation();

        $doc.on('mousemove', drag);
        $doc.on('mouseup', stop);
      });

    }(jQuery));
    </script>
</section>
