在 fancybox 中传递数组变量时出错

Question

在我的网站中，我有一个名为图像的链接，我想要的是当用户单击它时，它将使用 fancybox 显示图像库。我使用 name 属性来放置所有图像文件名，然后使用 javascript 来解析它。

我的问题是当使用多个图像时 fancybox 未加载。但如果我对文件名进行硬编码，它就可以工作。我不知道为什么。

这是我的代码。

$(".imageGallery").click(function() {
        var pURL = $(this).attr("name");
        var pID  = "#" + $(this).attr("id");
        var imageList="";
        var arrUrl = new Array();
        var i=0;            

        if (pURL.indexOf(',') != -1)
        {
            arrUrl = pURL.split(',');
            imageList = arrUrl;
        }else {imageList = pURL;}
        alert(imageList);
        $.fancybox([imageList], {
            'autoScale'             : true,
            'autoDimensions'        : true,
            'speedIn'               : 800,
            'speedOut'              : 800,
            'changeSpeed'           : 500,
            'padding'               : 0,
            'centerOnScroll'        : false,
            'type'                  : 'image',
            'transitionIn'          : 'fade',
            'transitionOut'         : 'fade',  
            'showCloseButton'       : true,
            'titlePosition'         : 'outside',
            'hideOnContentClick'    : true,
            'overlayColor'             : '#1b2642',
            'showNavArrows'         : true
        });
    });

Answer 1

ImageList 是一个数组。您需要这样做（尽管为什么在某个东西的 NAME 属性中包含所有 url？）：

if (pURL.indexOf(',') != -1) {
   imageList = pURL.split(',');
}
else {
  imageList = [pURL];
}
alert(imageList);
$.fancybox(imageList, { // no brackets

假设您正在演示页面更新上尝试“manual2”版本

$("#manual2").click(function() {
    $.fancybox([
        'http://farm5.static.flickr.com/4044/4286199901_33844563eb.jpg',
        'http://farm3.static.flickr.com/2687/4220681515_cc4f42d6b9.jpg',
        {
            'href'  : 'http://farm5.static.flickr.com/4005/4213562882_851e92f326.jpg',
            'title' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
        }
    ], {
        'padding'           : 0,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'image',
        'changeFade'        : 0
    });
});

---

：要使用第二种格式，您可以使用 rel 和 title：

$(".imageGallery").click(function() {
  var pURL = $(this).attr("rel");
  var pTitle = $(this).attr("title");
  var arrUrl = (pURL.indexOf(',') != -1)?pURL.split(','):[pURL];
  var arrTitle = (pTitle.indexOf(',') != -1)?pTitle.split(','):[pTitle];
  var imageList = [];
  for (var i=0;i<arrUrl.length;i++) {
    imageList[i] = { "href":arrUrl[i], "title": arrTitle[i] }
  }
  $.fancybox(imageList, {