Tutorial : How to use the Slimbox 2 Image Gallery in Your Website?

As we all know, Slimbox 2 is a popular clone of Lightbox a script use to display fanstastic images and other web content.Slimbox 2 was developed by Christophe Beyl and released under MIT License.

One of things you will love about Slimbox 2 is the responsiveness of the jquery script, it allows you to close it immediately at any time using the keyboard or mouse and to instantly navigate to any image before the current image has loaded or the animations are complete.

Another good things; the script is fully customizable, compatible to modern browsers, and it offers more options compared to Lightbox.

For more information about Slimbox 2 you can read here: http://www.digitalia.be/software/slimbox2

Now let's go for the setup guide the main lesson of this post.

SETTING UP SLIMBOX

I know some beginners will find it hard to install or make it work correctly so, I made this simple guide.

1. First download the Slimbox 2 Script here : http://code.google.com/p/slimbox/downloads/detail?name=slimbox-2.05.zip

2. Extract the file and put it to your localhost root folder (Why localhost? You must test it first before finally uploading to your site)

3. Create a new html page or open an existing one to Dreamweaver (you can have any html editing tool you’re incline to work with)

4. In your page add this line before <html> tag :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

*Without this doctype Slimbox 2 will not display correctly, images will go to the bottom of the page.

5. Next, include the script in the header of your page, after the inclusion of the jQuery library

*Change this scr ="actual jquery path"accordingly

6. Include the CSS file in the header of your page, or add it to an existing CSS style sheet:

For right-to-left language:

*Change this scr ="actual css path"accordingly

7. To ACTIVATE slimbox script in your image, add the rel="lightbox" attribute to the links.

example: <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

8. TO ACTIVATE the Slimbox 2 Gallery Mode or displaying sets of related images that you want to be navigable, add a group name to the rel attribute just after the “lightbox” word, for example:

<a href="images/image-1.jpg" rel="lightbox-bike">image #1</a>

<a href="images/image-2.jpg" rel="lightbox-bike">image #2</a>

<a href="images/image-3.jpg" rel="lightbox-bike">image #3</a>

* In this example, I put up the word " bike" after lightbox, so the result whenever I click a single picture in a page it will open up series of images I tagged for the bike attribute.So, its now a gallery of images!

*Make sure to set the Loop: bollean value to TRUE. Open the slimbox2.js and search for the keyword " LOOP".

9. Works perfectly? Oh,you can upload the attire script to your site root directory and have fun.!

If you have any question pls feel free to get in touch..T.Y