如何仅在图库

时间:2016-11-15 10:16:01

标签: javascript jquery html css

我有一个画廊,我启用了elevateZoom。此Elevate也可在画廊外使用。如何隐藏图库外的提升缩放。下面是一个简单的代码,正在使用什么。我尝试使用mouseleave,但这似乎不起作用。

(function($){
    $(document).ready(function () {

        $('.rg-image-wrapper').mouseleave(function(){
            $('.zoomContainer').hide();
        });
        $('#zoombtn').on('click', function(){
            if( $('.enabled').length === 0){
                $('.zoomContainer').show();
                $("#zooom").elevateZoom({
                    zoomType: "lens",
                    lensShape : "square",
                    cursor: "crosshair"
                });     
                $(this).toggleClass('enabled');
            } 
            else{
                $(this).toggleClass('enabled');
                $('.zoomContainer').hide();
            }
       });
    });
})(jQuery);  

ElevateZoom的屏幕截图已经过帧。

enter image description here

1 个答案:

答案 0 :(得分:0)

更新:如果我理解正确,你想要图片约束。

DEMO

$("#zoom_01").elevateZoom({constrainType:"height", constrainSize:274, zoomType: "lens", containLensZoom: true, gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: "active"}); 

enter image description here