Question

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

<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>  

Subsequent 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!!!

Answer 1

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

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.