Question

I’m hacking a Lightbox javascript image plugin to display thumbnails from a gallery on the page. The page has a series of <img> with a class of “gallery-image”. I am gathering them and dropping them into a div in the lightbox overlay named “lb-thumbs”. So I have placed this code into one of the lightbox functions:

var $thumbs = ($(".gallery-image").get());
$lightbox.find('.lb-thumbs').append($thumbs);

It works, but as soon as the lightbox opens, the original images (behind the lightbox overlay) disappear, so that when I close the lightbox, the page’s original html gallery has gone. I know this is happening when the lightbox opens thanks to the browser inspector tool. So there must be something in my code that is making the <img> items disappear. Could it be jQuery get() or append()? I can’t see where this is happening. Can you?

Thanks!
Matt

Answer 1

Seems that .get() method returns a reference to the original array. The .get() is superfluous anyway. Try this:

var $thumbs = $(".gallery-image");
$lightbox.find('.lb-thumbs').append($thumbs);

You can alternately clone the array before assigning it:

var $thumbs = ($(".gallery-image").clone().get());
$lightbox.find('.lb-thumbs').append($thumbs);