팝업창 라이브러리(magnific-popup)

https://github.com/dimsemenov/Magnific-Popup/

GitHub - dimsemenov/Magnific-Popup: Light and responsive lightbox script with focus on performance.

접속해서 사용법과 파일을 제공받을 수 있다.

(dist 폴더에 있는 파일들만 필요함)

사용방법은 설명서를 읽는것보다 코드펜 예시로 보는게 더 간편하다.

 

<내가 했던 것 >

이미지를 클릭하면 팝업창이 뜨면서 이미지 원본을 볼 수 있는 기능

 

 

HTML

<a href="../images/assets/piece/pic_01.jpg" class="open_pic" title="육근병 : The sound for field ">

<img src="../images/assets/piece/pic_01.jpg" alt="01">
<p class="name piece ko_medium ko_15">The sound for field</p>
<p class="artist artist ko_light ko_15">육근병</p>

</a>

• a href = " 원본사진을 띄울 주소 "
• class = " 클래스네임 지정 (제이쿼리에 연결시키기 위해)"
• title = "이미지 원본 밑에 나타나는 제목"

js파일을 따로 만든 후 

<script src="../layout/scripts/gallery_popup.js"></script>

이곳에다가 코드펜에 있는 js코드를 가져다 붙여주면 된다. 

JS

$('클래스네임').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    closeBtnInside: false,
    mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
    image: {
        verticalFit: true
    },
    zoom: {
        enabled: true,
        duration: 400 // don't foget to change the duration also in CSS
    }
});

 

참고했던 예시

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

Image zoom effect for Magnific Popup

 

내가 만든 예시 : 대구미술관 소장품 페이지