2012-05-13 31 views
1

我已经长大真的很喜欢这个全屏HTML5/jQuery的幻灯片:全屏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初始化幻灯片。

+0

您需要扩展当前的JavaScript。只显示一个幻灯片隐藏别人与jQuery'css()' –

+0

所以我会添加CSS到我想通过jQuery隐藏的链接?我会在这些链接上放置“display:none”吗?另外,我怎么写这个呢? – davecave

回答

0

你已经拥有jQuery的,那么为什么不使用它的hide()功能:​​ 看起来你可以挂接到开始和停止展示活动,因此,如果没有它们可见出了问题,你可以取消隐藏,并分别躲藏。

但是,没有理由不能在锚上使用display: none,无论是通过内联css还是通过css文件。这似乎是非常合理的。

+0

然后,我将加载访问者不会看到的其他缩略图。在这种情况下,我可以将'src'留在'img'标签上空吗?这有效吗?我只想删除'img'标签,但我在帖子中提到的全屏HTML5/jQuery插件需要在标签中使用'img'才能工作。对不起,我没有在上面的例子中包含那一点。我试图通过JavaScript来查看是否可以改变它,但我无法让它在没有'img'标签的情况下工作。 – davecave

+1

只要您的缩略图大小适当,它不应该太多的问题。但是当幻灯片放映开始时,您可以改变开始加载图像。 – pms1969

+0

看来'display:none'是最简单的解决方案。 – davecave