我有一个动态创建照片库链接的功能。当单击缩略图时,该功能还会生成较大的图像作为div的背景图像。我想要做的是有第三个事件,如果用户点击div中的放大图像,jQuery Fancybox会加载div中显示的更大版本的图像。问题是我正在使用的锚标签的链接是动态创建的,我知道当DOM准备就绪时Fancybox会解析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%;}
任何帮助都将非常感谢!!!
答案 0 :(得分:3)
您可以使用.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
监听以便打开的处理程序。