如何让jQuery Fancybox接受我的对象作为有效的开放参数?
我有一些这种格式的HTML:
我想逐步完成并将它提供给像这样的 Fancybox。
我已经达到了这个目标,但它直接起作用了:
downloadList = $('#logos ul li a'); var downloadArray = {}; downloadJSON = ''; $.each(downloadList, function(d) { var download = $(this); var href = download.data('image'); var title = download[0].innerText; var link = download[0].href; downloadArray[d] = {}; downloadArray[d].href = href; downloadArray[d].title = ""+title+""; downloadJSON += JSON.stringify(downloadArray[d])+','; }); downloadJSON = downloadJSON.slice(0, -1); $.fancybox.open([downloadArray]);
downloadJSON给了我:
{"href":"images/toolkit/logos/one.jpg","title":"First Logo"},{"href":"images/toolkit/logos/two.jpg","title":"Second Logo"},{"href":"images/toolkit/logos/three.jpg","title":"Third Logo"}
JSON.stringify-downloadArray对象给了我:
{"0":{"href":"images/toolkit/logos/one.jpg","title":"First Logo"},"1":{"href":"images/toolkit/logos/two.jpg","title":"Second Logo"},"2":{"href":"images/toolkit/logos/three.jpg","title":"Third Logo"}}
任何帮助,将不胜感激。
links = []; $('#logos ul li a').each(function() { links.push({ href: $(this).attr('data-image'), title: ""+$(this).html()+"" }); }); //JSON.stringify(links); $.fancybox.open(links);
根据@Adrian的回答,我的答案是:
为了根据所选链接下载(在fancybox中显示)正确的徽标,我们使用API选项index
如下面的调整扩展代码:
links = []; $('#logos ul li a').each(function (indx) { // Adrain's code tweaked links.push({ href: $(this).data('image'), title: "" + $(this).html() + "" }); // extended to catch click on links $(this).on("click", function (e) { e.preventDefault(); $.fancybox.open(links, { index: indx // starts gallery with index of the clicked link }); }); }); //JSON.stringify(links); //$.fancybox.open(links); // would open fancybox on page load
请参阅JSFIDDLE