调整缩放 Window 高度提升缩放

Question

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

这是我的代码 laravel url 作业：

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

})();

如果我删除最后一行代码片段，zoom 将在第一次加载时工作但是当单击产品其他图像时，data-zoom-image 不会改变。我该如何处理这个问题。我认为当我在 load() 函数中分配一个全局值 ot "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();

       });

该解决方案适合我。

调整缩放 Window 高度提升缩放

Adjust Zoom Window Height Elevate Zoom

javascript

jquery

html

zooming