在响应式图像上升降

Posted 2021-04-24

我正在使用this plugin来缩放我的图像。

我的网站是响应式的，我尝试使内部缩放响应，但它不起作用。如果我让我的窗口变小，那么内部变焦会保持很大。

<div class="img_container">
    <img id="image1" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSiDXrY6NqEuhZ8yYdpKjAGC9AVQtAL84ldgSmNx71mQoB-TQRW" class="image1">
</div>

$('#image1').elevateZoom({
    responsive : true,
    borderSize : 1,
    borderColour : '#ccc',
    zoomType : 'inner',
    cursor: 'crosshair'
});

.img_container {
    width: 100%
}
.image1 {
    min-width: 100%;
    display: block;
    max-width: 100%;
    height: auto;
}

实际上，现在我看到插件响应但只在加载时。如果我在浏览器宽度为320px时刷新页面，则内部缩放将为320px。但如果我改变浏览器大小，内部缩放将不会改变。

答案

通过删除数据并将其添加到$（“。active-zoom”），这对我有用：

var $zoomImg = $(".active-zoom");

         zoomConfig = { gallery:'thumbnails', 
                        cursor: 'inherit', 
                        galleryActiveClass: 'active', 
                        imageCrossfade: true, 
                        zoomWindowFadeIn: 500,
                        zoomWindowFadeOut: 500,
                        lensFadeIn: 500,
                        lensFadeOut: 500,
                        borderSize:0,
                        zoomType:'inner',
                        containLensZoom: 1,
                        responsive:true
}

$zoomImg.elevateZoom(zoomConfig); 

$(window).resize(function(){

        var height = $zoomImg.height();

        $(".zoomWrapper").css("height", height);
        $(".zoomContainer .zoomWindow").css({"height": height});

        $zoomImg.removeData('elevateZoom');
        $('.zoomContainer').remove();

        setTimeout(function() {

            $(".active-zoom").elevateZoom(zoomConfig);

            }, 90)

});

CSS：

img.active-zoom {

        height: auto !important;
        width: 100% !important

     }

另一答案

这对我有用：

$(document).ready(function(){
    $(".item-image").elevateZoom({
        zoomType: "inner",
        cursor: "crosshair",
        easing: true,
    });

    $(window).resize(function(e){
        $('.zoomContainer').remove();
        $(".item-image").elevateZoom({
            zoomType: "inner",
            cursor: "crosshair",
            easing: true,
        });
    }); 
)};

另一答案

我尝试了kieran解决方案，但不适合我，我使用它

html

<div class="productoImage">
    <h2><p>Titulo</p></h2>
    <img id="imagenPrincipal"/>
</div>

JS

function setPrincipalImage(imageURL){
        $("#imagenPrincipal").remove();
        $(".zoomContainer").remove();
        var img = $('<img/>');

        img.attr('id','imagenPrincipal');
        img.attr('src',String(imageURL));
        img.attr('data-zoom-image',String(imageURL));

        $('.productoImage').append(img);

         /*ElevateZoom*/
        $("#imagenPrincipal").elevateZoom({
            zoomType: "inner",         
            cursor: "crosshair" ,
            zoomWindowFadeIn: 350,
            zoomWindowFadeOut: 350
        }); 
    }

    $(window).resize(function(){
        var src = $("#imagenPrincipal").attr('src');
        setPrincipalImage(src);
    });