Question

I’m working on a school project in Visual studio 2010.

I’m trying to make a page with many image-thumbs. When I click one of these thumbs I want them to appear in fancybox. The thing is, the client is supposed to be able to upload more images. So I figured I’d let my javascript print the thumbs and images with an array.

This is the Javascript that loads the images in an <a>:

var divbilder;
var bildenavn = ["img/Media/3.jpg", "img/Media/4.jpg"];
var bildethumb = ["<img src='img/Media/3_thumb.jpg' alt='' />", "<img src='img/Media/4_thumb.jpg' alt='' />"];

window.onload = init;

function init() {

divBilder = document.getElementById("divBilder");
genererBilder();
}

function genererBilder() {
for (var i = 0; i < bildenavn.length; i++) {
    var nyttBilde = document.createElement("a");
    nyttBilde.className = "grouped_elements";
    nyttBilde.rel="group1";
    nyttBilde.href = bildenavn[i];
    nyttBilde.innerHTML = bildethumb[i];
    divBilder.appendChild(nyttBilde);
}
}

So far so good, the images are loaded perfectly into my site.

But they wont appear in fancyBox when I click them, I get the image in a blank page.

Here is my code for FancyBox:

    $(document).ready(function () {
     $("a.grouped_elements").fancybox();

});

However, I did try to put this code:
<a class="grouped_elements" rel="group1" href="img/Media/3.jpg"><img src="img/Media/3_thumb.jpg" alt=""/></a>
into my html. Then the fancybox works perfectly.

In other words, i have all the fancyBox files needed in the head-tag and so on.

Other notes you might need: When i “inspect element” in Chrome, my javascript has made codelines that is identical to the one I manually put in my html. With different href and src inside the <a> of course.

I am using ASP.net c# with MasterPage.

Any help at all appreciated, I’m kinda new to Jquery and javascript so be kind 🙂

Answer 1

The only reason I can think this is happening is because you are using fancybox v1.3.x.

If the above is correct, fancybox v1.3.x doesn’t support dynamic added elements and this why your hard-coded link works only but not those generated by your js.

I wrote a workaround using jQuery .on() method that you can find here

You may need to tweak the code to match your own structure like

$("#divBilder").on("focusin", function(){ ....