전 과정에 이어서 포트폴리오에 이미지 클릭시 팝업 갤러리 이미지 구현과 버튼 클릭에 따른 페이지 로딩 작업을 진행하도록 하겠습니다.
- Magnific Popup: 이미지 클릭시 팝업
이제는 조금 익숙해졌을 듯 합니다.
Magnific Popup 사이트 에서 파일을 다운받고 functions.php 파일에 css, js 파일을 등록하도록 하겠습니다.
functions.php
// css: Magnific-Popup-master wp_enqueue_style( 'zeein-magnific-popup', get_stylesheet_directory_uri() . '/assets/Magnific-Popup-master/dist/magnific-popup.css', array(), '20171116' );
//Magnific-Popup-master wp_enqueue_script( 'zeein-jquery.magnific-popup.min', get_stylesheet_directory_uri() . '/assets/Magnific-Popup-master/dist/jquery.magnific-popup.min.js', array(), 'v1.1.0', true ); // custom wp_enqueue_script( 'zeein-custom.js', get_stylesheet_directory_uri() . '/assets/js/custom.js', array(), 'v1.0', true );
css와 js 모두 등록을 하였다면 사이트를 참고해서 jquery에 관련된 내용을 삽입하도록 하겠습니다.
custom.js
// init Magnific function initMagnific() { $('.show-popup').on('click', function(e){ if(e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } }); $('.show-popup').magnificPopup({ type: 'image', gallery:{ enabled:true }, disableOn: function() { if( $(window).width() <span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>< 576 ) { return false; } return true; } }); } $( document ).ready(function() { initSlick(); initMasonry(); initMagnific(); });
58: 우선 .show-popup 클랙스가 a 태그 이므로 event.preventDefault();를 이용해 이벤트를 작동하지 않도록 처리 합니다.
보통 a 태그를 클릭하면 페이지 이동을 하거나 페이지내 ID로 이동을 하는데 클릭해도 아무 반응이 없는 것을 확인 하실 수 있습니다.
65: magnificPopup을 정의 합니다.
70: 윈도우 폭의 사이즈가 576보다 작을때 기능을 정지 시키는 옵션을 추가 했습니다.(모바일 사이즈에서 기능 해제)
이제 Detail Image를 클릭하면 popup이 제대로 작동하는 것을 확인하실 수 있습니다.