javascript - 如何使用 fancyBox 创建幻灯片？

Question

我在http://www.spanish-bookworld.com/fancybox_demo.html创建了两个图片库

当鼠标未悬停时，图像上缺少“下一步”按钮，这让我很担心。我的观众非常不识电脑，他们中的大多数人不会看到画廊中有更多的图像。

我想我有两个选择。一个是在图像上永久设置一个下一步按钮，另一个是幻灯片。

不幸的是，我无法弄清楚如何编写这两种解决方案。

有什么线索吗？谢谢。

Answer 1

正如fancybox 文档在其按钮示例（http://jsfiddle.net/Xh3B2/）中所述，您应该尝试将fancybox navigaton 上的CSS 设置为可见（然后使用CSS 设置它们的位置）。

对于您的示例，您应该首先使用这种 CSS 将导航设置为始终可见，然后设置下一个/上一个按钮位置。

.fancybox-nav {
width: 60px;       
}
.fancybox-nav span {
visibility: visible;
opacity: 0.5;
} 
.fancybox-nav:hover span {
opacity: 1;
}
.fancybox-next {
right: -60px;
}
.fancybox-prev {
left: -60px;
}

对于幻灯片选项，您应该将您的 fancybox 脚本设置为“autoPlay = true”。默认值设置为“false”，这会禁用幻灯片。