0

Basically i written my own gallery page so when ever a configurable product with color swatches is available , it is not showing different color images when user selects that particular swatch.

    <?php
/**
 * 
 * 
 */

/**
 * Product media data template
 *
 * @var $block 
 */
$gallery_images = json_decode($block->getGalleryImagesJson());
$_product = $block->getProduct();
$videoFile=$_product->getData('agreement_file');
$videoThumb=$_product->getData('product_video_thumbnail');


    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $storeManager = $objectManager->get('\Magento\Store\Model\StoreManagerInterface');
    $baseUrl=$storeManager->getStore()->getBaseUrl();

$parseVideoUrl=$baseUrl.'pub/media/catalog/product/file/'.$videoFile;
$thumbnailUrl=$baseUrl.'pub/media/catalog/product/thumb_file/'.$videoThumb;


?>

<div id="mgallery_images" class="row">
    <?php foreach($gallery_images as $gallery_image): ?>
    <div class="col-sm-6">
        <div class="product-image-grid">
            <a href="<?php echo $gallery_image->full; ?>" class="m-products-gallery" data-fancybox="images" data-width="2048" data-height="1365">
    <img src="<?php echo $gallery_image->img; ?>" />
 </a>
        </div>
    </div>
    <?php endforeach; ?>
</div>

<div class="easyzoom easyzoom--overlay easyzoom--with-thumbnails">
     <?php foreach($gallery_images as $gallery_image): 

         if($gallery_image->isMain=='1'){ ?>
               <div class="main_image"><a href="<?php echo $gallery_image->full; ?>">
                    <img src="<?php echo $gallery_image->full; ?>"  id="zoom_05" data-zoom-image='<?php echo $gallery_image->full; ?>' alt="product-details" /></a>

                </div>
              <div id="video_product" class="embed-responsive embed-responsive-16by9" style="display: none;">

                           <!-- <iframe class="embed-responsive-item" src="" id="video_final" wmode="transparent" frameborder="0" allowfullscreen="0" ></iframe> -->
                 <!--  <video class="embed-responsive-item" controls>
                      <source src="<?php echo $parseVideoUrl; ?>" id="video_final" type="video/mp4">
                     Your browser does not support the video tag.
                  </video>  -->

                  <video
    id="video_final"
    class="video-js embed-responsive-item"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="<?php echo $thumbnailUrl; ?>"
    data-setup="{}"
  >
    <source src="<?php echo $parseVideoUrl; ?>" type="video/mp4" />
    
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
    </p>
  </video>


                       </div>
            <?php  }  

              endforeach; 

              if (!$_product->getIsSalable()): ?>
                     <div class="out-of-stock-wrapper ptop pleft"><span>Sold Out</span></div>
              <?php endif; ?>
</div>
      
<ul class="thumbnails" id="gallery_01">
    <?php 
     foreach($gallery_images as $gallery_image): ?>
        <li>  
          <?php 
              if($gallery_image->mediaType=='external-video'){ ?>
                <a href="<?php echo $gallery_image->videoUrl.'?controls=0&showinfo=0'; ?>" id="<?php echo $gallery_image->mediaType; ?>" class="elevatezoom-gallery" data-update="" data-image="<?php echo $gallery_image->full; ?>" data-zoom-image="<?php echo $gallery_image->full; ?>"><img src="<?php echo $gallery_image->thumb; ?>" /></a>
          <?php } else { ?>           
                  <a href="#" id="<?php echo $gallery_image->mediaType; ?>" class="elevatezoom-gallery active" data-update="" data-image="<?php echo $gallery_image->full; ?>"  data-zoom-image="<?php echo $gallery_image->full; ?>"><img src="<?php echo $gallery_image->thumb; ?>" /></a>      
          <?php  }  ?>
        </li>
    <?php endforeach; ?>
    <?php if($videoFile){?>

      <li> 
 
         <a href="<?php echo $parseVideoUrl; ?>" id="external-video" class="elevatezoom-gallery" data-update="" data-image="<?php echo $thumbnailUrl; ?>" data-zoom-image="<?php echo $thumbnailUrl; ?>"><img src="<?php echo $thumbnailUrl; ?>" /></a>
        </li>

   <?php  } ?>
</ul>
</div>
<script type="text/javascript">
require(['jquery', 'fancybox','easyzoom','ezpluszoom'], function($){

/* $('[data-fancybox="images"]').fancybox({
    afterLoad : function(instance, current) {
        var pixelRatio = window.devicePixelRatio || 1;

        if ( pixelRatio > 1.5 ) {
            current.width  = current.width  / pixelRatio;
            current.height = current.height / pixelRatio;
        }
    }
});*/

$(document).ready(function(){
  
   if($(window).innerWidth() >= 768) {
              $(".easyzoom--with-thumbnails").hide();
              $(".thumbnails").hide();
              $("#mgallery_images").show();
                
            } else {
              
               $("#mgallery_images").hide();
               $(".easyzoom--with-thumbnails").show();
               $(".thumbnails").show();
            }

  });

$(window).resize(function(){
          
            if($(window).innerWidth() >= 768) {
              $(".easyzoom--with-thumbnails").hide();
              $(".mgallery_images").show();
                
            } else {
               $(".mgallery_images").hide();
               $(".easyzoom--with-thumbnails").show();
            }
        });

 $('[data-fancybox]').fancybox({
  protect: true,
  fitToView:false
});

 $("[data-fancybox]").fancybox({
 thumbs : {
        autoStart : true,
    },
  hash            : false,
  loop            : true,
  keyboard        : true,
  toolbar         : true,
  animationEffect : false,
  arrows          : true,
  clickContent    : true
});</script>

Here i am showing 4 image grid for desktop view and vertical thumbnails on mobile devices...I got problem with configurable swatches. How can i make it work with swatch options as well? please help me on this.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.