Fancybox Internet Explorer问题

debugcn 发表于 Dev

用户名

我正在做一个小项目，我需要使用MANUAL CALL来实现Fancybox，这意味着我为图像列表提供了JSON列表。（不确定这是否是列表的正确名称）

代码如下：

$("#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
            }
        );
    });

编辑

我也粘贴了HTML，如下所示：

<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>

但是，它在Mozilla和Chrome上运行良好，即使在我的Lumia 520上，在IE中也无法运行。

任何人都可以提出解决该IE问题的建议吗？非常感谢！

编辑＃2

根据在“ Fancybox文档”页面上找到的文档，它说您可以将图像列表及其各自的标题传递给fancybox，如下所示：

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

如果我手动将其粘贴到IE中，它将起作用。当我用jsonObj替换手动列表时，它在IE中不起作用。

问题：是：这样，我构造的JSON对象就可以被所有浏览器正确和解析了吗？

这种方法正确吗？

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

jsonObj.push(item);

肯尼迪

这种方法正确吗？

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

jsonObj.push(item);

不，这不对。要从html中的数据正确构建变量项并将其推入数组，请使用以下格式：

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

参见JSFIDDLE

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。