使用fanybox rel=group上的一个img和jQuery img src更改

using fancybox rel=group on one img and jQuery img src change

本文关键字：img 一个 jQuery 更改 src rel fanybox group 使用      更新时间：2023-09-26

我有一个非常具体的问题是关于fanybox的。我的标记是这样的:

<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的Array对象中的图像链接

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

看了你的评论，我明白你的意思了。这很奇怪，如果你不知道这段代码，你会觉得有点意外。我假设你只想显示第一个:

<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);
})

这有点复杂，可能会使一些事件处理复杂化，但您确实可以更好地控制加载的图像。你可以把这个改成一次加载两个然后再加载下一个

相关文章：