Question

我遇到了下一个错误：

  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

中'Gallery＆amp; Lightbox'的说明操作的

Answer 1

很确定插件未加载。您可以尝试输入$(".zoom").elevateZoom({gallery:'gal1', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});

页面加载后在控制台中

，看看是否收到同样的错误。如果没有，那么你需要在准备好的电话中包裹（至少可能是其他线路）第39行的代码，例如

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

Answer 2

可能是加载问题。

我将imageCrossfade更改为false，对我有用。

imageCrossfade: false

ElevateZoom错误 - $（...）。elevateZoom不是函数

2 个答案: