Ekko Lightbox is a super nice, Bootstrap-friendly lightbox library that can easily be made to play well with Sage 9 and WordPress galleries. Check it: Install Ekko Lightbox $ yarn add ekko-lightbox Import in Javascript At the top of the appropriate route (probably common.js), import ekko-lightbox: …

@MWDelaney , thanks for this, just the kind of lightbox I was looking for! I’d like to point out that if you include the css in you main.scss file it gets all the intended styling, too, which also plays a part in the way the modal’s content is loaded. In main.scss (I include node module imports abo…

And add this to your common.js if you want to auto-apply it to all image links: $('a[href]').filter(function() { return /(jpg|gif|png)$/.test( $(this).attr('href')) }).attr({'data-toggle': 'lightbox'}); $(document).on('click', '[data-toggle="lightbox"]', function(event) { event.preventDefault(…

I also needed to know when the active modal was a light box: // lightbox $('[data-toggle="lightbox"]').on('click', function(e) { e.preventDefault(); $(this).ekkoLightbox({ onShow: function() { $('body').addClass('lightbox-open'); }, onHidden: function() { $('body').remov…

Hi! Anyone tried to fire the lightbox from a link without any image? For example: <a class="gallery-link" data-toggle="lightbox" data-gallery="gallery-1">See The Gallery</a> I couldn’t get the way.

Hi, I’m getting the following error when trying the above approach… ekko-lightbox.js:97 Uncaught TypeError: Cannot read property ‘Constructor’ of undefined this._isBootstrap3 = $.fn.modal.Constructor.VERSION[0] == 3; Any ideas how to overcome this??

Figured it out… I hadn’t included the modal import in common.js import 'bootstrap/js/src/modal';

Lovely stuff. I can say goodbye to my other lightbox gallery plugins. By the way this requires some very slight modifications for Gutenberg: The new classes are ‘.blocks-gallery-item’ and ‘.wp-block-gallery’ You also have to set ‘Link to’ as ‘Media File’ in the Gutenberg editor. There is no ID on…

I can’t this working with Gutenberg default Gallery block. I have replace .gallery-item with .blocks-gallery-item'. And changed the ID to “ekko-gallery”` Some of the gallery markup is appearing, on click, but the corresponding image isn’t appearing in it. Seems to be missing CSS styling as well.

Unlikely; the project has been archived by its original developer, and the above jQuery code won’t work with Bootstrap 5.

Roots Discourse

How To: ekko-lightbox and Sage 9

sage

gajendrajena July 10, 2021, 8:53pm 10

Does the lightbox work with bootstrap 5?