Fancybox Internet Explorer问题

Question

I'm working on a small project and I need to implement Fancybox with MANUAL CALL, meaning I supply the list of images with a JSON list. (not sure if this is the correct name of the list)

The code looks like:

$("#big_img a").click(function(e) {
        e.preventDefault();

        jsonObj = [];
        var act_index;

        $(".gal_thumb").each(function(index) {
            var title = $(this).attr('alt');
            var href = $(this).attr('data-image');

            if(href == $("#img_01").attr('src')) {
                act_index = index;
            }
            item = {}
            item ["title"] = title;
            item ["href"] = href;

            jsonObj.push(item);
        });

        $.fancybox(
            jsonObj,
            {
                'index': act_index
            }
        );
    });

EDIT

I paste the HTML as well, which is the following:

<div id="big_img">
    <a href="#">
        <img id="prod_img_magnify" src="..." alt="" />
        <img id="img_01" src="..." data-image="..." alt="" />
    </a>
</div>
<div id="prod_thumbs">
    <a href="#">
            <img class="gal_thumb" src="..." data-image="..." alt="" />
    </a>
    <a href="#">
        <img class="gal_thumb" src="..." data-image="..." alt="" />
    </a>
</div>

However it works fine on Mozilla and Chrome, it fails in IE even on my Lumia 520.

Can anyone have a input on what should I change to solve this IE problem? Many thanks!

EDIT #2

Based upon the documentation found on the Fancybox Docs page, it says that you can pass the list of images and their respective title to fancybox like this:

$.fancybox([{
    href: 'img1.jpg',
    title: 'Title'
}, {
    href: 'img2.jpg',
    title: 'Title'
}]);

If I pasted it manually in IE it worked. As I replaced manual list with jsonObj, it didn't work in IE.

Question : is: this way I construct the JSON object correct and parseable by all browsers?

Is this method correct?

item = {}
item ["title"] = title;
item ["href"] = href;

jsonObj.push(item);

Answer 1

Is this method correct?

item = {}
item ["title"] = title;
item ["href"] = href;

jsonObj.push(item);

No, it's not. To correctly build your variable items from data in your html and push them into the array use this format :

var jsonObj = [];
jQuery(document).ready(function ($) {
    $(".gal_thumb").each(function (i) {
        var item = {
            href: $(this).data("image"),
            title: this.alt
        };
        jsonObj.push(item);
    }); // each
    $.fancybox(jsonObj, {
        // API options
        index: 1 // the second image
    });
}); // ready

See JSFIDDLE