Feature request: native lightbox support

Beta
#1

At the moment, we must rely on third-party plugins or custom scripts to achieve simple image, video, or content lightboxes or sort of replicate it with modals. While this works, a native option would be better.

A built-in lightbox would ideally cover these things:

  • Performance: It would probably be more efficient compared to external plugins. Less bloat and fewer HTTP requests, keeping sites lean and fast. A native solution would integrate seamlessly and improve Core Web Vitals scores compared to typical third-party options.

  • Accessibility: Lightboxes are notorious for accessibility issues. A native version could get it right from the start, handling keyboard navigation, focus trapping, ARIA attributes, and responsive scaling. This would make sites more inclusive and aligned with modern standards.

  • Accept any Cornerstone element, not just images. That would open the door to using it for video embeds, forms, or other content.

Bonus points if it’s mobile-friendly and adaptive. For example, switching to a full-screen modal on small screens rather than a traditional “floating box.”

2 Likes
#2

When I hear lightbox and look up lightbox examples online, it really just seems like a Modal in Cornerstone. I guess my question is, what would you like to see in our Modal element that would accomplish the goal of a Lightbox? Do you have a website I could look at with an example of what you are specifically thinking of? Have a great weekend.

#3

Yeah they seem to be the same but there’s a difference. Cornerstone’s modals are quite flexible, and with enough setup you can definitely recreate lightbox-style behavior. The main benefit of a dedicated lightbox feature would be making common media use cases faster, easier, and more accessible.

  • Lightboxes are optimized for displaying images, galleries, or videos with minimal UI. You wouldn’t need to manually remove modal padding, adjust layouts, or restyle each time. Built-in navigation (next/prev, keyboard arrows, swipe) would make galleries work seamlessly without additional configuration. No need to drag in a modal element and tweaking it.

  • Modals are general-purpose and often overkill for a simple image or gallery popup. A lightbox can attach directly to images or galleries without creating extra modal elements, which is easier and cleaner. There could be a toggle on media elements to “open in lightbox on click”.

  • While modals provide the building blocks, they leave accessibility up to the user. ARIA labeling, focus trapping, keyboard navigation, and returning focus all need to be set up manually. A native lightbox could handle this consistently out of the box.

  • Modals are best for actions and structured content like forms or announcements and other more complex content and layouts. Lightboxes are ideal for quick, immersive media viewing without interrupting the flow of the page. Having both keeps UX patterns clear and purposeful.

Here’s some example sites with many examples and use cases:


2 Likes
#4

I use this one for galleries its very lightweight.

I guess if it could be loaded on the fly when required would be a handy feature.

This has a Github for inspiration

Gallery
https://lokeshdhakar.com/projects/lightbox2/

You only need a small bit of html to then get the image poping up

<a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>

group

<a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>

Also could work nicely with that other idea @charlie Feature Request: Multi Select Image Control Type :grin:

3 Likes
#5

Would love to see a native lightbox element in CS!

I’ve built pages with galleries in the past where clients wanted to be able to zoom in and out. Since zooming is currently not supported by Cornerstone sliders, I’ve had to rely on other plugins.

Right now, when you try to zoom inside a slider, it often gets interpreted as swiping instead, which leads to a poor user experience.

1 Like
#6

I appreciate the examples. I think there is a number of features and templates we could bring to our modals to make this happen.

For the note about not being able to Zoom on mobile with our sliders, in our upcoming slider rewrite that is a feature / bugfix that is handled by Swiper.

Have a great day.

5 Likes
#7

Amazing, thank you.