I’m building a website with some blog posts. Each post contains multiple lightbox images. I’ve set up a “Lightbox Image” cwicly component. Inside the component there is a cwicly img block with the Lightbox toggle set to true. I left the Gallery field right below the Lightbox toggle field empty.
I need each image to open in its own, separate lightbox. Right now, all lightbox images on the page automatically get grouped under the same gallery slider. I understand that this happens because all images have the same gallery name (i.e. empty).
Ideally, I’d dynamically set the gallery field dynamically using a component text property, but cwicly does not allow for that level of customisation at this point, right?
Has anyone encountered a similar problem working with lightbox images and components?
I’m aware that there’s the alternative to set up the lightbox using a link action and there you can specify a gallery name. This would fix the issue but require a couple of extra steps, so I’m wondering if anybody knows of a workaround using the lightbox toggle on the img block itself.
There is no such functionality, as the library that is being used here, does not support it as an option. According to the author, 4 years ago, this was planned for the upcoming major version. As of today, this planned version hasn’t been released yet.
I’ve also gone trough the options, as there were several updates after this post, but couldn’t find it being implemented.
But even if there would be an option available in Cwicly from the UI, components would probably not support it yet.
You can try this or this approach and see if you have some luck.
thanks so much for pointing me in the right direction! I tried a couple different approaches and the second one you suggested got me 90% of the way there
In order to make that approach work inside cwicly I had to add an extra step: accessing the cwicly Lightbox instance and removing all elements that I had previously added the no-gallery class to.
So my final JS code looks like this:
window.addEventListener("DOMContentLoaded", () => {
const NO_GALLERY_LIGHTBOX_CLASS = "no-gallery"
const NO_GALLERY_LIGHTBOX_SELECTOR = `.${NO_GALLERY_LIGHTBOX_CLASS}`;
const allNoGalleryLightboxImgs = document.querySelectorAll(NO_GALLERY_LIGHTBOX_SELECTOR);
// Loop through all elements the cwicly Lightbox element is currently watching
// and remove those elements with the marker class above
window.CCLightbox.elements = window.CCLightbox.elements.filter(
lightboxTrigger => lightboxTrigger.node.querySelector(NO_GALLERY_LIGHTBOX_SELECTOR) === null
);
// Define alternative NO GALLERY lightbox element
const lightbox = GLightbox({
selector: NO_GALLERY_LIGHTBOX_SELECTOR,
skin: "no-gallery",
draggable: false,
keyboardNavigation: false,
touchNavigation: false,
});
// Attach altnernative NO GALLERY lightbox to on page lightbox elements
allNoGalleryLightboxImgs.forEach((img) => {
img.addEventListener('click', (event) => {
event.preventDefault();
// IMPORTANT: event.stopPropagation prevents the current click event to bubble up
// to cwicly's default lightbox click event listener
event.stopPropagation();
let parentLightboxLink = event.target.closest(".cc-lightbox")
let targetHref = parentLightboxLink.getAttribute('href');
lightbox.setElements([{ 'href': targetHref }])
lightbox.open()
})
})
// Make sure NO GALLERY lightbox can be closed with escape key
function closeLightbox(e) {
if (e.key === "Escape") {
lightbox.close();
}
}
lightbox.on("open", () => {
document.addEventListener("keydown", closeLightbox);
});
lightbox.on("close", () => {
document.removeEventListener("keydown", closeLightbox);
});
})
(sorry, can’t get the JS code to have proper syntax highlighting )
I haven’t thoroughly tested this or anything, so use the above code at your own risk
Thanks again @Marius for sharing the GitHub post, really appreciate it!
That’s great to hear that it worked @marc.
Thanks for sharing your solution. I think some other users may also benefit from this.
As a small side note, it may be the case that the code base of the lightbox functionality will be replaced at some point.
So it’s definitely worth taking a look at the changelog every time you update this site.
)