자세한 설명은생략..
$.datepicker.regional['ko'] = {
closeText: '닫기',prevText: '이전달',nextText: '다음달',currentText: '오늘',
monthNames: ['1월(JAN)','2월(FEB)','3월(MAR)','4월(APR)','5월(MAY)','6월(JUN)','7월(JUL)','8월(AUG)','9월(SEP)','10월(OCT)','11월(NOV)','12월(DEC)'],
monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
dayNames: ['일','월','화','수','목','금','토'],dayNamesShort: ['일','월','화','수','목','금','토'],dayNamesMin: ['일','월','화','수','목','금','토'],
weekHeader: 'Wk',dateFormat: 'yy-mm-dd',firstDay: 0,isRTL: false,showMonthAfterYear: true,yearSuffix: '',
changeMonth: true,showButtonPanel: true,changeYear: true,
};
$.datepicker.setDefaults($.datepicker.regional['ko']);
$('#sform').find(".sdate").datepicker({beforeShow: setDatepickerClear,onChangeMonthYear: setDatepickerClear , onClose: customRangeCheck});
$('#sform').find(".edate").datepicker({beforeShow: customRange, onChangeMonthYear: setDatepickerClear});
$('#sform').on('focus', '.sdate, .edate', function(e){
$(this).trigger('blur'); // for mobile : virtual keyboard issue
});
function customRange(input) {
if($('#sform').find(".sdate").val() ==''){
alert('시작일을 먼저 선택하세요');
$('#sform').find(".sdate").focus();
return false;
}
var min_date = $('#sform').find(".sdate").datepicker('getDate');
setDatepickerClear(input);
return { minDate: min_date};
}
function customRangeCheck(input) {
if($('#sform').find(".sdate").val() ==''){
$('#sform').find(".edate").val('');
}
}
function setDatepickerClear(input){
setTimeout(function() {
var buttonPane = $( input ).datepicker( "widget" ).find( ".ui-datepicker-buttonpane" );
$( "<button>", {text: "입력취소",click: function() {
$.datepicker._clearDate( input );
}}).appendTo( buttonPane ).addClass("ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all");
}, 1 );
}
$(function(){
$.fn.extend({
/*
animateCss: function (animationName) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
this.addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
});
}
*/
//콜백추가
animateCss: function (animationName, callback) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$(this).addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
if(typeof callback === 'function') {
callback(1);
}
});
}
});
});
(function() {
function async_load(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = '//s7.addthis.com/js/300/addthis_widget.js#pubid=[key]';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
window.attachEvent ? window.attachEvent('onload', async_load) : window.addEventListener('load', async_load, false);
})();
활용소스(퍼블리싱단 a태그에 photoswipe_view class 추가하면 자동처리)
view영역
일반 :
<a href="원본이미지1" class="photoswipe_view" ><img src="썸네일이미지" class='preview_files' /></a>
<a href="원본이미지2" class="photoswipe_view" ><img src="썸네일이미지" class='preview_files' /></a>
<a href="원본이미지3" class="photoswipe_view" ><img src="썸네일이미지" class='preview_files' /></a>
그룹핑
<a href="그룹1 원본이미지1" class="photoswipe_view" data-group="guide_pop1"><img src="썸네일이미지" class='preview_files' /></a>
<a href="그룹1 원본이미지2" class="photoswipe_view" data-group="guide_pop1"><img src="썸네일이미지" class='preview_files' /></a>
<a href="그룹2 원본이미지1" class="photoswipe_view" data-group="guide_pop2"><img src="썸네일이미지" class='preview_files' /></a>
html 인클루드 (body최하단 퍼블리싱wrap 영역바깥쪽에위치)
<link rel="stylesheet" href="/vendor/PhotoSwipe/dist/photoswipe.css">
<link rel="stylesheet" href="/vendor/PhotoSwipe/dist/default-skin/default-skin.css">
<script src="/vendor/PhotoSwipe/dist/photoswipe.min.js"></script>
<script src="/vendor/PhotoSwipe/dist/photoswipe-ui-default.min.js"></script>
<script src="/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<?/*<button class="pswp__button pswp__button--share" title="Share"></button>*/?>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
</button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
js(jquery)
<script type="text/javascript">
<!--
$(document).ready(function(){
//이미지 그룹핑 a태그에 data-group 속성이 같은것끼리 묶음
var getMeta = function(url, callback) {
var img = new Image();
img.src = url;
img.onload = function() { callback(this.width, this.height); }
}
var items_group = {};
var item_group_name_seq = 0;
$(document).find('a.photoswipe_view').each(function(key,val){
var $this = $(this);
var src = $this.attr('href');
var image_titles = $this.attr('title');
var item_group_name = $this.data('group');
if(!item_group_name){
item_group_name = 'photoswipe_items_'+item_group_name_seq;
item_group_name_seq++;
$this.attr('data-group', item_group_name);
}
if (!items_group[item_group_name]){
items_group[item_group_name] = [];
}
getMeta(src, function(width, height){
items_group[item_group_name].push({'src': src, 'w': width, 'h': height, title: image_titles});
});
});
var openPhotoSwipe = function(index,item_group_name) {
if(!item_group_name) return;
var pswpElement = document.querySelectorAll('.pswp')[0];
var items = items_group[item_group_name];
// define options (if needed)
var options = {index: index, history: false, bgOpacity : 0.7, closeOnScroll: false};
gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
if(item_group_name.indexOf('guide_pop') != -1){
gallery.zoomTo(1);
}
/*if(item_group_name == 'guide_pop'){
gallery.zoomTo(1);
}*/
};
$('a.photoswipe_view').click(function(e){
e.preventDefault();
var $this = $(this);
var item_group_name = $(this).data('group');
if(!item_group_name) return;
var sel = $("a.photoswipe_view[data-group='"+item_group_name+"']").index($this);
openPhotoSwipe(sel, item_group_name);
});
/*
전체이미지를 하나의 그룹으로 처리
var items = [];
$(document).find('a.photoswipe_view').each(function(key,val){
var src = $(this).attr('href');
getMeta(src, function(width, height){
items[key] = {'src': src, 'w': width, 'h': height };
});
});
var openPhotoSwipe = function(index) {
var pswpElement = document.querySelectorAll('.pswp')[0];
// define options (if needed)
var options = {index: index, history: false, bgOpacity : 0.7};
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
};
$('a.photoswipe_view').click(function(e){
e.preventDefault();
sel = $("a.photoswipe_view").index($(this));
openPhotoSwipe(sel);
});
*/
});
//-->
</script>
댓글