多jQuery的幻灯片1页

我有什么是一堆集，我想显示所有在一个页面上的图像（如专辑）的。因此，我为每个专辑提供了一个包含单个缩略图的框，并使用jquery展开该框并将该缩略图替换为该专辑的所有图像的幻灯片。

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

jQuery的周围插入所有幻灯片一个“slideInner”分区，以便将它们刷到一边，这就是问题所在。因为有页面上的幻灯片的多个实例，它环绕所有的div都有类“幻灯片”，而不仅仅是那张专辑的所有div，有效地将所有图像拖入一张专辑的幻灯片，并留下任何其他的空白页。

HTML由PHP生成，所以虽然我可以添加独特的类各幻灯片，我不一定知道值

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

1.）'slideInner'div的宽度现在计算得太宽，因此它仍然允许您移动该位置，即使只有x''幻灯片div。当你缩放框背下来，然后重新打开它

2）奇怪的事情发生。我假设这是因为幻灯片功能现在已经在同一个元素上被调用两次了。盒子关闭时，我将如何终止/重置功能？

来源

2011-03-27 biggles

我想你应该只创建一个函数来初始化不同的专辑，并给它的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这不是对所有专辑另一种解决方案。可能更好地向可见图像添加类，并以这种方式跟踪选择哪个（并获得哪个索引是幻灯片列表）。

来源

2011-03-27 18:29:57

我想我会调用该函数从该'.galleryimage-box'点击功能之内。那么如何将id变量传递给函数呢？我正在使用PHP自动生成一个基于专辑名称的最外层包装的ID。 – biggles 2011-03-27 19:00:21

我更新了答案..希望它更清楚一点。 – 2011-03-27 20:20:09

我使用id参数创建了函数，并在单击该框时调用它。它现在只包含指定ID中的那些幻灯片div。我也把这些全局变量放在函数中。仍然存在一个问题，即.slideInner div宽度计算过大。不知道那里发生了什么。有任何想法吗？ – biggles 2011-03-28 00:50:58

多jQuery的幻灯片1页

回答

相关问题