Photoswipe

포토스와이프 연동하기¶

개요¶

포토스와이프 애드온은 게시판 본문 이외의 공간에서도 이미지를 갤러리 형식으로 보여주도록 고려한 기능을 포함하고 있습니다.

포토스와이프 적용 범위¶

포토스와이프 애드온은 xe_content 클래스를 가진 요소 내에서 이미지를 검색하고 갤러리로 나타냅니다.

코드 예시

<div class="xe_content">
    <img src="https://example.com/exampel_img.jpg" alt="This is an example image" />
</div>

이미지 제외 기능¶

위에서 적은 xe_content 클래스를 가진 요소 내 이미지라도 다음 클래스를 가지고 있다면 적용 대상에서 제외합니다.

이미지 제외 클래스¶

• rx-escape
• photoswipe-escape

위에 적은 클래스 외에 다음 요소의 자식 요소일 때에도 포토스와이프 적용 대상에서 제외됩니다.

이미지 제외 부모 요소¶

• a
• pre
• xml
• textarea
• input
• select
• option
• code
• script
• style
• iframe
• button
• img
• embed
• object
• ins

위 두 가지 경우에도 불구하고 다음 클래스라면 적용 대상입니다.

포토스와이프 등록 클래스¶

• photoswipe-images

포토스와이프 등록, 제외 예시¶

포토스와이프로 표시되는 이미지 예시와 제외되는 예시는 다음과 같습니다.

포토스와이프로 표시되는 이미지 예시¶

xe_content 의 자식 이미지¶

<div class="xe_content">
    <img src="https://example.com/exampel_img.jpg" alt="This is an example image" />
</div>

photoswipe-images 클래스의 이미지¶

<div class="xe_content">
    <img src="https://example.com/exampel_img.jpg" alt="This is an example image" class="photoswipe-images" />
</div>

제외 대상 부모 요소인 anchor 의 자식 요소더라도 photoswipe-images 를 클래스로 가진다면, 포토스와이프로 이미지를 표시하려는 시도를 합니다.

<div class="xe_content">
    <a href="https://example.com/this-link-will-be-ignored">
        <img src="https://example.com/exampel_img.jpg" alt="This is an example image" class="photoswipe-images" />
    </a>
</div>

제외 대상 클래스인 rx-escape 또는 photoswipe-escape 를 포함하더라도 photoswipe-images 를 클래스로 가진다면, 포토스와이프로 이미지를 표시합니다.

<div class="xe_content">
    <img src="https://example.com/exampel_img.jpg" alt="This is an example image" class="photoswipe-images rx-escape" />
</div>

포토스와이프로 표시되지 않는 이미지 예시¶

이미지 제외 클래스를 가진 경우¶

<div class="xe_content">
    <img src="https://example.com/exampel_img.jpg" alt="This is an example image" class="rx-escape" />
</div>

<div class="xe_content">
    <img src="https://example.com/exampel_img.jpg" alt="This is an example image" class="photoswipe-escape" />
</div>

이미지 제외 부모 요소가 있는 경우¶

<div class="xe_content">
    <a href="https://example.com/this-link-will-not-be-ignored">
        <img src="https://example.com/exampel_img.jpg" alt="This is an example image" />
    </a>
</div>