Fancybox, simple thumbnail gallery, and applying lightbox link and new image src on click

Question

I'm having trouble wrapping my brain around how to apply Fancybox to a thumbnail gallery so that when the main image is loaded, it can be clicked to open up a larger version of that image.

I don't know, words escape me. Here is a concrete example: http://bloc-nc.com/projects/gateway.html

If you switch from one thumb to the other, the large image opened is still of the first image and not of the new one.

My code looks like this:

$('#thumbs').delegate('img','click', function(){                
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});

$('#largeImage').wrap(function() {
    return '<a class="zoom" href="' + $(this).attr('src').replace('large','zoom') + '" />'});

What am I missing? Thank you very, very much in advance!!

Doesn't the `button helper` address your issue? Check http://fancyapps.com/fancybox/#examples ---> Extended functionality ---> Button helper — JFK, Mar 19 '13 at 18:21
My bad, I just saw your link and realized you are using fancybox v1.3.4 ... disregard my comment. — JFK, Mar 19 '13 at 18:29
`be clicked to open up a larger version of that image` : do you mean outside fancybox (another browser tab for instance)? — JFK, Mar 19 '13 at 18:42
Nope, inside fancybox. I basically have three different images. The thumb, the main image, and the zoom image. I want to make it so that when you click on a thumbnail, the main image changes respectively, and then when you click on the main image, the zoom version of the image pops up in the fancybox. They're three files in three different sizes. Does that make more sense? — yulichka, Mar 19 '13 at 19:16

score 1 · Accepted Answer · edited May 23 '17 at 12:04

What about a different approach? ... so instead of using .replace() we'll use .each() to bind the click event to each thumbnail and replace the large image in the #panel container :

$("#thumbs img").each(function (i) {
    $(this).click(function () {
        var imgPanel = '<a href="http://bloc-nc.com/projects/images/gateway/gateway' + (i + 1) + '_zoom.png" class="zoom" tabindex="' + (i + 1) + '"><img src="http://bloc-nc.com/projects/images/gateway/gateway' + (i + 1) + '_large.png" id="largeImage" /></a>';
        $("#panel").html(imgPanel);
    }); // click
}); // each

Notice that we are building the variable imgPanel that actually replaces the number (i+1) of both the zoom image (in the href of the <a> tag) AND the the large image (in the src of the <img> tag)

Then, the content of the <div id="panel"> container is replaced depending on the thumbnail clicked.

On the other hand, it would be easy to use $("a.zoom").fancybox(); to bind fancybox to the link with class="zoom", however you are using fancybox v1.3.4 and that version doesn't support dynamically added elements, see this post for reference.

So we would need to initialize fancybox in a different way to support those dynamic elements (every time we replace the large image, we change the link .zoom dynamically)

This script should do the trick :

$(".gallery").delegate("#panel", "focusin", function () {
    $("a.zoom").fancybox();
});

Notice that we are using .delegate() instead of .on() as in the post of reference because you are using a jQuery version lower than v1.7.x

So, altogether

$(document).ready(function () {
    $("#thumbs img").each(function (i) {
        $(this).click(function () {
            var imgPanel = '<a href="http://bloc-nc.com/projects/images/gateway/gateway' + (i + 1) + '_zoom.png" class="zoom" tabindex="' + (i + 1) + '"><img src="http://bloc-nc.com/projects/images/gateway/gateway' + (i + 1) + '_large.png" id="largeImage" /></a>';
            $("#panel").html(imgPanel);
        }); // click
    }); // each
    // initialize fancybox for dynamically added elements
    $(".gallery").delegate("#panel", "focusin", function () {
        $("a.zoom").fancybox();
    });
}); // ready

See JSFIDDLE

This is great, JFK, thank you! I'm going to experiment with getting the lightbox initialized before the user clicks in the #panel, but other than that, this kind of new thinking is exactly what I needed. Seriously, thank you so much! — yulichka, Mar 20 '13 at 14:33

Fancybox, simple thumbnail gallery, and applying lightbox link and new image src on click

1 Answers1