CODEWITHSUNDEEP
javascriptgallerylightbox
Thorsten
Thorsten

Reputation: 23

Gallery: Only one image as a thumbnail

Here's a link: http://lomakincello.net/etu/sehen.php

I'm creating a website using HTML and CSS. I'm not familiar with JavaScript, so someone is helping me out with a HTML5/Flash-Player, which works fine, and a gallery.

He tried to use the original lightbox. By default, all the pictures that belong to a gallery are displayed as a thumbnail.

We would like to have several galleries (live pictures / recording sessions / miscellaneous. Something like that). Only one picture of each gallery should be displayed as a thumbnail. Our "webmaster" is finding that hard to achieve using the lightbox. So I'm asking you for an alternative. Do you knwo any scripts/script techniques that by default show only one picture of each gallery as a thumbnail or where a modification of the original code would be easy to do?

Upvotes: 1

Views: 2955

Answers (1)

James Hibbard
James Hibbard

Reputation: 17795

First off, you are using jQuery 1.2 and a very old lightbox script. I would update both of these.

You can include jQuery from a CDN:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

And you can get a good lightbox script with easy to follow instructions here: http://lokeshdhakar.com/projects/lightbox2/

Then, the first thing to do, is hook up the the thumbnail to display in a lightbox:

<a href="large-image1.jpg" data-lightbox="images">
  <img src="http://lomakincello.net/etu/pics/00kl.jpg">
</a>

You can then add the other images as anchor tags, leaving them empty so that they don't display.

If you don't feel happy using empty anchor tags, you can hide them using CSS (display: none). 

<a href="large-image1.jpg" data-lightbox="images">
  <img src="http://lomakincello.net/etu/pics/00kl.jpg">
</a>
<a href="large-image2.jpg" data-lightbox="images"></a>
<a href="large-image3.jpg" data-lightbox="images"></a>

And this should work.

The important thing to realize is that giving them the same data-lightbox attribute, makes them appear as part of the same show.

Here's a demo.

Upvotes: 1

Related Questions