전 과정에 이어서 포트폴리오에 이미지 클릭시 팝업 갤러리 이미지 구현과 버튼 클릭에 따른 페이지 로딩 작업을 진행하도록 하겠습니다.

• 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이 제대로 작동하는 것을 확인하실 수 있습니다.