动态链接和 jQuery 灯箱问题：在灯箱中加载图像...完全难倒！

Question

我有一个为照片库动态创建链接的功能。当点击缩略图时，该函数还会生成一个更大的图像作为 div 的背景图像。我想要做的是有第三个事件，如果用户单击 div 中的放大图像，jQuery Fancybox 会加载更大版本的图像在 div 中显示。问题是我正在使用的锚标记的链接是动态创建的，并且我知道 Fancybox 在 DOM 准备好时解析 HTML……不幸的是，我的函数通过为全尺寸图像附加锚标记来更改 DOM .我需要的帮助是使用 Fancybox 的选项来指定插件的 href 属性。很抱歉，这太啰嗦了……这是代码。

jQuery:

function gallery(picid, picnum){
var ext = 'jpg';
var fullSize = 'imgs/'+picid+'_full.'+ext;
$('#photolarge').css("background", 'url(imgs/'+picid+'_large.'+ext+') no-repeat');
$('#photolarge a').attr(
    {   href: fullSize
        //rel: 'lightbox',  
    }
    );

$("#lightboxlink").click(function(){
    $('#lightboxlink').fancybox({
        'autoDimensions' : false,
        'width' : 'auto',
        'height' : 'auto',
        'href' : fullSize
        });


    });




return false;

}

HTML 片段

<div id="photolarge">
   <a id="lightboxlink" href="#"></a>
</div>
        <div id="phototable">
            <ul id="photorow1">
                <li><a onclick="gallery('bigsun',1)"><img id="sun" src="imgs/bigsun.jpg" /></a></li>
            </ul>
        </div>  

后续 CSS：

#photolarge {
width: 590px;
height: 400px;
margin-left: 7px;
border: 2px solid;
background: none;}

#phototable {
width: 590px;
height: 300px;
border: 2px solid;
margin: 10px 0 0 7px;}

#phototable img {
cursor: pointer;}

#phototable ul {
list-style: none;
display: inline;}

#phototable li {
padding-left: 10px;}

#lightboxlink {
display: block;
height: 100%;
width: 100%;}

任何帮助将不胜感激！！！

Answer 1

您可以使用.live() 作为事件处理程序，并使用.triggerHandler() 立即打开灯箱，如下所示：

$("#lightboxlink").live('click', function(e){
    $(this).filter(':not(.fb)').fancybox({
        'autoDimensions' : false,
        'width' : 'auto',
        'height' : 'auto',
        'href' : fullSize
     }).addClass('fb');
     $(this).triggerHandler('click');
     e.preventDefault(); //prevent opening in new window
});

这会在链接上运行.fancybox()，但前提是我们还没有已经运行它，我们正在通过添加.fb 类来跟踪它。无论是新绑定还是新绑定，我们都需要触发click 处理程序，这是fancybox 监听以便打开的。