그누보드 - 그누보드 Magnific Popup사용

그누보드 Magnific Popup사용 > 그누보드5 팁자료실

그누보드5 팁자료실

그누보드 Magnific Popup사용 정보

그누보드 Magnific Popup사용

본문

1. Magnific Popup 다운로드

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

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

3. Magnific-Popup 스크립트 로드


// 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);

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


/** 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();
});


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

5. Magnific Popup 사용
- Gallery Lightbox Group
- 사용형식 : <div class="lightbox" data-img-big="1" data-plugin-options='{"delegate": "a", "gallery": {"enabled": true}}'> ... </div>


<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>

- Gallery Lightbox Single Image
- 사용형식 : <a class="image-hover lightbox" href="test-images.jpg" data-plugin-options='{"type":"image"}'> ... </div>


<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>