A lightbox for your pics

WordPress is great for words, but not brilliant for pictures. There are ways of integrating with gallery software and other tools, but they’re not very robust in a big multi user blog like ours. Instead, we’ve implemented a simple tool called ‘Slimbox’ which should give everyone access to eye-popping slideshows. It’s easy to use…

First, your blog admin will need to activate the plugin for your blog. It’s turned off by default because it’s a fair chunk of javascript that not everyone needs.

Next, upload your pics as you write your post, giving the picture a title. Then “send to editor” as a thumbnail* linked to original file. So far all standard WordPress, but the next bit is a little tricky.

You need to enter the ‘code’ view and find the link to your image, which will look something like <a href="/wordpress/wp-content/uploads/2008/004.jpg" >. You then add in rel="lightbox" just before the closing > so that last bit looks like ...XX.jpg" rel="lightbox" >. Add a title attribute … title="A Photograph" > as well and it’ll display as a caption.

That’s it! Try this image as an example.

hydraulic power department

More than one photo at a time?

Easy! instead of just rel="lightbox", use something like rel="lightbox[mypics]". Then all the photos on the page with ‘mypics’ will display as a slideshow like they do on this page.

This entry was posted in tutorial. Bookmark the permalink.

2 Responses to A lightbox for your pics

  1. Guz Gutierrez says:

    i´m a mexican teacher and i´m trying to decide about use or not WordPress… maybe not, because dont have a lot of time to be programing pic by pic… and we have a lot of them. maybe later when i have more time or i can find a simple tool to do it fast and easy.

  2. Ja says:

    Thanks! Lightbox is much better than Greybox.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>