jQuery 针对不同大小的图像提升缩放调整缩放窗口

Elevate Zoom adjust zoom window for different sized imagery

提问by Doidgey

I'm trying out Elevate Zoomand I've got a slightl problem i need some help with.

我正在试用Elevate Zoom，但有一个小问题需要帮助。

Basically as you will see from the DEMOi've setup, i am trying to find out if there is way to reinitialize the plugin when you click on a thumbnail or reset the data so that for taller images (the photo of the tower), the zoom window isn't using the dimension of the first image. (which i gather from what i can find out that it is doing)

基本上，正如您从我设置的DEMO 中看到的那样，我试图找出当您单击缩略图或重置数据时是否有办法重新初始化插件，以便获得更高的图像（塔的照片），缩放窗口不使用第一张图像的尺寸。（我从我能发现它正在做的事情中收集到的）

Unfortunately i don't have the power to make the people using this format their images properly, so accounting for various heights of imagery is needed. Can it be done?

不幸的是，我没有能力让人们正确使用这种格式的图像，因此需要考虑图像的各种高度。可以做到吗？

My Code, based on the demo file for the moment

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

<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

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

});

Side note

边注

You might notice that I've made all the references to the images to the large file path, this is because in the way i need to use this plugin, the user will only be uploading a medium resolution file.

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

回答by Egils

Not sure if this is what you asked for but a simple solution to remove zoom is by removing element data elevateZoomfor the main image and destroy .zoomContainerelements. After updating zoom image element data you can re-instantiate elementZoom. However, if you want to keep the same image height for zoomContainer images you should consider having server-side image resizer and render them.

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

Here's a solution that I came up with:

这是我想出的解决方案：

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

P.S.Since you proposed using Click event, you can see I removed elavateZoom gallery functionality because it does pretty much a same thing if not used together with fancybox.

PS因为你提议使用 Click 事件，你可以看到我删除了 elavateZoom 画廊功能，因为如果不与fancybox一起使用，它几乎可以做同样的事情。

回答by Gabor

Use the built in gallery function and set the height of zoomContainer at every image change.

使用内置的画廊功能并在每次图像更改时设置 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);
});

回答by Ilya Slyisarenko

If I tryly understand problem: width and height in zoom area must not changes after clicking on small images. If so,

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

 imageCrossfade: false, 

worked for me - image in zoom area preserve dimensions as I set for #zoom_03 in stylesheet.

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

回答by Andrew

In addition to Fül?p Gábors excellent answer, you can also set widths to get complete dimension resizing. This worked for me.

除了 Fül?p Gábors 出色的答案外，您还可以设置宽度以获得完整的尺寸调整。这对我有用。

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

回答by mistercx

You can change DOM attributes directly like this:

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

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

回答by akelya

i have some alternative plugins for your needs, if you need read here.

如果您需要在此处阅读，我有一些替代插件可以满足您的需求。

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

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

回答by Vladimir Nikolsky

I found beautiful solution! Add this option to your config: constrainType: 'width'

我找到了漂亮的解决方案！将此选项添加到您的配置中：constrainType: 'width'

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

回答by lslab

Sometime setInteval doesn't work. so I change code based on @Gábor. this worked for me.

有时 setInteval 不起作用。所以我根据@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); }); });

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

回答by Sliq

I'm using lightSlider image gallery to trigger elevateZoom, only on the currently active slide, might be useful for this scenario too:

我正在使用 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();
}

});

Works perfectly and avoids the "elevateZoom triggers zoom on hidden images"-bug!

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

回答by Edwardhk

For those who are using #zoom_03 or something similar

对于那些使用#zoom_03 或类似的东西的人

Size of outputimage box can be limited after gallery is clickedusing the following code.

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

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

FROM ElevateZoom offical documentation:Image Constrain

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