Hemingway + Lightbox

how to integrate the popular Lightbox JS with the Hemingway theme

A few days ago I got an email from milo317 from Germany, asking me how to integrate Lightbox and the Hemingway theme for WordPress, as I did on this website.
That’s exactly what I’m going to do in this post.

For those of you out there who still don’t know Lightbox, this is a powerful and very functional Javascript utility to display your images. Clean, light-weight, but yet very effective.
The only fault of Lightbox is that its Css stylesheet doesn’t validate, because of some proprietary rules for Explorer and Mozilla. However, if you’re not obsessed about standards or addicted to validation, I believe you will find Lightbox very useful and be using it in many of your projects.
You can get the 2.0 release on huddletogether.com.

Hemingway is a quite a popular WordPress theme. This site is also based on the Hemingway theme, obviously spiced up and changed to meet my needs.
You can download Hemingway from warpspire.com/hemingway.

So, now let’s see hot to make them work together.
Please note that this tutorial assumes that you have WordPress installed in the /wordpress/ folder on your server. If you installed it in another directory, keep in mind that you have to change folder and file paths to match your specific configuration.

First, you need to install the Hemingway theme.
All you need to do is following the instructions included in the package.

Quick recap:
1. unzip the package,
2. upload the hemingway folder to your server with an FTP client,
3. put it in the /wordpress/wp-content/themes/ folder,
4. go to your WP admin panel,
5. in the Presentation section, select and activate the Hemingwat theme,
6. go back to your blog, take a look around and congrat yourself: you made it!

If these few instrucions don’t solve your problem, please don’t email: I’ m a WP and Hemingway user just like you. You can get quality support at discuss.warpspire.com.

Next step is getting Lighbox to work with Hemingway.
And this is a little more complicated.

Let’s go step by step:
1. unzip the package,
2. upload the js folder to you server with an FTP client,
3. put it inside your /wordpress/wp-content/themes/hemingway/ folder,

4. in the Lightbox package you have an images folder.
Upload the content of this folder to the already existing /wordpress/wp-content/themes/hemingway/images/ folder.
This will add the required Lightbox images to the Hemingway standard installation.

5. Same thing with the css folder.
Pick the lightbox.css file inside it and upload it to your /wordpress/wp-content/themes/hemingway/styles/ folder.
Using this folder structure, you don’t need to change anything in the Lightbox stylesheet.

Unfortunately, you will still need to change a couple of lines in the main lightbox.js file.
6. open the lightbox.js file with a text editor or with Dreamweaver,
7. at lines 62 and 63 you need to change

var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";

to this

var fileLoadingImage = "/wordpress/wp-content/themes/hemingway/images/loading.gif";
var fileBottomNavCloseImage = "/wordpress/wp-content/themes/hemingway/images/closelabel.gif";

This will adapt Lightbox to the Hemingway folder structure.

Now we need to integrate Lightbox,
8. in the /wordpress/wp-content/themes/hemingway/ locate the header.php file ,
9. open it in a text editor or in Dreamweaver,
10. in the head of the document, add these lines:

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/prototype.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/scriptaculous.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/lightbox.js"></script>

This will include the required JS scripts in every WordPress generated page.

11. always in the head of the header.php file add this line:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/styles/lightbox.css" type="text/css" media="screen" /> 

This will add the required Css stylesheet for Lightbox in your WordPress content.

Now, let’s try it!
12. open your WP admin panel and write a new post,
13. insert a link to an uploaded image, using this sintax:

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

Obviously you need to change this line of code to match your image path.

14. Go to the newly posted artcicle and test the link. Is it working?
If yes, then you made it!
If it’s not working, either you messed up something or my tutorial is wrong.
Remember to run the test with a modern browser, don’t even try to do it with IE or older browsers!

Please refer to this site to get Lightbox-specific help.
For Hemingway and Lightbox integration issues, you can comment this post, email me or simply analyze and copy the source code of my WordPress pages!

Hope you will find this helpful. Bye.

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.