Custom Lightbox

[Don]

Hello This theme component is modify the magnific popup (lightbox/gallery) to make it more user friendly. I have an other topic about this but now I made a theme component from it. Changed it and add some settings too. Custom Lightbox Prototype

On desktop the close and zoom buttons align to top right position. The download button align to bottom left.

---

On mobile the close and zoom buttons align to bottom left position. The download button align to top left. But you can change the buttons position on mobile with site settings.

This component will make a lot of changes on lightbox and I try to make it modern, easy to use…

What is the difference between the original and custom lightbox?

1. Use full black background
2. Use fixed container (image always on screen) even if you scrolling
3. Remove paddings to view image on full screen
4. Add dedicated zoom button
5. Hide the default close button and add a custom one.
   The close button is not using Fontawesome icon by default. We have to create a new close button to have the ability using Fontawesome icon. This is make the zoom and close icons more similar and we can more align the close icon on cross platforms.
6. Hide image title and original image button
7. Move close, zoom buttons to .mfp-container. This will fixed the buttons position and make always visible even if you zoom the image and scroll it.
8. Redesign buttons
9. Disable the image click zoom in. Only can zoom in with the zoom button. After you zoomed in the image the image click will zoom out. On mobile the image click will jump to the next image. If you zoomed in and click the image or the arrow it will jump to the next image.
10. Add some settings to change the zoom and close button icons and buttons position.
11. Add setting to hide download button

Buttons position on mobile:

• close and zoom bottom left, download top left (default)
• close and zoom top right, download top left
• close and zoom top right, download bottom left

---

I have added some theme translation to change the zoom and close button title.

---

TODO: Try to drop most jQuery

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

[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.