라이믹스/매뉴얼/포토스와이프 연동하기

상위 문서: 라이믹스/매뉴얼

1. 개요#

라이믹스의 PhotoSwipe(포토스와이프) 애드온은 본문의 이미지를 갤러리로 확대하여 보여 준다. 게시판 본문 이외의 영역에서도 지원하는 클래스 구조를 사용하여 연동할 수 있다. 아래 설명은 라이믹스에 포함된 애드온의 동작을 기준으로 하며, PhotoSwipe 라이브러리 자체를 별도로 설치하는 절차와는 구분한다.

2. 적용 전#

관리자 화면에서 포토스와이프 애드온이 대상 PC·모바일 환경에 활성화되어 있는지 확인한다. 테마에서 같은 갤러리 라이브러리를 중복 로딩하거나 이미지 클릭 이벤트를 가로채고 있지 않은지도 확인한다.

3. 기본 적용 범위#

애드온은 xe_content 클래스를 가진 요소 내부의 이미지를 찾아 갤러리에 등록한다.

<div class="xe_content">
    <img src="images/photo.jpg" alt="사진 설명" />
</div>

이미지 경로는 실제 자료의 경로로 바꾼다.

4. 제외와 강제 등록#

조건	기본 동작
이미지에 rx-escape	갤러리 대상에서 제외
이미지에 photoswipe-escape	갤러리 대상에서 제외
링크·코드 등 제외 요소 내부의 이미지	갤러리 대상에서 제외
이미지에 photoswipe-images	위 제외 조건보다 우선하여 등록 시도

제외하는 부모 요소는 a, pre, xml, textarea, input, select, option, code, script, style, iframe, button, img, embed, object, ins이다.

4.1. 일부 이미지 제외#

<div class="xe_content">
    <img src="images/photo.jpg" alt="갤러리 사진" />
    <img src="images/icon.png" alt="아이콘" class="photoswipe-escape" />
</div>

4.2. 링크 안에서도 등록#

<div class="xe_content">
    <a href="images/original.jpg">
        <img src="images/photo.jpg" alt="확대할 사진" class="photoswipe-images" />
    </a>
</div>

photoswipe-images를 지정하면 원래 링크 이동 대신 갤러리 동작을 시도한다. rx-escape나 photoswipe-escape와 함께 지정해도 강제 등록 클래스가 우선하므로, 제외하려는 이미지에는 동시에 넣지 않는다.

5. 동작 확인#

1. 이미지가 실제로 로딩되는지 확인한다.
2. xe_content 내부인지, 제외 클래스나 부모 요소가 있는지 확인한다.
3. 클릭 시 갤러리가 열리고 같은 영역의 사진으로 이동하는지 PC·모바일에서 확인한다.
4. 다른 애드온·테마의 클릭 처리와 충돌한다면 브라우저 콘솔과 이벤트 동작을 확인한다.

6. 같이 보기#

• 라이믹스/애드온
• 라이믹스/매뉴얼/테마 제작

7. 출처#

이 문서는 라이믹스 공식 매뉴얼을 바탕으로 설명과 예제를 정리하였다. 공식 매뉴얼은 CC BY-SA 4.0으로 배포된다. 원문의 기여 이력은 rhymix-docs 저장소에서 확인할 수 있다.