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

[Don]

	미리보기	Theme Creator
	저장소	GitHub - VaperinaDEV/discourse-custom-lightbox · GitHub
	설치 가이드	테마 또는 테마 컴포넌트 설치 방법
	디스커스 테마를 처음 사용하시나요?	디스커스 테마 사용 입문가이드

안녕하세요

이 테마 컴포넌트는 마그니픽 팝업(라이트박스/갤러리)을 수정하여, 특히 모바일에서 더 사용자 친화적이 되도록 합니다.

---

이 컴포넌트는 기본 마그니픽 팝업에 많은 변경 사항을 적용합니다.

• 더 현대적인 디자인
• 전체 화면 버튼 (단축키 F 키)
• 제목 표시/숨김 버튼
• 터치 스와이프 제스처
  • 오른쪽으로 스와이프 - 이전 이미지
  • 왼쪽으로 스와이프 - 다음 이미지
  • 아래로 스와이프 - 라이트박스 닫기

---

버튼 제목을 변경하기 위한 테마 번역.

zoom_in_button_title: "확대"
zoom_out_button_title: "축소"
close_button_title: "닫기 (Esc)"
fullscreen_button_title: "전체 화면 모드 (F)"
toggle_title_button_title: "정보 토글"

---

New Discourse Lightbox Enabled on Meta - now disabled 에서 영감을 받은 이 새로운 커스텀 라이트박스입니다.

---

여전히 구버전을 사용하시겠습니까?
old-custom-lightbox 브랜치를 통해 가능합니다.

[Mr.X_Mr.X]

좌우 스와이프를 통해 스크롤이 가능하면 좋겠습니다. 그 외에는 훌륭한 TC입니다.

[Don]

감사합니다! 네, 그렇게 하면 좋겠지만 불행히도 Magnific Popup은 스와이프 제스처를 지원하지 않습니다.

[Don]

테마 컴포넌트와 OP를 업데이트했습니다.

[Don]

안녕하세요

이 테마 컴포넌트를 업데이트했습니다

이번 업데이트에는 다음 내용이 포함되어 있습니다:

1. jQuery 제거
2. 라이트박스가 열릴 때 테마 색상을 검은색으로 변경. (예: 라이트박스 배경과 마찬가지로 상태 표시줄도 검은색으로 변경됨)
3. FontAwesome 6 아이콘으로 업데이트.
4. 이미지 위에 확대/축소 커서를 사용.

OP에 미리보기 링크를 추가했습니다.

[davidkingham]

정말 잘하셨네요, Don! 화살표, 다운로드 버튼, 이미지 개수를 이미지 바깥쪽으로 배치할 수 있는 옵션을 추가할 가능성이 있을까요? 사진 사이트에서는 사진의 일부가 가려지는 것이 좋지 않거든요. 방해 요소 없이 사진을 온전히 보고 싶습니다. 안 되시면 괜찮습니다. 감사합니다!

[Don]

데이비드, 감사합니다. 해결책을 찾아보겠습니다

아이디어는 다운로드, 원본 이미지, 제목, 카운터 같은 이미지 정보를 표시/숨길 수 있는 새로운 정보 버튼을 만드는 것입니다.

[davidkingham]

Don, 고마워요. 더 이렇게 생각하고 있었어요:

하지만 화살표도 이미지 밖으로 빼야 해요. 그렇게 하려면 이미지 주위에 여백을 두기 위해 이미지가 더 작아져야 합니다.

다른 옵션으로는 커서가 움직일 때까지 모든 정보를 숨기는 방식이 있지만, 그게 가능한지 확실하지 않아요.

[Don]

새로운 라이트박스 배치 방식에서 영감을 받아 컨셉을 하나 만들어 봤어요

이런 방식이면 충분히 작동할 것 같아요.

1. 버튼 단순화, 위치 변경, 화살표 크기 축소
2. 전체 화면 버튼과 하단 정보를 표시하는 정보 버튼 추가

[davidkingham]

좋아요! 잘 되길 바라요

[Don]

이 테마 컴포넌트에 대한 업데이트입니다 아직 병합되지는 않았지만 Theme Creator에서 작동 방식을 직접 확인해 볼 수 있습니다.

Custom Lightbox - modern, swipe gestures, fullscreen mode and more - #9 by Don 포스트에서 언급했던 변경 사항들입니다.

1. 전체 화면 버튼 (F 키로도 활성화할 수 있습니다)
2. 제목 표시/숨김 버튼
3. 확대된 상태일 때만 축소 아이콘 표시
4. 모바일에서 화살표 숨김
5. 터치스크린 기기에서 사용 편의성을 높이기 위해 터치 스와이프 동작도 추가했습니다.
   • 오른쪽으로 스와이프 - 이전 이미지
   • 왼쪽으로 스와이프 - 다음 이미지
   • 아래로 스와이프 - 라이트박스 닫기
6. 일부 UX 개선 사항

이번 업데이트로 설정 옵션도 제거됩니다.

[davidkingham]

좋아 보이네요, Don! 제가 발견한 문제는 이전/다음 화살표를 클릭하면 라이트박스가 닫힌다는 점입니다. 키보드의 화살표 키를 사용하면 정상적으로 작동합니다. 여러 브라우저를 시도해 봤지만 모두 같은 현상이 나타났습니다.

[Don]

@davidkingham

이전/다음 화살표를 클릭하면 라이트박스가 닫혀요

감사합니다. 이제 수정했습니다. 확인해 주시겠어요?

[davidkingham]

지금은 작동합니다!

[Don]

안녕하세요

새로운 커스텀 라이트박스()를 병합했습니다.

OP도 업데이트했어요…

FEATURE: New custom lightbox (#10)

[Don]

안녕하세요

터치 장치를 위한 누락된 기능을 병합했습니다: FEATURE: Change image click behaviour to toggle zoom on touchscreen · VaperinaDEV/discourse-custom-lightbox@7d588e2 · GitHub

이미지 내비게이션이 스와이프 제스처로 작동하므로, 이제 이미지 클릭을 이용해 확대/축소를 전환할 수 있습니다.

[Don]

안녕하세요

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

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

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

---

데스크톱 환경 개선:

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

---

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