隐藏全屏HTML5 jQuery幻灯片的缩略图(纯文本链接以初始化幻灯片)

时间:2012-05-13 19:05:50

标签: jquery html5 lightbox fullscreen slideshow

我已经非常喜欢这个全屏HTML5 / jQuery幻灯片:

http://eikes.github.com/jquery.fullscreen.js/

与大多数灯箱/图库幻灯片一样,会显示一组缩略图,用户可以单击其中任何一个来开始幻灯片放映。缩略图集等于幻灯片中显示的图像数量。

是否可以 显示缩略图?我可以只显示启动幻灯片显示的 文字链接吗?

Lightbox 2的标记看起来像这样:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

它类似于我前面提到的“jQuery HTML5 Fullscreen Slideshow”。看起来我只需将文本放在锚标记中就可以轻松拥有纯文本链接,而不是通常显示缩略图的img标记。

现在提出真正的问题: 我可以隐藏其他两个链接,只显示一个吗?这样就显示了一个链接,但幻灯片仍然会提取三个图像。我想通过将display:none放在链接上来使用css,但这似乎不是正确的做法。还有其他方法可以用css直观地隐藏它,但我想也许用javascript会有更好的方法。不幸的是,我对javascript没有经验。

我的testing site运行jQuery HTML5 Fullscreen Slideshow。出于某种原因,它需要锚标记中的img来初始化幻灯片。

1 个答案:

答案 0 :(得分:0)

你已经有了jQuery,所以为什么不使用它的hide()函数:http://api.jquery.com/hide/ 看起来你可以挂钩开始和停止显示事件,所以如果没有它们可见是一个问题,你可以分别取消隐藏和隐藏。

但是,您无法通过内联css或css文件在锚点上使用display: none。这看起来非常合理。