Upersonlig blog

A bus in Hainan, China. Your best bet is to read the text in reverse.

A couple of days ago, a colleague of mine started ooohing and aaahing in the office. He had surfed to Norwegian website www.journalisten.no and found a photo gallery using the lightbox 2 script. Click on the picture to the right to see how it works. I had, by coincidence, surfed into the page hosting slimbox 2, a lightbox clone, a couple of days before, and decided that I would try to install the script on my blog, to show my colleague that it wasn’t too difficult to use. So, here’s how I did it.

Step 1: Download

First of all, make sure that you have FTP access to your server. You have to be able to create directories and upload files to a server (not necessarily the server containing your wordpress page). Then, download a required jquery-file here and the slimbox 2-file here. Rename the jquery-file to jquery.js.

Step 2: Extract and upload

Extract the slimbox 2-archive to a convenient location. The only files you need to transfer to your server, though, is the two directories css and js. Move the file called jquery.js into the directory called js, then transfer the two directories to the wordpress folder on your server.

Step 3: Enable Slimbox in your WordPress theme

Log into the wordpress admin panel, where you write your blog posts and administrate your blog. Find the appearence menu item on the left, then click Editor. When the editor is loaded. Choose the file called header on the right hand side.  Right before where it says </head>, paste these lines:

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

Then press save, and that’s it. Now you’re ready for using this good-looking way of displaying pictures.

Step 4: How to use it

A pack of Chinese tourists in Hainan, China.

To use slimbox, you first have to insert a photo in your blog post. When you have done this, click the tab named html in the upper right corner of wordpress’ blogpost editor. This switches into HTML-mode, which might be a little bit intimidating if you don’t know HTML. The thing you are about to do, is rather simple though. Scroll down through your text and find where it says something like <img src=”blahblahblah”>. There you will find a tag that looks a little bit like this:

<a href=”http://www.yourserver.com/wp-content/uploads/2009/01/img_4247.jpg”>

Inside the brackets, write rel=”lightbox”, so that the little bit of code looks like this:

<a href=”http://www.yourserver.com/wp-content/uploads/2009/01/img_4247.jpg” rel=”lightbox”>

Hit the “update post”-button, refresh your blog post and click your picture. If you’ve done everything right, it will behave like the picture of the Chinese tourists on the right.

A prayer tree in Hainan, China.

If you want a caption under the picture when it pops up in the slimbox-window, include a title-option right after the rel-option, like this:

<a href=”http://www.yourserver.com/wp-content/uploads/2009/01/img_4247.jpg” rel=”lightbox” title=”this is a caption.”>

Click the picture of the tree on the right to see how it works.

Step 5: Making a browsable gallery

The coolest thing about lightbox/slimbox isn’t the single picture view, but the pretty neat gallery user interface you get when you link together several pictures into a small gallery. This is done in pretty much the same way as you do when you use slimbox to view a single picture. Insert all the pictures you want in your post using the method descibed above, and swith over to HTML view. put in the rel=”lightbox”-option in the <a>-tags in the same way you do when you want to view a single picture, but add a small keyword after lightbox. The keyword can be anything, the important thing is that the keyword has to be separated from lightbox with a small hyphen, and that all pictures in the same gallery has the same keyword. If I want to string together all the pictures in this post into a gallery, it would look like this:

<a href=”http://www.yourserver.com/wp-content/uploads/2009/01/img_1.jpg” rel=”lightbox-installslimbox”>

If the keyword is the same in all the pictures, they become browsable. If you just want on picture in a post, but when you click it, you can see more pictures in the slimbox gallery, hide the code for the pictures with a <div style=”display:none”>-tag. Find the code for the pictures you don’t want to show up in your post in the HTML editor. The codes for pictures in wordpress usually start with and end with [/caption]. Right before the caption-tag, paste

<div style=”display:none”>

and after the /caption-tag, it’s important that you write </div>. Do this with all the pictures that you don’t want to turn up in the post, make sure they all have the same keyword in the rel=-option, click update post, refresh your browser and click the picture that is displayed in the post. I have used this technique for the first picture in this post. Check it out!

If you have any problems using this method, please contact me in the comments field.

A pack of Chinese tourists in Hainan, China.

A prayer tree in Hainan, China.