图像缩放只在点击缩略图后在灯箱中工作

Image zoom only works in lightbox after thumbnail is clicked

本文关键字：略图 工作 缩放 图像      更新时间：2023-09-26

我有一个图像缩放画廊在一个灯箱，缩放只工作一旦缩略图被点击。变焦需要立即工作。

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

拨动这里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;
    }); 
});

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

$(document).bind('cbox_complete', function(){
    $("#zoom_03f").elevateZoom({...options here...});
});
相关文章：