我正在做一个小项目,我需要用MANUAL CALL实现fanybox,这意味着我提供了一个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 Docs页面上找到的文档,它说你可以像这样将图像列表及其各自的标题传递给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
<<p>看到strong> JSFIDDLE