Question

I have grown to really like this fullscreen HTML5/jQuery slideshow:

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

As with most lightbox/gallery slideshows, a set of thumbnails is displayed and the user is able to click any of them to start the slideshow. The set of thumbnails equals the number of images that will be displayed in the slideshow.

Is it possible to not display the thumbnails at all? Can I just display a single text link that starts the slideshow?

Lightbox 2‘s markup looks like this:

<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>

It is similar to the “jQuery HTML5 Fullscreen Slideshow” I mentioned earlier. It looks like I can easily have text-only links by just putting text inside the anchor tag, instead of the usual img tag that displays the thumbnail.

Now for the real question: Can I hide the other two links and just display one? That way a single link is displayed, but the slideshow still pulls up three images. I thought about just using css by putting display:none on the links, but it didn’t seem like the right thing to do. There are other ways of visually hiding it with css, but I thought maybe there would be a better way with javascript. I am not that experienced with javascript, unfortunately.

Here is my testing site running the jQuery HTML5 Fullscreen Slideshow. For some reason, it requires an img within the anchor tag to initialize the slideshow.

Answer 1

You already have jQuery, so why not use it’s hide() function: http://api.jquery.com/hide/
It looks like you can hook into the start and stop showing events, so if not having them visible is a problem, you can unhide and hide respectively.

However, there’s no reason you can’t use display: none on your anchors, either through inline css, or a css file. This seems perfectly reasonable.