1

我遇到下一个错误：

  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&Lightbox”的说明

4

2 回答 2

0

可以肯定的是插件没有加载。你可以试试打字$(".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'}); });

于 2016-09-22T20:09:04.063 回答
0

可能是加载问题。

我改为imageCrossfade，false它对我有用。

imageCrossfade: false
于 2020-10-20T16:56:14.807 回答