0

Hi i successfuly managed to make my base photo have zoom but when i change my image the zoom is still refering to the base image how can i fix this .. i tried with attribute gallery but its not working

My code to change product image through thumbnails

<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/easy-slider.js');?>"></script>
  <script type="text/javascript">
      // <![CDATA[
      (function($){
          $(document).ready(function($){
              $(".more-views").easySlider({
                  mainImg: "p.product-image-zoom img",
                  btnNext: ".jm-product-lemmon .next",
                  btnPrev: ".jm-product-lemmon .prev",
                  animate: true,
                  loop: true,
                  speed: 300,
                  width: 100,
                  width_img: 78,
                  start: <?php echo $start?>
              });
          });
      })(jQuery);
      // ]]>
  </script>

my code for zoom

<script type="text/javascript" src="<?php echo $this->getSkinUrl('js/jquery.elevatezoom.js');?>"></script>
<script type="text/javascript">// <![CDATA[
    (function($) {
        $("#image").elevateZoom({
            scrollZoom: false,
            borderColour: "#eee",
            tintColour: "#eee",
            zoomWindowWidth: 450,
            zoomWindowHeight: 450,
            gallery: 'jm-product-lemmon',
            galleryActiveClass: 'active'
        });
    })(jQuery);
    // ]]>
</script>
0

I think you'll need to disable the zoom and initialise it again on the active image.

You may need to change some of the selectors below.

Disable zoom

$('#image').removeData('elevateZoom');
$('.zoomWrapper img.zoomed').unwrap();
$('.zoomContainer').remove();

So it goes like this:

  1. On page load you initialise the zoom
  2. When the carousel changes slide you disable the zoom
  3. When the next slide loads you initialise zoom on the active image (or when the user taps on the zoom icon or however your zoom is initialised)
  • ok but where do i put it? and what about zoomWrapper do i have to create it? – marinos Jun 9 '17 at 15:44
  • Hopefully the slider you're using has a callback you can hook onto when the slide changes? If not then it may be more difficult. .zoomWrapper is the parent of your zoomed image, you may not need this. I don't think I did but quite a few people online did. – Ben Crook Jun 9 '17 at 15:54
  • i dont use zoomWrapper so i think i dont need it what do you mean by callback what should i look for github.com/bsy/easyslider – marinos Jun 9 '17 at 16:07
  • Does the slider you're using have callback methods? If you don't have much experience with Javascript I'd advise against trying to get multiple plugins working together as it usually causes problems you'll need to debug and fix. – Ben Crook Jun 9 '17 at 16:42

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.