Slimbox2

These webpages give a few examples of the use of "slimbox2", a very lightweight jQuery Javascript plug-in to provide a "lightbox" slideshow effect for photos and other images. The examples are not exhaustive, but they give a flavour (British spelling) of what can be done over and above the basic usage as shown on Christophe Beyls's "digitalia.be" website.

The idea of these examples is to take a simple piece of HTML code and apply Javascript techniques to it to create a slightly more complex lightbox effects than you would normally have using "slimbox2" straight out of the box. The thumbnail images (photo1_thumb.jpg to photo4_thumb.jpg) are in two unordered lists. The photos themselves (photo1.jpg to photo4.jpg) will be displayed in the lightbox slideshow. There are corresponding high-resolution versions (photo1_hires.jpg to photo4_hires.jpg) which will be used in the later examples.

Example 9 uses a modified version of the slimbox javascript. This does several things, as described below. One new feature is to enable the slideshow to be automated by clicking on the "play" button.

Neil - January 2011

Examples

The basic HTML code that will be used in all the examples is shown later. As you can see it is very straightforward and although it has some indications as to what is expected. It is just a couple of unordered lists of thumbnail images.
Click on the "example" links in the table below
to see how these images can be easily made into a lightbox slideshow. To see how this is done view the source code for the Javascript (and in some cases the CSS coding) that is convieniently listed on the relevant page.

slimbox2 examples
ExampleDescription
example 1 This shows the result of the HTML without any Javascript (i.e. no slideshow effect at all).
example 2 This shows how to get a single slimbox slideshow with captions under the slides.
example 3 This shows how to get two separate slimbox slideshows with captions under the slides.
example 4 This shows how to get two separate slimbox slideshows but only showing the first thumbnail in the unordered lists.
example 5 This shows how to get two separate slimbox slideshows with links in the captions to enable viewers to download the photos and high-resolution versions of them.
example 6 This shows how to move the slide number to the right rather than the (default) left.
example 7 This shows how to use options on the slimbox2() call to change the counter text and be able to navigate between the first and last slide of the slideshow.
example 8 This shows how to use an Ajax call to load the HTML into the "slides" DIV container and call slimbox() after the HTML has successfully loaded.
example 9 This shows how to simply resize the images before they are displayed in the lightbox. It also enables the slides in the slideshow to be downloaded by the viewer simply by positioning his/her cursor in the middle of the slide and "right-clicking" with the mouse.
It requires modifications to the slimbox2 javascript. A copy of the minified, and the readable source code for this can be downloaded from this example's webpage, under the same license agreement as the originals. It also requires some changes to the slimbox2 CSS, also downloadable from this example's webpage.

The basic HTML

 
<div class="slides">
	<h1>Sipadan_Mabul</h1>
	<ul id="Sipadan_Mabul">
		<li><img src="photo1_thumb.jpg" alt="Sipadan island, in the Celebes Sea, just off the coast of Borneo."></li>
		<li><img src="photo2_thumb.jpg" alt="A nudibranch, seen on a dive off the island of Mabul, Malaysia."></li>
	</ul>
	<h1>Seychelles</h1>
	<ul id="Seychelles">
		<li><img src="photo3_thumb.jpg" alt="A beach on La Digue in the Seychelles."></li>
		<li><img src="photo4_thumb.jpg" alt="A ray seen while diving off conception Point, Mahe."></li>
	</ul>
</div>