커스텀 라이트박스 - 모던한 디자인, 스와이프 제스처, 풀스크린 모드 등

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

안녕하세요

새로운 업데이트가 나왔습니다!

이번 업데이트에는 여러 가지 디자인 개선 사항이 포함되어 있습니다:

• 라이트박스 주변의 패딩 제거
• 작은 이미지도 이제 확대할 수 있음
• 투명 검은색 배경의 새로운 버튼 디자인으로, 밝은 이미지 위에서도 버튼이 잘 보이도록 개선 등

---

데스크톱 환경 개선:

데스크톱에서 확대된 이미지의 스크롤링, 특히 가로 스크롤링이 매우 불편하고 사용자 친화적이지 않았습니다.
이번 업데이트에서는 커서를 따라가는 스크롤링 메커니즘을 도입하여 사용 경험을 향상시켰습니다.

---

DEV: Adds cursor follow mechanism for scrolling on desktop and some design update (#11)