Adding Lightbox to Omeka
Note
Omeka Classic now uses the lightGallery image viewer to display files. This is used on many pages across most of the Omeka-authored themes. Older versions did not use embedded image viewers, and users supplied gallery tools such as Lightbox using the instructions below. You can still use the following method to use Lightbox instead of lightGallery, or in older versions of Omeka, so these instructions are preserved for legacy use.
Step One: Get the Lightbox package
The first step is to download the latest Lightbox package, where you will find a quick explanation of how it works and how to get started. (As of November 2024, the last tested version is v2.11.5 from Oct 2024.)
Step Two: Modify and move the Lightbox package
Once you have the package, unzip it so you can move the files into the correct places in your theme's directory. We will need to move the images
folder, the lightbox.js
file, and the lightbox.css
file to the correct places in your theme's folder.
The needed files are located in the src/
folder. (eg. src/js/lightbox.js
)
-
images: Move the entire folder to your theme's top directory. (Alternatively, you could upload the images to your theme's /images directory, and modify the lightbox.css stylesheet to look for them there.)
-
lightbox.js: Move the file to
yourtheme/javascripts/vendor/
. -
lightbox.css: Move the file to
yourtheme/css/
.
Step Three: Modify your items/show.php file
In the yourtheme/items/show.php
file, add the following as the first line (before the line that begins <?php echo head(
<?php
queue_js_file('lightbox-2.6.min', 'javascripts/vendor');
queue_css_file('lightbox');
?>
Look for the line that calls item_image_gallery
, and modify it so it looks like this:
<div class="element-text"><?php echo item_image_gallery(array('link'=>array('data-lightbox'=>'lightbox'))); ?></div>
In your theme's configuration, make sure that the "Item File Gallery" option is checked.