Fancybox image gallery doesn't work

Question

I'm trying to do a Fancybox image gallery. I have a function that takes a list of image URLs and appends them to the DOM like so

function handleImageURLs(imageURLs) {
  var appendString = "";

  //Create an <a> tag for each image URL
  for(var i = imageURLs.length - 1; i >= 0; i --) {
    appendString += "<a href='"+ imageURLs[i] +"' rel='img_preview'><img src='"+ imageURLs[i] +" />'</a>";
  }

  //Add the <a> tags containing images to the <body> element
  $("body").append(appendString);

  //Select the image <a> tags and call Fancybox
  $("a[rel='img_preview']").fancybox({
    onCleanup: function() {
      //do cleanup stuff, remove images, etc.
    }
  });
}

Everything works fine. The <a> tags get added to the DOM. But Fancybox doesn't open at all. And doesn't throw any errors. Any idea what I'm doing wrong?

Are you certain your `$("a[rel='img_preview']")` selector contains elements (i.e. isn't empty)? — Colin Brock, Jul 11 '12 at 19:29
Yes. Definitely not empty. I've also tried giving my `` tags the same class and selecting them using the class (as shown on the Fancybox [howto](http://fancybox.net/howto) page) — Jay, Jul 11 '12 at 19:41

score 0 · Accepted Answer · edited May 23 '17 at 12:29

0

Used a combination of this and triggered a click event on the image that I wanted to display.

edited May 23 '17 at 12:29

Community

1
1

answered Aug 04 '12 at 00:20

Jay

3,471
4
35
49

Fancybox image gallery doesn't work

1 Answers1