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 urls（pics），它会起作用。但是当我通过fancybox变量（图片）时，我得到了fancybox错误： - 无法加载请求的内容。 - 请稍后再试。 -

有人可以告诉我我做错了吗？

提前致谢。

Answer 1

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

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

您需要做的是将此类字符串转换为javascript object，以便fancybox可以解析它。有不同的方法来做到这一点。一个是使用eval()函数，但可能存在安全问题，因此不推荐使用此方法。

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

...就在您设置变量pics

的行之后

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

添加此项以将其转换为js对象

pics = jQuery.parseJSON(pics);

这应该可以解决问题。

Answer 2

你可以这样做：

创建一个容器div，其display属性设置为none （display：none）
在此容器内部de img标签
当您在div

单击事件

示例：

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

在js代码上： $（“＃container img”）。fancybox（）;

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

Fancybox：未传递数组变量

2 个答案: