8

我正在尝试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>

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

});

边注

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

4

10 回答 10

22

不确定这是否是您要求的，但删除缩放的简单解决方案是删除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 一起使用，它的作用几乎相同。

于 2013-07-15T12:28:01.653 回答
7

使用内置的图库功能并在每次图像更改时设置 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);
});
于 2013-08-14T08:31:12.057 回答
2

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

 imageCrossfade: false,

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

于 2014-07-17T15:12:43.417 回答
1

除了 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);
        });
于 2013-10-02T10:40:26.200 回答
1

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

$('#zoomImage').attr('src', NEW_SMALL_URL)
$('.zoomWindow')[0].style.backgroundImage = ['url(', NEW_BIG_URL, ')'].join('')
于 2013-12-10T11:56:42.367 回答
0

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

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

于 2014-02-27T06:32:54.747 回答
0

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

于 2014-11-21T08:24:22.100 回答
0

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

image.elevateZoom({constrainType: 'width'});
于 2014-10-03T01:46:18.740 回答
0

我正在使用 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 触发器放大隐藏图像”的错误！

于 2016-11-29T11:34:55.907 回答
0

对于那些使用#zoom_03 或类似内容的人

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

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

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

于 2017-02-20T10:44:36.483 回答