在响应式图像上升降

时间:2015-06-04 08:04:45

标签: jquery jquery-plugins image-zoom

我使用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。但如果我改变浏览器尺寸,内部变焦就不会改变。

3 个答案:

答案 0 :(得分:0)

通过删除数据并将其添加到$(&#34; .active-zoom&#34;),这对我有用:

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

     }

答案 1 :(得分:0)

这对我有用:

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

答案 2 :(得分:0)

我尝试了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);
    });