MegaGallery, Part 1: Slimbox

I have never used Slimbox before; so, right out of the box, I wanted to make sure I could get it to work. Slimbox2 is a plugin for jQuery for displaying images in an overlay window. You have probably seen the overlay effect before (some sites use it an annoying answer to pop-up ad blockers).

First, if you haven’t, download jQuery and Slimbox2. You will need to extract the files and place them in your working folder. You need several files.

From the jQuery download:

  • jquery[version].js (I usually rename it to jquery.js)

From the Slimbox you need:

  • slimbox2.js
  • slimbox2.css
  • closelabel.gif
  • nextlabel.gif
  • prevlabel.gif

I keep my like files in folders so they are easier to manage; so, I put the two Javascript files in a folder named js, the Stylesheet in a folder named css, and the gifs in a folder named img. If you put the gifs in a folder that is not the same folder as the CSS file, you will need to edit the CSS file and change the path to point to the images or Slimbox will not work correctly.

Next, start a new XHTML document in your editor of choice. (I use the Netbeans IDE for PHP development.) When I started the document, I named it index.php for this project, because I know in the end, it will contain PHP code. For the information in this tutorial, index.html or gallery.html will work just fine, but remember you will need to change it later in the project to process PHP.

In the head section of the XHTML document, we need to include several files:

<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/slimbox2.js"></script>
	<link type="text/css" href="./css/slimbox2.css" rel="stylesheet" media="screen" />

The first line adds the jQuery script to your document. jQuery is required for Slimbox2 to work. The second line adds the Slimbox2 script. The third line adds the CSS (Cascading Style Sheet) for Slimbox2.

NOTE: Slimbox also comes in a Mootools version. For those who use Prototype, try Lightbox2.

Next, in the body of the document, we need to add some links to files:

<a href="pix/image01.jpg">image #1</a>
<a href="pix/image02.jpg">image #2</a>
<a href="pix/image03.jpg">image #3</a>

Now, we need to add in Slimbox.

<a href="pix/image01.jpg" rel="lightbox">image #1</a>
<a href="pix/image02.jpg" rel="lightbox">image #2</a>
<a href="pix/image03.jpg" rel="lightbox">image #3</a>

The rel element tag associates the link with Slimbox. When the Slimbox script loads, it will look through the document for all <a> tags with an rel equal to “lightbox”. This is a nod to the origin of Slimbox, Lightbox.

We can also add labels to our pictures with the title tag:

<a href="pix/image01.jpg" rel="lightbox" title="Image 1">image #1</a>
<a href="pix/image02.jpg" rel="lightbox" title="Image 2">image #2</a>
<a href="pix/image03.jpg" rel="lightbox" title="Image 3">image #3</a>

One last thing. We can add a hyphen and name to the end of the rel tag and it will group the pictures where you can scroll between the pictures:

<a href="pix/image01.jpg" rel="lightbox-show">image #1</a>
<a href="pix/image02.jpg" rel="lightbox-show">image #2</a>
<a href="pix/image03.jpg" rel="lightbox-show">image #3</a>
Slimbox Example

Slimbox Example

In the next part, we will create thumbnails and captions using PHP.

MegaGallery Source Code

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s