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

P.S。由于您提议使用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);
});

Answer 3

如果我尝试了解问题：点击小图片后，缩放区域的宽度和高度不得更改。如果是的话，

 imageCrossfade: false,

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

Answer 4

除了FülöpGá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);
        });

Answer 5

您可以直接更改DOM属性：

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

Answer 6

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

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

Answer 7

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

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

Answer 8

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

Answer 9

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

Answer 10

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

点击图库后，可以使用以下代码限制

输出尺寸图像框。

＆＃13;

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

＆＃13;

FROM ElevateZoom官方文档： Image Constrain

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

10 个答案: