Fancybox：未传递数组变量

Question

似乎无法做到这一点！

$(".fancy").click(function(event) {
  event.preventDefault();
  var pic = [];
  $('.room-thumbnail').each(function(index) {
      pic.push('\'' + 'http://localhost' + $(this).attr('href') + '\'' );
  });

  var pics = '['+ pic.join(', ')+']';

  console.log(pics);
  // => ['http://localhost/driver/images/produits/denim/sixthjune-7440/sixthjune-7440.jpg', 'http://localhost/driver/images/produits/denim/sixthjune-7440/sixthjune-7440-back.jpg', 'http://localhost/driver/images/produits/denim/sixthjune-7440/sixthjune-7440-closeup1.jpg', 'http://localhost/driver/images/produits/denim/sixthjune-7440/sixthjune-7440-closeup2.jpg']

  $.fancybox(pics, {
          'transitionIn'      : 'elastic',
          'transitionOut'     : 'elastic',
          'overlayColor'      : '#1D1D1D',
          'type'              : 'image',
          'cyclic': true
      });
});

如果我手动输入 href url ( pics )，它就可以工作。 但是当我通过 fancybox 变量（图片）我得到了 fancybox 错误： - 无法加载请求的内容。 - 请稍后再试。 -

谁能告诉我我做错了什么？

提前致谢。

Answer 1

您的代码没有任何问题，但您没有考虑到一些问题：

您的声明var pics = '['+ pic.join(', ')+']'; 正在返回一个fancybox 无法解析的字符串。

你要做的就是把这样的字符串转换成一个javascriptobject，这样fancybox就可以解析它了。有不同的方法可以做到这一点。一种是使用eval()函数，但可能存在安全问题，不推荐使用此方法。

由于您使用的是 jQuery，因此最安全的方法是使用 jQuery.parseJSON( json )

...所以就在你设置变量pics的那一行之后

var pics = '['+ pic.join(', ')+']';

添加 this 以将其转换为 js 对象

pics = jQuery.parseJSON(pics);

这应该可以解决问题。

Answer 2

你可以这样做：

1. 创建一个显示属性设置为无的容器 div (display:none)
2. 在这个容器内放置 de img 标签
3. 当您在 div 内的任意图像上调用函数触发器 单击事件

示例：

<div>
 <img ...></img ...></img ...>
</div>

关于js代码： $("#container img").fancybox();

function call_fancybox(){
$("#container img:first").trigger("click");
}