1

I'm encountering the next error:

  jquery.elevatezoom.js:39 

Uncaught TypeError: $(...).elevateZoom is not a function(anonymous function) @ jquery.elevatezoom.js:39

Line 39+ everything related to that:

 //initiate the plugin and pass the id of the div containing gallery images
$(".zoom").elevateZoom({gallery:'gal1', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'}); 

//pass the images to Fancybox
$(".zoom").bind("click", function(e) {  
  var ez =   $('.zoom').data('elevateZoom');    
    $.fancybox(ez.getGalleryList());
  return false;
});

What am I missing out?

Css lines (maybe I'm missin somethin out):

/*set a border on the images to prevent shifting*/
 #zoom img{border:2px solid white;}

 /*Change the colour*/
 .active img{border:2px solid #333 !important;}
The single change in the main php file is the 'isset' to' null ! == '

Main code:

 <div class="product_image">
    <?php 
      $href = url_for($product->getRouteUrl(ESC_RAW));
      if ($sf_context->getActionName() == 'view')
    {
      $href = static_url_for($product->generatePhotoPath('large',ESC_RAW));
    }
    ?>

  <a <?php echo $sf_context->getActionName() == 'view' ? 'class="lightbox"' : ''; ?> href="<?php echo $href;?>" title="<?php echo $product; ?>">
        <img src="<?php echo  static_url_for($product->generatePhotoPath(ESC_RAW)); ?>" alt="<?php echo $product; ?>" data-zoom-image="<?php echo  static_url_for($product->generatePhotoPath('large',ESC_RAW)); ?>" class="zoom" style="z-index:999999;" />
  </a>

    <?php if(null !==($product->generatePhotoPath("medium", ESC_RAW))){  ?>
  <div id="gal1">

  <a href="#" data-image="<?php echo  url_for($product->generatePhotoPath("medium", 1, ESC_RAW)); ?>" data-zoom-image="<?php echo  url_for($product->generatePhotoPath("large", 1, ESC_RAW)); ?>">
    <img id="img_01" src="<?php echo  url_for($product->generatePhotoPath("medium", 1, ESC_RAW)); ?>" />
  </a>

    <?php } ?>

  <a href="#" data-image="<?php echo  url_for($product->generatePhotoPath("medium", 2, ESC_RAW)); ?>" data-zoom-image="<?php echo  url_for($product->generatePhotoPath("large", 2, ESC_RAW)); ?>">
    <img id="img_01" src="<?php echo  url_for($product->generatePhotoPath("medium", 2, ESC_RAW)); ?>" />
  </a>

  <a href="#" data-image="<?php echo  url_for($product->generatePhotoPath("medium", 3, ESC_RAW)); ?>" data-zoom-image="<?php echo  url_for($product->generatePhotoPath("large", 3, ESC_RAW)); ?>">
    <img id="img_01" src="<?php echo  url_for($product->generatePhotoPath("medium", 3, ESC_RAW)); ?>" />
  </a>

</div>
</div>

<script src="/js/elevatezoom/jquery.elevatezoom.js" type="text/javascript"></script>

I'm also following the instructions from 'Gallery&Lightbox' from http://www.elevateweb.co.uk/image-zoom/examples

Lowkase
  • 5,631
  • 2
  • 30
  • 48
BeanA22
  • 11
  • 1
  • 2
  • Where are you loading your JS relative to your HTML? Make sure jQuery is loaded before your plugin, and your call to elevateZoom (the zoom binding) is loaded after the plugin is loaded (and when dom is ready). – noahnu Sep 22 '16 at 18:47

2 Answers2

0

Quite certain that the plugin isn't loaded. You can try typing $(".zoom").elevateZoom({gallery:'gal1', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});

in the console after the page loads and see if you get the same error. If not, then you'll need to wrap (at a minimum probably other lines as well) the code on your line 39 inside of a ready call, e.g.

$(document).ready (function () { $(".zoom").elevateZoom({gallery:'gal1', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'}); });

Steve
  • 776
  • 6
  • 13
0

It maybe loading problem.

I changed imageCrossfade to false, it worked for me.

imageCrossfade: false
Ben
  • 8,894
  • 7
  • 44
  • 80
Agrebi Aymen
  • 1