Revised Lightbox Instructions

Omeka Classic Themes
1

I couldn’t get the instructions on adding Lightbox (https://omeka.org/codex/Adding_LightBox_to_Omeka) to work. So I played around some and figured out the problem.

It won’t work if you use

queue_js_file(‘lightbox-2.6.min’, ‘javascripts/vendor’);

at the very beginning of show.php. You want the LightBox javascript file to get called in the body of the file, not the head. Maybe that’s because of a change to LightBox since the original instructions were written? So you want to use js_tag, not queue_js_file. queue_js_file puts a script in the header, and js_tag puts it in the body.

Also, it looks like the current version of LightBox does’t use a version number in the javascript file, so don’t let that throw you off.

So keep the part about calling the Lightbox CSS in the first line of show.php:

<?php queue_css_file('lightbox.min'); ?>

Then, after your “<?php echo head…” line, add

<?php echo js_tag('lightbox.min', 'javascripts/vendor'); ?>

Other than that, the other instructions at the link above are solid.

I hope that helps some people! This is a really good solution for displaying images in my Omeka installation.

2

I tried to simplify the instructions and align them a little more with what the current lightbox download looks like.

What do you think of the new version?

3

Thanks! You might want to change the part about uploading the dist folder to the theme top directory.

The dist folder has a directory named js, and the themes have a “javascripts” folder. Then, the LightBox script is supposed to go in a subfolder, javascripts/vendor.

Also, I might be wrong, but some themes might call their image directories something different. People might want to consolidate their images in the same folder.

You could just say to copy the individual files from the dist subfolders to the appropriate subfolder, including omeka/themes/yourtheme/javascripts/vendor.

4

The problem with telling people to put everything in the normal different directories is that the CSS file for Lightbox assumes it knows where to find the images relative to where the CSS is. I decided it would be simpler to just keep the lightbox’s stuff together in one folder, so you have lightbox/js, lightbox/css, lightbox/images. Because they’ve changed the name of the img folder to images, the old instructions can work better than they did before, but it really doesn’t seem worth the effort to me.

Plus, it means you just have to rename and upload one folder as-is, rather than putting several things in different places.

5

Gotcha. I didn’t look at your code snippet closely enough; didn’t see that you had indicated the lightbox/js directory in the PHP command. Should work, then.

6

Maybe this should be obvious, but the instructions don’t make clear that this will open any File for an Item in the Lightbox viewer. That won’t work for PDFs, sound files, etc…

FWIW - this might be sloppy - here is what I did to circumvent. I added a condition to just use Lightbox for GIF and JPG files. If it wasn’t met, it would just echo the files like it would before adding Lightbox. So instead of just

<?php echo item_image_gallery(array('link'=>array('data-lightbox'=>'lightbox'))); ?>

I put this

<?php foreach($item->Files as $file) { if (in_array("jpg",pathinfo(file_display_url($file, $format = 'original'))) || in_array("gif",pathinfo(file_display_url($file, $format = 'original')))) { echo item_image_gallery(array('link'=>array('data-lightbox'=>'lightbox'))) ; break ; } else{ echo files_for_item(); }

I’m sure there is a better way to do that, but I’m just sharing a sample code for anyone else who might want to use Lightbox for images only.

7

A little cleaner approach might be to use $file->getExtension(), which will return the original file’s extension. Then one array listing the extensions you want would make for just one check. Something like this (untested) code:

$imageExtensions = array('jpeg', 'jpg', 'gif', 'png');
foreach ($item->Files as $file) {
    if (in_array($file->getExtension(), $imageExtensions) ) {
        echo item_image_gallery(array('link'=>array('data-lightbox'=>'lightbox'))) ;
    } else {
        echo files_for_item();
    }
}
8

All of these altered examples look like they’re going to run into trouble if and when you have multiple files on an item, as both item_image_gallery and files_for_item print every file, not just the current one.

9

Yes, that’s something people should consider. My example was just a sample solution. We only use one image/file per item and it works fine. FWIW my tests in development properly displayed a gallery of images (multiple image files per item).

10

Yes, the break in your code would make it work OK for multiple images (assuming the files are all images). The else has no break though, so you’d get duplication on items with multiple non-image items. Of course, it’s not necessary for peoples’ custom theme code to work in absolutely every situation, but I just wanted to note the issue for the benefit of people who might come and refer to this thread later.

The non-gallery-based image display (files_for_item) has a system designed to deal with this problem: it lets plugins alter the way a particular type of file is displayed, even if it appears alongside other file types. The “gallery” display the Lightbox instructions use is designed to be simpler, as it just displays a thumbnail regardless.

In other words, an alternative option for using a lightbox would be a module, but it would require the user to not turn on the theme’s “item file gallery” option, the exact opposite of the method on the codex page.