[자바스크립트 플러그인]모바일 최적화(터치기능) 반응형 이미지 슬라이드 모달(팝업)창 플러그인

https://photoswipe.com/

PhotoSwipe: Responsive JavaScript Image Gallery

 

터치 - 스와이프(이미지넘기기) , 줌(확대) , 닫기(스와이프로 닫기) 등의 기능 제공

 

확대, 전체화면, 공유 기능 버튼 기본제공

 

썸네일, 이미지, 텍스트설명 기능

 

 

---

위 사이트에서 제공하는 예제를 통해 한번 살펴보면 다른 플러그인에 비해 설정해주어야할게 많지만 

예제가 잘 나와있어서 복사해서 변형해서 써도되고 스크립트를 잘 다룰줄 안다면 좀더 많은 기능을 쓸 수 있을것이다.

 

예제를 보면서 살짝 사용법을 살펴보자면 

 

https://codepen.io/dimsemenov/pen/ZYbPJM

Multiple PhotoSwipe galleries on pagea

 

<div>안에 있는 <figure>태그가 이미지 팝업 슬라이드의 list 가 된다. 

 <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a href="https://farm3.staticflickr.com/2567/5697107145_a4c2eaa0cd_o.jpg" itemprop="contentUrl" data-size="1024x1024">
          <img src="https://farm3.staticflickr.com/2567/5697107145_3c27ff3cd1_m.jpg" itemprop="thumbnail" alt="Image description" />
      </a>
  	  <figcaption itemprop="caption description">Image caption  1</figcaption>                                    
 </figure>

a태그안에 있는 img태그는 썸네일이 되고,  a링크에 적어준 이미지는 팝업을 통해 실제로 보여주는 원본 이미지이다.

 

figcaption은 이미지에 대한 설명으로 default-skin.min.css 를 적용하면 팝업창 아래쪽에 설명으로 나타난다. 

 

 

 

 

위쪽 코드가 이미지 리스트라면 아래쪽 코드는 실제 이미지 슬라이드가 나타나는 팝업창 관련 코드이므로 꼭 필요하다. 

다른예제를 보면 썸네일 없이 버튼하나로 팝업창을 열고, 팝업창에서 이미지 슬라이드를 보여주는 방식도 가능하다. 

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element, as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
        <!-- don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <!--  Controls are self-explanatory. Order can be changed. -->
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

          </div>

        </div>

</div>

 

 

 

좀더 간단한 플러그인을 찾고있다면

[javascript/jQuery] - [JAVASCRIPT/JQUERY]이미지슬라이드 플러그인 slick 옵션 설정하는 법(사용법)