Question

我有一个动态创建照片库链接的功能。当单击缩略图时，该功能还会生成较大的图像作为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%;}

任何帮助都将非常感谢!!!

Answer 1

尝试这个并查看它是否有效，这只是一个奇特的盒子，但你的其余代码似乎很好

$("#lightboxlink").live('click', function(){

    $.fancybox({
        'autoDimensions'  : false,
        'width'           : 'auto',
        'height'          : 'auto',
        'href'            : $(this).attr('href')
    });
    return false;
});

帮助jQuery .live（）方法

1 个答案: