Step One: Get the Lightbox Package
The first step is to get the latest LightBox 2 package from http://www.huddletogether.com/projects/lightbox2/, 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 icons. When setting the former, you can fiddle with the defaults to get the style you need. 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'). In some cases, Omeka requires using the direct URL. 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 -->
You’ll also 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. Most users will find that having the LightBox styles included in a single stylesheet is preferable, but if you want to keep them separate, 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
Add the following code to your items/show.php file:
<!-- 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></p>';
echo display_files_for_item(array('linkAttributes'=>array('rel'=>'lightbox[gallery]')));
}
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[gallery]"' – clicking on images with the "lightbox" attribute in the URL will prompt the light box; if there are two or more images associated with the file, the '[gallery]' 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.
Please feel free to edit and improve the code and content of this article.
Reposted in part from Jefferson's Newspaper by the author.
--Ebellempire 15:02, 11 December 2009 (UTC)
