Image-lightbox-on-native-image-element

– posted earlier on the regular forum, but was asked by @ruenel to post it here –

Hi,

I’m doubting a bit if this should be posted here or in the beta-forum. Feel free to move it :grinning:
In the upcoming 6.5.0 release there will be a ‘Image Lightbox Gallery’. I absolutely applaud that. I’ve been missing the simple option to add a ligthbox to an image-element for years now. As it looks, there’s finally something coming up for galleries. Which is great!
But galleries are complex, compared to single images. May I suggest to add default lightboxes to the single Image element as well, instead of having to use either the old shortcode or upcoming release of gallery solution?

Or am I missing something here, and is there by now a simple way to add a lightbox to a single image?

I can setup another template for a single image lightbox. We’re going to setup another template for ACF galleries as well. Have a great day.

so these are no native elements? how do you handle the “lightbox/modal” that it is responsive? i had problems when i used it as “lightbox” because it was not super responsive. => when image should be fuulscreen in height and width… so it does fit the screen… so in some cases i had problems on desktop/mobile.

also interesting: how can i handle it when the acf gallery is inside a repeater field? the trigger has to be unique?

thanks in advance

Sounds good. But perhaps something for a next release: expand the current div-element with an option to enable or disable a lightbox on that image. That would make it available for more people then when a separate template has to be download, I guess?

I created a single image lightbox if you guys want to give it a go. Let me know if you’d like to see more or added features to these templates and we can go from there.

https://theme.co/app/uploads/share/single-image-lightbox.tco
https://theme.co/app/uploads/share/single-image-lightbox-page.tco Page template version

There’s enough features shared between the image element, parameters, and modals to need a new element. If we want to see more designs I’m happy to setup some templates we can add to the templates tab. Object-fit contain does a good job at handling the responsiveness of the image when the modal is open in my experience.

I’m not sure what you mean by the gallery inside a repeater. As in there are images in a repeater or you are looping a repeater then looping an ACF gallery?

3 Likes