Question

我所拥有的是一堆图像（如专辑），我希望在一个页面上显示所有图像。因此，每个专辑都有一个带有单个缩略图的框，并使用jquery展开框，并用该幻灯片中所有图像的幻灯片替换缩略图。

<div class="slideshowContainer">
  <div class="slide"><img /></div>
  <div class="slide"><img /></div>
</div>

jquery在所有幻灯片周围插入一个'slideInner'div，以便将它们滑到一边。这就是问题所在。由于页面上有多个幻灯片显示实例，它会用类包装所有div '幻灯片'而不仅仅是该专辑的幻灯片，有效地将所有图片拉入一张专辑的幻灯片中，并将其他任何专辑留空。

HTML是由PHP生成的，所以虽然我可以为每个幻灯片添加一个唯一的类，但我不一定知道它的价值。

编辑：我更新了代码，在单击时将幻灯片脚本调用为函数，并在点击的元素上使用$ this收集该元素的php生成的id。幻灯片现在只识别该专辑的正确图像，但现在有2个新问题：

1。）'slideInner'div的宽度现在计算得太宽，所以它继续允许你移动位置，即使只有x个'slide'div。

2。）当您将盒子缩小然后重新打开时会发生奇怪的事情。我假设这是因为幻灯片功能现在已在同一元素上调用两次。盒子关闭后如何终止/重置功能？

Answer 1

我认为您应该创建一个初始化不同相册的功能，并将其ID设为仅选择所需的幻灯片。

 function initAlbum(id){   
    var slides = $('#'+id+' .slide');
    var numberOfSlides = slides.length;

    // Remove scrollbar in JS
    $('.slideshowContainer').css('overflow', 'hidden');

   // Wrap all .slides with #slideInner div
   slides.wrapAll('<div class="slideInner"></div>')....

并且在文档就绪时执行类似

的操作

$(".galleryimage-box").each(function(index, element){
    initAlbum(element.id);
});

但是你还需要找到变量currentPosition的另一个解决方案，其中所有专辑都不是全局的。可能更好的方法是在可见图像中添加一个类，然后跟踪哪个被选中（并且还获得它是幻灯片列表的索引）。

1页上有多个jQuery幻灯片

1 个答案: