动态链接和jQuery Lightbox问题：在Lightbox中加载图片...完全难住！

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

的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%;}

任何帮助将不胜感激！

来源

2010-08-05 Christian Benincasa

可以使用.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要打开的处理程序。

来源

2010-08-05 23:58:10

我应该提到我试过.live（）。谢谢，但我仍然遇到了在创建链接时在新窗口中加载图像的问题。 – 2010-08-06 00:05:49

@Christian - 哦woops，你需要一个预防默认，一个时刻 – 2010-08-06 00:11:08

@Christian - 我更新了这个，虽然fancybox *应该*已经照顾它。 – 2010-08-06 00:12:03

动态链接和jQuery Lightbox问题：在Lightbox中加载图片...完全难住！

回答

相关问题