Custom Lightbox - modern, swipe gestures, fullscreen mode and more

[Don]

	Preview	Theme Creator
	Repository	GitHub - VaperinaDEV/discourse-custom-lightbox · GitHub
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Hello

This theme component is modify the magnific popup (lightbox/gallery) to make it more user friendly especially on mobile.

---

This component will make a lot of changes on the default magnific popup.

• More modern design
• Fullscreen button (shortcut F key)
• Show/hide title button
• Touch swipe gestures
  • swipe right - previous image
  • swipe left - next image
  • swipe down - close lightbox

---

Theme translations to change the buttons title.

zoom_in_button_title: "Zoom In"
zoom_out_button_title: "Zoom Out"
close_button_title: "Close (Esc)"
fullscreen_button_title: "Fullscreen mode (F)"
toggle_title_button_title: "Toggle Info"

---

This new custom lightbox, inspired by New Discourse Lightbox Enabled on Meta - now disabled

---

Still want to use the old version?
You can with the old-custom-lightbox branch.

[Mr.X_Mr.X]

Would be great if scrolling could be done by swipe left right. Besides that, great tc.

[Don]

Thanks! Yes that would be great but unfortunately Magnific Popup doesn’t support swipe gestures.

[Don]

I have updated the theme component and the OP.

[Don]

Hello

I’ve updated this theme component

This update contains the following:

1. Drop jQuery
2. Change the theme-color to black when the lightbox opens. (e.g. the status bar will also be black as the lightbox background)
3. Update to FontAwesome 6 icons.
4. Use zoom-in and zoom-out cursors on image.

I’ve added a preview link to the OP.

[davidkingham]

Very nice Don, any chance you could add an option to push the arrows, download button and image count to the outside of the image? On a photography site it’s not good to cover up parts of the photo, we want to see the entire photo without distractions. No worries if not, thanks!

[Don]

Thanks David, I will looking into a solution

The idea is create a new info button to show/hide the image informations such as download, original image, title and counter maybe.

[davidkingham]

Thanks Don, I was thinking more like this:

But also move the arrows outside of the image, it would require the image being smaller to have some padding around the edges for this.

The other option would be hiding all the information until the cursor moves, not sure if that’s possible.

[Don]

I’ve got some inspiration from how it arranges with the new lightbox and I made a concept

I think something like this probably can works.

1. simplify buttons, change positions, smaller arrows
2. add fullscreen button and info button to show bottom infos

[davidkingham]

Love it! Hope you can make it work

[Don]

Here is the update for this theme component It’s not merged yet but you can try how it works on Theme Creator.

Changes like I mentioned in this Custom Lightbox - modern, swipe gestures, fullscreen mode and more - #9 by Don post.

1. Fullscreen button (you can trigger it with F key too)
2. Show/hide title button
3. Only show zoom-out icon when you zoomed in.
4. Hide arrows on mobile
5. Also added touch swipe actions to make it more comfortable to use on touchscreen devices.
   • swipe right - previous image
   • swipe left - next image
   • swipe down - close lightbox
6. Some UX tweaks

This update will also removes the settings.

[davidkingham]

Looks nice Don! The only issue I’m seeing is when I click the prev/next arrows it closes the lightbox, if you use the keyboard arrows it does work as expected. I tried various browsers and it does the same thing.

[Don]

@davidkingham

when I click the prev/next arrows it closes the lightbox

Thanks, I fixed it now. Can you check it?

[davidkingham]

Working now!

[Don]

Hello

I’ve merged the new custom lightbox

Updated the OP too…

https://github.com/VaperinaDEV/discourse-custom-lightbox/pull/10

[Don]

Hello

I merged a missing feature to touch devices: FEATURE: Change image click behaviour to toggle zoom on touchscreen · VaperinaDEV/discourse-custom-lightbox@7d588e2 · GitHub

The image navigation is working with swipe gestures so now we can use the image click to toggle zoom in/out.

[Don]

Hello

Here’s a new update!

This update includes several design improvements:

• Removed padding around the lightbox
• Small images can now be zoomed as well
• New button design with a transparent black background, making buttons visible on light images too etc.

---

Desktop enhancement:

Zoomed image scrolling on desktop especially horizontal scrolling was not very easy or user-friendly.
This update introduces a cursor follow scrolling mechanism to improve the experience.

---

https://github.com/VaperinaDEV/discourse-custom-lightbox/pull/11/files