Question

我在灯箱中有一个图像缩放库，只有点击一个缩略图才能使用缩放功能。变焦需要立即开始工作。

任何建议都将不胜感激。

HTML：

<div style='display:none'>
    <div id='inline_content' style='padding:10px; background:#fff;'>
        <div class="zoom-left" id="inline1" style="width:400px;display: block;">
            <img style="border:1px solid #e8e8e6;" id="zoom_03f"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_01f">
                <a href="#" class="elevatezoom-gallery active" data-update=""
                     data-image="http://www.elevateweb.co.uk/wp-content/uploads/2012/01/dp.gif"
                     data-zoom-image="http://www.elevateweb.co.uk/wp-content/uploads/2012/01/dp.gif">
                    <img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" width="100"  />
                </a>
                <a href="#" class="elevatezoom-gallery"
                     data-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image2.png"
                     data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image2.jpg"
                    ><img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image2.png" width="100"  />
                </a>
                <a href="tester" class="elevatezoom-gallery" 
                     data-image="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">
                     <img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png" width="100"  />
                </a>
            </div>
        </div>
    </div>
</div>

JS：

$(document).ready(function () {
    $('.fancybox').fancybox();
    $(".inline").colorbox({inline:true, width:"50%"});
    $("#zoom_03f").elevateZoom({
        constrainType:"height",
        constrainSize:274,
        zoomType: "lens",
        containLensZoom: true,
        gallery:'gallery_01f',
        cursor: 'pointer',
        galleryActiveClass: "active"
    }); 
    $("#zoom_03f").bind("click", function(e) {  
        var ez = $('#zoom_03f').data('elevateZoom');
        ez.closeAll(); // NEW: This function force hides the lens, tint and window  
        $.fancybox(ez.getGalleryList());     
        return false;
    }); 
});

Answer 1

似乎colorbox会干扰elevateZoom配置。解决这个问题的一种方法是在完成颜色框后初始化缩放插件，如下所示：

$(document).bind('cbox_complete', function(){
    $("#zoom_03f").elevateZoom({...options here...});
});

图像缩放仅在单击缩略图后在灯箱中有效

1 个答案: