The download for the Slimbox 2 is a zip file. It contains some documentation, along with all of the files you need to make it work. Unzip the Slimbox File. Find the file called slimbox2.js. It should be inside the the js folder.
It's customary to put JavaScript files in a folder called js on websites, so make that folder in our site and copy both the Slimbox2 JavaScript file into it.
Including the JavaScript in Your Page
Next we need to link those two Javascript files into HTML page that we want to use Slimbox in.
The two script tags should go in the header of the document. The Slimbox JavaScript needs to reference the jQuery framework, so you must include the jQuery file first or else it will not work.
Also note that your file names might be slightly different.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Slimbox Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/slimbox2.js"></script>
</head>The Slimbox CSS
Slimbox 2 requires it's own CSS code in order to display things properly. There are also a few images that are required as well.
Find the CSS folder inside the slimbox folder you downloaded. There should be five files in it (you can ignore the "slimbox2-rtl.css" file for now):
- closelabel.gif
- loading.gif
- nextlabel.gif
- prevlabel.gif
- slimbox2.css
Copy all five of these files to your own CSS folder. It should look like the image on the right.
You could place the four images anywhere that makes sense, as long an you update the references to them in the slimbox2.css file
Include the Slimbox CSS File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Slimbox Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/slimbox2.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" media="screen" />
</head>Prepping Your Images
The goal here is to show a thumbnail image, or group of thumbnails, and then have them link to the full size image.
In order for this to work, you must have all of your full size images ready in web format. You should then decide on a thumbnail size and prepare a thumbnail for each of your images.
You should save all of the images in your images folder.
Writing the HTML
The neat part about this kind of thing is that we don't have to do very much to our HTML in order for slimbox to work.
You can use whatever tags suit the context of your HTML. All that really matters, is that you have a thumbnail image, wrapped with a link to the full file.
<a href="images/full-size.png">
<img src="images/thumbnail.png" alt="remember your alt tag" />
</a>
Next you have to add one more thing to trigger lightbox. You need to add the rel attribute to the anchor tag, and make sure that its value includes the word "lightbox".
<a href="images/full-size.png" rel="lightbox" >
<img src="images/thumbnail.png" alt="remember your alt tag" />
</a>
If you want to use Slimbox with a group of pictures (see demo), you need to include a common group name in the rel attribute value.
<a href="images/full-size1.png" rel="lightbox-cats" >
<img src="images/thumbnail1.png" alt="remember your alt tag" />
</a>
<a href="images/full-size2.png" rel="lightbox-cats" >
<img src="images/thumbnail2.png" alt="remember your alt tag" />
</a>
<a href="images/full-size3.png" rel="lightbox-cats" >
<img src="images/thumbnail3.png" alt="remember your alt tag" />
</a>Including a Caption With Your Images
With Slimbox you can also include a caption to be displayed in the popup menu.
This is done by adding the caption to the anchor tag as a title attribute. So, the value of your title attribute is the caption of the image in the popup window.
<a href="images/full-size.png" rel="lightbox" title="This Is My Image Caption" >
<img src="images/thumbnail.png" alt="remember your alt tag" />
</a>
That's It!
That's all you need for your basic Slimbox 2 implementation. Make sure to study the Slimbox Demo I've provided so that you understand how to use it.
For the more adventurous folk, the Slimbox website and documentation contains all sorts of extra features that you can use tweak things.