提升缩放可调整不同尺寸图像的缩放窗口

Question

我正在尝试Elevate Zoom,我有一个小问题,我需要一些帮助.

正如您将从DEMO中看到的那样我设置看到,我试图找出当你点击缩略图或重置数据时是否有办法重新初始化插件,以便更高的图像(塔的照片),缩放窗口未使用第一个图像的尺寸.(我从我能发现它正在做的事情中收集)

不幸的是,我没有权力让人们正确地使用这种格式的图像,因此需要考虑各种图像高度.可以吗？

我的代码,暂时基于演示文件

<img style="border:1px solid #e8e8e6;" id="zoom_03" src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png" 
data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg"
width="411"  />

<div id="gallery_01">

<a  href="#" class="elevatezoom-gallery active" data-update="" data-image="images/large/image1.jpg" data-zoom-image="images/large/image1.jpg">
<img src="images/large/image1.jpg" width="100"  />
</a>

<a  href="#" class="elevatezoom-gallery" data-update="" data-image="images/large/image2.jpg" data-zoom-image="images/large/image2.jpg">
<img src="images/large/image2.jpg" width="100"  />
</a>

<a  href="#" class="elevatezoom-gallery" data-image="images/large/image3.jpg" data-zoom-image="images/large/image3.jpg">
<img src="images/large/image3.jpg" width="100"  />
</a>

<a  href="#" class="elevatezoom-gallery" data-update="" data-image="images/large/image1.jpg" data-zoom-image="images/large/image1.jpg">
<img src="images/large/image1.jpg" width="100"  />
</a>

<a  href="#" class="elevatezoom-gallery" data-update="" data-image="images/large/image5.jpg" data-zoom-image="images/large/image5.jpg">
<img src="images/large/image5.jpg" width="100"  />
</a>

</div>

jQuery

$("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'crosshair', galleryActiveClass: "active", zoomType: "inner" }); 


var image = $('#gallery_01 a');
var zoomConfig = {  };
var zoomActive = false;

image.on('click', function(){

        $.removeData(image, 'elevateZoom');//remove zoom instance from image

        image.elevateZoom(zoomConfig);//initialise zoom

});

边注

您可能会注意到我已将对图像的所有引用都设置为大文件路径,这是因为在我需要使用此插件的方式中,用户只会上载中等分辨率文件.

Answer 1

不确定这是否是您要求的,但删除缩放的简单解决方案是删除elevateZoom主图像的元素数据并销毁.zoomContainer元素.更新缩放图像元素数据后,您可以重新实例化elementZoom.但是,如果要为zoomContainer图像保持相同的图像高度,则应考虑使用服务器端图像缩放器并渲染它们.

这是我提出的解决方案:

var zoomConfig = {cursor: 'crosshair', zoomType: "inner" }; 
var image = $('#gallery_01 a');
var zoomImage = $('img#zoom_03');

zoomImage.elevateZoom(zoomConfig);//initialise zoom

image.on('click', function(){
    // Remove old instance od EZ
    $('.zoomContainer').remove();
    zoomImage.removeData('elevateZoom');
    // Update source for images
    zoomImage.attr('src', $(this).data('image'));
    zoomImage.data('zoom-image', $(this).data('zoom-image'));
    // Reinitialize EZ
    zoomImage.elevateZoom(zoomConfig);
});

PS由于您提议使用Click事件,您可以看到我删除了elavateZoom图库功能,因为如果不与fancybox一起使用它会做同样的事情.

Answer 2

使用内置库功能,并在每次图像更改时设置zoomContainer的高度.

$("#gallery_01 a").click(function() {
    var myVar = setInterval(function(){ // wait for fading

        var height = $("#zoom_03").css("height");
        $(".zoomContainer").css("height", height);
        $(".zoomContainer .zoomWindow").css("height", height);

        clearInterval(myVar);
    }, 100);
});