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

我在我的应用中使用了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>

这里是thejavascript它启动变焦和改变zoomwindow高度：

(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”时可能会得到解决。但一天之后我无法得到它的工作。也许有人有线索。

来源

2015-04-07 efendi

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

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

     });

该解决方案适用于我。

来源

2015-04-07 11:08:54 efendi

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

回答

相关问题