JavaScript — ошибка ElevateZoom — $ (…). elevateZoom не является функцией

Я сталкиваюсь со следующей ошибкой:

  jquery.elevatezoom.js:39

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

Строка 39+ все, что с этим связано:

 //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;
});

Что я упускаю?

Css линии (может быть, я что-то пропустил):

/*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 ! == '

Основной код:

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

Я также следую инструкциям из галереи&Лайтбокс от http://www.elevateweb.co.uk/image-zoom/examples