Nov 19, 2009
Adding an Image Lightbox in Omeka
Maybe it’s just me, but I had a heckuva time trying to figure out how to implement Lightbox 2 in Omeka. After piecing together info and code from here and there, then adding my own little improvements, I’ve constructed a simple little 4-step guide to document the process and, hopefully, help make this process a little less vexing for others out there who aren’t PHP and Java Script pros.
Step One: Get the Lightbox Package
The first step is to get the latest LightBox 2 package here, where you will find a quick explanation of how it works and how to get started.
Step Two: Modify and Upload the LightBox Package
Once you have the package, make sure it’s in a folder called “lightbox” and upload it to your Omeka theme directory inside the “common” directory where your header and footer files are located. Take the image files and copy them to your theme’s “images” directory.
Inside common/lightbox/js directory, find the file called “lightbox.js” and set your configurations. This is where you set your lightbox behaviors (overlayOpacity, animate, resizeSpeed, borderSize, etc.) and also where you tell LightBox how to find the images and labels to display Close and Loading. When setting the former, you can fiddle with the defaults to get the style you need, it’s pretty easy to understand. For the latter (image locations), you can use either a relative or a direct URL. If a relative location (e.g. ‘../images/loading.gif’) does not work for you, try using the direct URL (e.g. ‘http://www.yoursite.com/omeka/themes/themename/images/loading.gif’). My impression is that Omeka requires the direct URL for some reason. You could probably leave the images in the “lightbox” directory and point to them there as well.
Step Three: Modify your Omeka Theme Header
Add the script to your theme header (be sure to modify with your actual theme name):
<!-- Start Lightbox includes --> <script type="text/javascript" src="<?php echo WEB_ROOT;?>/themes/themename/common/lightbox/js/prototype.js"></script> <script type="text/javascript" src="<?php echo WEB_ROOT;?>/themes/themename/common/lightbox/js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="<?php echo WEB_ROOT;?>/themes/themename/common/lightbox/js/lightbox.js"></script> <!-- End Lightbox includes -->
Pretty basic.
Also, you’ll want to either copy the LightBox CSS styles into your theme’s stylesheet or move it to the theme styles directory and link to it in your header. Either way, be sure to double check that your images are properly linked. I find that having the LightBox styles included in a single stylesheet is preferable, but if you want, you can use something like this after moving lightbox.css to your theme directory:
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Step Four: Modify Your Omeka Items-Show Page
This is where I got hung up. The site I was working on has multiple file types — not just images, but also audio and video. I was lucky enough to find a starting point on the Omeka Dev Google Group as well as on the Omeka Forums, but the code was written for item pages with a single image file. Since I’m not great with arrays, it took me a while to come up with the imperfect code below.
<!-- The following returns all of the files associated with an item. --> <div id="itemfiles" class="element"> <h3>Files</h3> <div class="element-text"> < ?php if (item_has_thumbnail()) { echo '<p><em>Click the Image for Full Size</em>'; echo display_files_for_item(array('linkAttributes'=>array('rel'=>'lightbox[group]'))); } else { echo display_files_for_item(); } ?> </div> </div>
This script will test if the item has a thumbnail (i.e. “is it an image?”). If it does, it will display the files as square thumbnails and give them ‘rel=”lightbox[group]“‘ – clicking on images with the “lightbox” relation in the URL will prompt the light box; if there are two or more images associated with the file, the ‘[group]‘ part will kick in to add the Next and Previous buttons. If the item file is not an image, the script calls the generic Omeka function display_files_for_item(), which will automatically call the media player (for audio and video) if needed.
A pretty easy process when you have it all right in front of you. Hope this will be helpful to someone out there.
NOTE: I’ll continue to update this post with any improvements. If you have a problem, fix, or improvement to share, please add it in the comments or catch me on Twitter (@ebellempire). I’ve also cross-posted this tutorial in the documentation wiki at Omeka.org, so feel free to contribute there as well.
[...] @ebellempire: Add LightBox to @Omeka: http://jeffersonsnewspaper.org/2009/adding-an-image-lightbox-in-omeka/ a not quite perfect guide. [...]