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