20'C 흐림
서울 강남구
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>