Quick guide: How to add Featherlight lightbox to Seasons theme

This tutorial is for the Seasons theme. It could be useful for other themes.

I wanted to use a lightweight jQuery lightbox to view larger images on the Seasons theme and came across Featherlight - http://noelboss.github.io/featherlight/ - which looked great.

Using the tips on the Adding Lightbox to Omeka page (https://omeka.org/codex/Adding_LightBox_to_Omeka) I have modified Seasons so that the large image on the item show page, when clicked, shows the full size image in the Featherlight lightbox.

Download Featherlight and upload (from the "src" directory) featherlight.js into /seasons/javascripts/vendor and upload featherlight.css into /seasons/css

Open seasons/items/show.php in a text editor.

Add this to the very top of the file (before <?php etc)

queue_js_file('featherlight', 'javascripts/vendor');

Look for the code (originally line 8):

<?php echo files_for_item(array('imageSize' => 'fullsize')); ?>

And change it to

<?php echo files_for_item(array('imageSize' => 'fullsize', 'linkAttributes' => array('data-featherlight' => 'image'))); ?>

Save/upload the file replacing the old version (which you did back up, didn't you?)

Featherlight should now work. Visit an item page which displays an image and click it - a much larger version should be displayed in a nice responsive lightbox.

Hope this helps some folks.


Thanks, Tom! Appreciate the tips for the community!

No problem! I've asked enough questions already and will be asking more - it's the least I can do to give something back. Perhaps a forum for guides and tutorials might be useful?

Sadly, we needed to remove that from omeka.org due to excessive spamming. But, in our online documentation we have a recipes section that anyone could submit a pull request to for something like this.