将点击事件绑定到 jqzoom 以启动 Fancybox

binding a click event to jqzoom to launch fancybox

本文关键字：jqzoom 启动 Fancybox 绑定 事件      更新时间：2023-09-26

所以我已经玩了一段时间了，但无法让绑定的点击事件从 jqzoomed 元素触发。

.HTML： 

<div class="product-clicktozoom-image">
    <div class="product-clicktozoom-image-main">
        <a href="http://example.com/image.jpg" class="jqzoom" title="Image" rel="gall"><img itemprop="image" id="mainimage" src="http://exampe.com/image.jpg" alt="Image" title="Image"/></a>   
    </div>
</div>

.JS：

jQuery(document).load(function() {
    jQuery('#mainimage').bind('click',function(){
            var fancyImage = jQuery('#mainimage').attr('src');              
            jQuery.fancybox.open(fancyImage); 
    });
});

jqzoom 创建了几个额外的div，因此最终的页面结构实际上如下所示：

<div class="product-clicktozoom-image-main">
    <a href="example.com/image.jpg" class="jqzoom" title="" rel="gall" style="outline-style: none; text-decoration: none;">
        <div class="zoomPad">
            <img itemprop="image" id="mainimage" src="http://example.com/image.jpg" alt="Image" title="Image" style="opacity: 1;">
                <div class="zoomPup" style="display: none; top: 105px; left: 145px; width: 126px; height: 126px; position: absolute; border-width: 1px;"></div>
                <div class="zoomWindow" style="position: absolute; z-index: 5001; cursor: default; left: 0px; top: 0px; display: none;">
                    <div class="zoomWrapper" style="border-width: 1px; width: 355px; cursor: crosshair;">
                        <div class="zoomWrapperTitle" style="width: 100%; position: absolute; display: none;"></div>
                        <div class="zoomWrapperImage" style="width: 100%; height: 355px;">
                            <img src="http://example.com/image.jpg" style="position: absolute; border: 0px; display: block; left: -411.26760563380276px; top: -298.5915492957746px;">
                        </div>
                    </div>
                </div>
                <div class="zoomPreload" style="visibility: hidden; top: 156px; left: 132.5px; position: absolute;">Loading zoom</div>
        </div>
    </a>
</div>

我尝试将单击事件与 zoomPad 类以及 zoomWrapperImage 元素中的 img 绑定到 #mainimage，因为当您将鼠标悬停在图像上时，这似乎是顶部元素。

我要做的就是在他们单击缩放时在花哨的框中打开完整图像（目前缩放发生在鼠标悬停时）。我知道fancybox.open（fancyImage）;工作，我可以直接在控制台中成功运行点击函数中的代码，我只是无法让它从点击事件本身触发。

帮助！

最终证明

这非常简单，单击事件需要在 .zoomPad 上绑定，我使用 window.load 代替 （document）.ready，因为这可确保所有元素都已加载。

最终JS：

jQuery(window).load(function() {
    jQuery('.zoomPad').bind('click',function(){
            var fancyImage = jQuery('.zoomWrapperImage img').attr('src');      
            jQuery.fancybox.open([{href : fancyImage}], {closeClick : true}); 
    });
});
相关文章：