Lightbox for Items show page for Omeka S

[ckarpinski]

Does anyone have instructions for adding lightbox for item show pages similar to the Omeka Classic instructions here: Adding Lightbox to Omeka - Omeka Classic User Manual

I can add the CSS, JS and image files but I dont know how to change the show.php for an item to use it. Right now if you click the image the file opens in the browser, so it just needs the lightbox on the link.

<?php if ($embedMedia && $itemMedia): ?>

<div class="media-embeds">
<?php foreach ($itemMedia as $media):
    echo $media->render();
endforeach;
?>
</div>

<?php endif; ?>

[ckarpinski]

I found a way to add Magnific Popup (which does the image overlay like Lightbox does) to get the result I was looking for. It does not require you to add attributes to the link like Lightbox does.

In case it is helpful to anyone else:

I am using the “default” theme

Here is the Magnific Popup site Magnific Popup Documentation

1. I added the css and javascript files from Magnific popup to my theme, putting them inside asset>css and asset>js

2. Then I added the file paths to this file in my theme view>layout> layout.phtml (using the default.js line that is already in the file as a guide for how to format it)

3. The jquery is already linked - but i did have to move it to the bottom of the list of files in the layout.phtml to make sure it loads before the magnific popup js file.

4. Then I added the script to initialize the popup using the “from a group of elements with one parent” method. I put this directly in the item show file - view>omeka>site>item>show.phtml
   I used the class name media-render where the documentation has parent-container like this:

$('.media-render').magnificPopup({
  delegate: 'a', // child items selector, by clicking on it popup will open
  type: 'image'
  // other options
});

I think there is likely a better place to put this or way to include it? - if anyone knows would love to hear.

Now on my item show pages when you click the image file it opens in an overlay with a close button at top right.

[jflatnes]

You can do the JS part where you have it, directly in the file… if you’re only using it in that one place that’s probably the simplest option, really.

Otherwise you can write it as a .js file which would go under the theme’s “asset” folder, and then you can include it on a page or every page with the headScript helper.

[ckarpinski]

Oh yes that makes sense, thank you!