그누보드 Magnific Popup사용

1. Magnific Popup 다운로드

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

2. 그누보드 업로드
업로드 위치 : /js/Magnific-Popup-master

3. Magnific-Popup 스크립트 로드
[code]
// Load Magnific Popup
add_javascript('<script src="'.G5_JS_URL.'/Magnific-Popup-master/dist/jquery.magnific-popup.min.js"></script>', 10);
add_stylesheet('<link rel="stylesheet" href="'.G5_JS_URL.'/Magnific-Popup-master/dist/magnific-popup.css">', 10);
[/code]

4. 스크립트 함수 추가 및 로드
- 스크립트 함수 파일 형태로 추가 -  위치 /js//Magnific-Popup-master/dist/load.magnific.popup.js
[code]

/** LightBox
 **************************************************************** **/
function lightbox() {
    var _el = jQuery(".lightbox");

    if(_el.length > 0) {

        if(typeof(jQuery.magnificPopup) == "undefined") {
            return false;
        }

        jQuery.extend(true, jQuery.magnificPopup.defaults, {
            tClose:         'Close',
            tLoading:         'Loading...',

            gallery: {
                tPrev:         'Previous',
                tNext:         'Next',
                tCounter:     '%curr% / %total%'
            },

            image:     { 
                tError:     'Image not loaded!' 
            },

            ajax:     { 
                tError:     'Content not loaded!' 
            }
        });

        _el.each(function() {

            var _t             = jQuery(this),
                options     = _t.attr('data-plugin-options'),
                config        = {},
                defaults     = {
                    type:                 'image',
                    fixedContentPos:     false,
                    fixedBgPos:         false,
                    mainClass:             'mfp-no-margins mfp-with-zoom',
                    closeOnContentClick: true,
                    closeOnBgClick:     true,
                    image: {
                        verticalFit:     true
                    },

                    zoom: {
                        enabled:         false,
                        duration:         300
                    },

                    gallery: {
                        enabled: false,
                        navigateByImgClick: true,
                        preload:             [0,1],
                        arrowMarkup:         '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>',
                        tPrev:                 'Previous',
                        tNext:                 'Next',
                        tCounter:             '<span class="mfp-counter">%curr% / %total%</span>'
                    },
                };

            if(_t.data("plugin-options")) {
                config = jQuery.extend({}, defaults, options, _t.data("plugin-options"));
            }

            jQuery(this).magnificPopup(config);

        });

    }

}

jQuery(window).ready(function () {
    lightbox();
});
[/code]

[code]
add_javascript('<script src="'.G5_JS_URL.'/Magnific-Popup-master/dist/load.magnific.popup.js"></script>', 10);
[/code]

5. Magnific Popup 사용
- Gallery Lightbox Group
- 사용형식 : &lt;div class="lightbox" data-img-big="1" data-plugin-options='{"delegate": "a", "gallery": {"enabled": true}}'&gt; ... &lt;/div&gt;
[code]

<div class="lightbox" data-img-big="1" data-plugin-options='{"delegate": "a", "gallery": {"enabled": true}}'>

    <a class="image-hover" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg">
        <img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" alt="...">
    </a>

    <a class="image-hover" href="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg">
        <img src="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_s.jpg" alt="...">
    </a>

    <a class="image-hover" href="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg">
        <img src="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" alt="...">
    </a>

</div>

[/code]

- Gallery Lightbox Single Image
- 사용형식 : &lt;a class="image-hover lightbox" href="test-images.jpg" data-plugin-options='{"type":"image"}'&gt; ... &lt;/div&gt;
[code]

<div class="masonry-gallery columns-5 clearfix">
    <a class="image-hover lightbox" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg" data-plugin-options='{"type":"image"}'>
        <span class="image-hover-icon image-hover-dark">
            <i class="fa fa-search-plus"></i>
        </span>
        <img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" alt="...">
    </a>

    <a class="image-hover lightbox" href="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg" data-plugin-options='{"type":"image"}'>
        <span class="image-hover-icon image-hover-dark">
            <i class="fa fa-search-plus"></i>
        </span>
        <img src="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_s.jpg" alt="...">
    </a>

    <a class="image-hover lightbox" href="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" data-plugin-options='{"type":"image"}'>
        <span class="image-hover-icon image-hover-dark">
            <i class="fa fa-search-plus"></i>
        </span>
        <img src="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" alt="...">
    </a>
</div>
[/code]