javascript - 单击缩略图后，图像缩放仅适用于灯箱

Question

我在灯箱中有一个图像缩放画廊，只有在单击缩略图后缩放才会起作用。缩放需要立即生效。

如有任何建议，我们将不胜感激。

在这里 fiddle http://jsfiddle.net/mbV3T/3/

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