动态链接和jQuery Lightbox问题：在灯箱中加载图片......完全难倒！ [英] Dynamic Links and jQuery Lightbox issue : Loading image in lightbox...completely stumped!

问题描述

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

I have a function that dynamically creates links for a photo gallery. The function also produces a larger image as a background image of a div when and thumbnail is clicked on. What I want to do is have a third event, where if the user clicks the enlarged image in the div, the jQuery Fancybox loads an even bigger version of the image being displayed in the div. The problem is that the link for the anchor tag I'm using is created dynamically, and I know that Fancybox parses the HTML when the DOM is ready...unfortunately my function changes the DOM by appending the anchor tag for the full sized image. The help I need is using the Fancybox's options to specify the href attribute for the plugin. I'm sorry that was so long-winded...here's the code.

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 Snippet

HTML Snippet

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

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

Any help would be greatly appreciated!!!

推荐答案

你可以使用 .live（） 事件处理程序， .triggerHandler（） 立即打开灯箱，如下所示：

You can use .live() for the event handler, and .triggerHandler() to immediately open the lightbox, like this:

$("#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 类添加。无论是新绑定还是新绑定，我们都需要触发单击处理程序，这是 fancybox 按顺序监听的内容打开。

This runs .fancybox() on the link, but only if we haven't already run it, which we're tracking with a .fb class addition. Whether it's a new or fresh bind, we need to trigger the click handler, which is what fancybox listens to in order to open.

这篇关于动态链接和jQuery Lightbox问题：在灯箱中加载图片......完全难倒！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！