1

我已经使用 jQuery 工具实现了一个简单的可滚动照片库。
然后我将自动滚动行为附加到 jQuery 工具滚动器以创建照片幻灯片。
然后我将 jQuery 颜色框附加到照片幻灯片中，以提供更大版本的图像。

我遇到了以下问题。我希望我能用最好的方式解释它们，因为有时行为是不可预测的。

主要问题是当我停止幻灯片并单击图像以显示颜色框或下一个/上一个按钮时，幻灯片会再次开始。有没有办法禁用这种行为？

另一个问题是，当我单击颜色框时，它看起来像有 9 个图像而不是 7 个。您可以通过单击照片并在照片的缩放版本的右上角看到颜色框生成的索引来看到这一点。
为什么会这样？我找不到解释。

最后，最烦人的部分已经发生了两次，我无法重现是，当您打开和关闭颜色框时，jQuery 工具在某些时候可滚动，它会弄乱索引并滚动一个额外的步骤，导致一张不存在的空白照片.. 这个也弄乱了左下角的当前照片编号的显示 - 导航。

我知道这两个库不一定要一起工作，但是我在这里发布了这些问题，以防有人做过相同或相关的脚本。
任何帮助将不胜感激。

Javascript代码： 

$("#gallery").scrollable({circular:true}).autoscroll({autoplay:true});
var api = $("#gallery").data("scrollable");
var indd = api.getIndex();

api.onSeek(function() {
    $("#cur-p").html(parseInt(api.getIndex()+1));
    $("#tot-p").html(api.getSize());
});

$("#slid").toggle(function() {
        api.stop();
        $(this).html("SLIDESHOW ON");
        return false;
    }, function() {
        api.play();
        $(this).html("SLIDESHOW OFF");
        return false;
    }

);

$("#cur-p").html(parseInt(api.getIndex()+1));
$("#tot-p").html(api.getSize());

$("a[rel=color-box]").colorbox();

* 更新* 到目前为止，我已经设法找出其中一种奇怪的行为。
Colorbox 显示的总图像数超过了总图像数。这是因为它是在自动滚动插件之后调用的。当循环属性打开时，自动滚动会在开始前和结束后创建 2 个额外的 div。因此 colorbox 找到它们并将它们添加到方程中。

如果我根本不调用自动滚动，颜色框就可以正常工作。
所以一个解决方案是这样调用颜色框： 

$("#gallery").scrollable().find("a[rel=color-box]").colorbox();

当 colorbox 完成加载后，将自动滚动插件应用到画廊。但是我不确定如何在已经创建的可滚动实例上应用自动滚动。

4

0 回答 0