提高缩放调整缩放窗口以适应不同尺寸的图像

Question

我正在尝试使用Elevate Zoom，但是我遇到了一个小问题，需要帮助。

基本上，正如您从我设置的演示中看到的那样，我正在尝试找出是否有一种方法可以在单击缩略图或重置数据时重新初始化插件，以便对于更高的图像（如塔的照片），缩放窗口不会使用第一张图像的尺寸。（根据我所能发现的信息，它正在执行此操作）

不幸的是，我没有权利要求人们适当地格式化他们的图像，因此需要考虑各种高度的图像。这可以做到吗？

我的代码，目前是基于演示文件

<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>

The 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

});

旁注

你可能会注意到，我将所有对图像的引用都指向大文件路径，这是因为在我需要使用此插件的方式中，用户只会上传中等分辨率的文件。

- Gerico

Answer 1

不确定这是否是您要求的，但一个简单的解决方案是通过移除主图像元素数据elevateZoom和销毁.zoomContainer元素来移除缩放。在更新缩放图像元素数据后，您可以重新实例化elementZoom。然而，如果您想保持相同的缩放容器图像高度，您应该考虑使用服务器端图像调整大小并呈现它们。

以下是我想出的一个解决方案：

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

附言：由于您建议使用点击事件，因此您可以看到我删除了elavateZoom图库功能，因为如果不与fancybox一起使用，它几乎会执行相同的操作。

- Egils

---

我卡在这个问题上大约两天，最终找到了答案。（+1 感谢） - Sharif

谢谢@Eglis - 忘记了我很久以前从未写过那个！ - Gerico

谢谢，这很好用。我之前使用了swaptheimage和高度不同的图片，但效果并不好。这个解决了我的问题。 - Caroline Schnapp

对于其他可能会遇到这个问题的人，你还应该删除zoomImage数据，像这样：img.removeData('zoomImage'); 参见这里：链接 - Michael Sobczak

甜甜的:D - DreamTeK

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

- Gabor

Answer 3

如果我正确理解问题：在缩放区域中，单击小图像后宽度和高度不应更改。如果是这样的话，

 imageCrossfade: false, 

对我有用 - 在缩放区域内的图像保留我在样式表中为#zoom_03设置的尺寸。

- Ilya

Answer 4

除了Fülöp Gábor的优秀回答之外，您还可以设置宽度来实现完整的尺寸调整。这对我很有用。

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

                var height = $(".zoom_01").css("height");
                var width = $(".zoom_01").css("width");
                $(".zoomContainer").css("height", height);
                $(".zoomContainer").css("width", width);
                $(".zoomContainer .zoomWindow").css("height", height);
                $(".zoomContainer .zoomWindow").css("width", width);

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

- Andrew

Answer 5

您可以直接像这样更改DOM属性：

$('#zoomImage').attr('src', NEW_SMALL_URL)
$('.zoomWindow')[0].style.backgroundImage = ['url(', NEW_BIG_URL, ')'].join('')

- mistercx

Answer 6

我正在使用lightSlider图库来触发elevateZoom，仅在当前活动幻灯片上，这对于此场景也可能很有用：

$('#image-gallery').lightSlider({

onSliderLoad: function() {
    $('#image-gallery').removeClass('cS-hidden');
    $('.lslide.active img').elevateZoom();  
},
onBeforeSlide: function () {
    $('.zoomContainer').remove();
    $('.lslide.active img').removeData('elevateZoom');
},
onAfterSlide: function () {
    generateZoomOnImage($(currentlyVisibleSliderImageSelector));
    $('.lslide.active img').elevateZoom();
}

});

完美运作，避免了“elevateZoom触发隐藏图像缩放”的错误！

- Sliq

---

亲爱的Stackoverflow用户们，经过7年的时间，仍然无法将整个代码块移动1个制表符... - Sliq

Answer 7

我找到了一个很好的解决方案！将以下选项添加到您的配置中：constrainType: 'width'。

image.elevateZoom({constrainType: 'width'});

- Vladimir Nikolsky

Answer 8

有时setInterval不起作用。所以我根据@Gábor的代码进行了更改，这对我有效。 $("#gallery_01 a").click(function() { $(#zoom_03).on("load",function() { var height = $("#zoom_03").css("height"); $(".zoomContainer").css("height", height); $(".zoomContainer .zoomWindow").css("height", height); }); });

- lslab

Answer 9

对于那些正在使用#zoom_03或类似的人

图库被点击后，可以使用以下代码限制输出图像框的大小。

$("#zoom_03").elevateZoom({constrainType:"height", constrainSize:274})

来自ElevateZoom官方文档： 图像约束

- Edwardhk

Answer 10

我有一些适合你需求的替代插件，如果需要可以在这里阅读。

http://kvcodes.com/2014/02/jquery-plugins-for-containerdiv-zoom/

- akelya

---

谢谢分享，我会看一下 :) - Gerico