Question

我遇到了fancybox的非常具体的问题。我的标记看起来像这样：

<a id="fancy_link" class="fancybox" href="image.jpg" rel="group"> 
  <img id="image" src="image.jpg" style="height: 500px;">
</a>

到目前为止，它是一张工作正常的图像。但是因为我有很多图像（200）我想要分组，并且不想使用简单的jQuery函数在标记中对它们中的每一个进行硬编码：

function changeImg(e, f) {
  $('#fancy_link').attr('href', e[f].img);
  $("#image").attr('src', e[f].img);
}

e和f是保存在数组对象名称.img

中的图片链接

所以现在我的问题是，如果你知道如何处理它，即使标记中只有一个<img>元素，fancybox也会创建组元素，当我点击prev和时，它会遍历所有图像下一个带有fancybox的按钮。

Answer 1

在你的一条评论之后，我明白了你的意思。如果您不了解此代码并进行调查，那将会很奇怪。我想你只想显示第一个：

<div>
   <img src="1.jpg" alt="img1" rel="group1" />
   <img src="2.jpg" alt="img2" rel="group1" />
   <img src="3.jpg" alt="img3" rel="group1" />
   <img src="4.jpg" alt="img4" rel="group1" />
   <img src="5.jpg" alt="img5" rel="group1" />
</div>


div img{ display: none; }
div img:nth-child(1){ display: inline-block;}

此代码对其他用户有更多意义。这里的专业是所有的图像都会预先加载。这里的骗局是所有图像都会预先加载（我知道，加倍）。你有大量的图像，可以从用户的带宽中获取。

如果所有路径都位于数组中的图像顶部，则可以执行以下操作：

$.each(imageArr, function(key,image){
    $img = $( document.createElement('img') );
    $img[0].src = image.img; // img is the key in the object
    $('div').append($img);
})

这有点复杂，可能会使某些事件处理复杂化，但您可以更好地控制加载的图像。您可以将其更改为一次加载两个，然后执行下一个

的操作

在一个img和jQuery img src上使用fancybox rel = group更改

1 个答案: