Question

我在我的应用中使用了elevatezoom插件。我想要做的只是根据悬停的图像改变缩放窗口高度。我可以找到一种方法，但它不能有效地工作。首次加载页面时它不起作用。如果我转到另一个页面看到另一个产品，那么elevatezoom正在按我的意愿工作。

以下是我的代码，其中包含laravel网址分配：

<div class="product-main-image">
    <img src="{{URL::to($product->image)}}" alt="{{$product->title($product->id)}}" class="zoomInner img-responsive" data-zoom-image="{{URL::to($product->image)}}">
</div>
<div class="product-other-images" id="gallery_01">
    <a data-update="" data-image="{{URL::to($product->image)}}" data-zoom-image="{{URL::to($product->image)}}">
    <img alt="{{$product->title($product->id)}}" src="{{URL::to($product->image)}}"></a>
    @if(isset($images) && $images)
    @foreach($images as $image)
    <a  data-update="" data-image="{{URL::to($image->image)}}" data-zoom-image="{{URL::to($image->image)}}">
    <img alt="{{$product->title($product->id)}}" src="{{URL::to($image->image)}}"></a>
    @endforeach
    @endif
</div>

这是启动缩放并更改缩放窗口高度的JavaScript：

    (function() {
      $(".product-main-image img").on("load",function() {
       var mainImgHeight=$(this).height();
       /*var src=$(this).attr("src");
        alert(src);*/
        $('.zoomInner').elevateZoom({
            gallery:'gallery_01',
            zoomType: "window",
            cursor: "crosshair",
            zoomWindowWidth:"400",
            zoomWindowHeight:mainImgHeight,
            zoomWindowFadeIn: 500,
            zoomWindowFadeOut: 750
            });
        $(".product-main-image img").data("zoom-image","false").elevateZoom();
    });

}）（）;

如果我删除了最后一行代码段，则首次加载时缩放正在工作但是，单击产品其他图像时，数据缩放图像不会更改。我该如何处理这个问题。我认为当我在load（）函数中分配一个全局值“mainImgHeight”时，问题可能会得到解决。但经过一天的麻烦，我无法让它发挥作用。也许有人有线索。

Answer 1

问题解决了。这是简单的解决方案。你可以看到下面的代码和描述。

var firstImgHeight = $(".product-main-image img").height();
  $(".zoomWindow").css({"height":firstImgHeight});//assign height of first image to the zoomWindow height
        $('.zoomInner').elevateZoom({ //initiate zoom
            gallery:'gallery_01',
            zoomType: "window",
            cursor: "crosshair",
            zoomWindowWidth:"400",
            zoomWindowHeight:firstImgHeight,
            zoomWindowFadeIn: 500,
            zoomWindowFadeOut: 750
            });
        $(".product-main-image img").on("load",function() { //change zoomWindow height when each image is loaded  (these images are big sizes of small thumnail images)
          var mainImgHeight=$(this).height();               // they are loaded by elevatezoom plugin 
          $(".zoomWindow").css({"height":mainImgHeight});
           var zoomWH = $(".zoomWindow").height();

       });

该解决方案适用于我。

调整缩放窗口高度提升缩放

1 个答案: