| 그리고, 썸네일을 생성하여 활용하기 |
- 강제 적용되는 티스토리의 Light TT EX 플러그인은 작동중지.
- 뷰어는 브라우저의 꽉찬 화면으로 팝업.
- 모니터 보다 해상도가 큰 사진이라도 꽉찬 화면으로 출력.
- 모니터 해상도 보다 큰 사이즈의 파노라마는 스크롤 가능 with 마우스 휠.
- 뷰어에서 마우스 클릭 및 좌, 우 방향키 사용 가능.
- 썸네일은 뷰어의 기능과 맵 기능을 가짐. (양자 택일)
- 스크립트 최적화.
| Demo & Code |
[Demo] 티스토리, 포토 뷰어 만들기
포토 뷰어 만들고 썸네일 생성하여 활용하기
dd-stuff.tistory.com
/* CSS */
/* 커서 */
.imageblock img, #galT .imgCon, #gal .pnBtn.reveal:hover, #gal .viewer { cursor:pointer }
/* 썸네일 */
#thumbL { margin:100px 0px }
#thumbL p { margin-bottom:14px !important; text-align:center; letter-spacing:1px; font-weight:400; font-style:italic }
#galT { width:100%; height:auto; padding:16px 0px; background-color:rgba(0,0,0,.02); border:1px solid rgba(0,0,0,0.05);
border-radius:4px; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-evenly; align-items:center; align-content:center }
#galT .imgCon { display:flex; justify-content:center; align-items:center; width:150px; height:100px; background-color:rgba(0,0,0,0.05);
margin:8px 0px; border:1px solid rgba(0,0,0,.2) }
#galT.gray .imgCon { filter:grayscale(100%) }
#galT.gray .imgCon:hover { filter:grayscale(0%) }
#galT .imgCon img.land.r43 { width:auto; height:100px }
#galT .imgCon img.land { width:150px; height:auto }
#galT .imgCon img.port { width:auto; height:100px }
#galT .imgCon img.square { width:auto; height:100px }
#galT .imgCon img.pano { width:150px; height:auto }
@media screen and (max-width:480px) {
#galT .imgCon { width:120px; height:80px }
#galT .imgCon img.land.r43 { width:auto; height:80px }
#galT .imgCon img.land { width:120px; height:auto }
#galT .imgCon img.port { width:auto; height:80px }
#galT .imgCon img.square { width:auto; height:80px }
#galT .imgCon img.pano { width:120px; height:auto }
}
/* 썸네일 복귀 버튼 */
.trBtn { display:none }
.trBtn.reveal { position:fixed; display:flex; justify-content:center; align-items:center; width:fit-content; height:fit-content; left:74%; top:50%; transform:translateY(-50%); background-color:rgba(0,0,0,0.7); color:#fff; font-size:20px; padding:3px 3px 6px 3px; border:1px solid rgba(255,255,255,0.7); border-radius:50%; cursor:pointer }
/* 뷰어 */
#gal { display:none }
#gal.reveal { display:flex !important; position:fixed; justify-content:center; align-items:center; width:100%; height:100%; left:0; top:0; background-color:#000; z-index:9999 }
#gal .viewer { overflow-y:hidden }
#gal .viewer.pano { overflow-x:scroll; scroll-behavior:smooth }
/* 뷰어 내 이미지 */
#gal .viewer img { border:1px solid rgba(255,255,255,0.05) }
/* 뷰어 내 좌우 버튼 */
#gal .pnBtn { display:none }
#gal .pnBtn.reveal { display:flex; justify-content:center; align-items:center; position:absolute; width:60px; height:50%; top:50%; transform:translateY(-50%); color:rgba(255,255,255,0.7) }
#gal .pnBtn.reveal:hover { background-color:rgba(255,255,255,0.08) }
#gal .pnBtn.reveal span { font-size:26px; color:#fff; text-shadow:1px 1px 1px 1px rgba(0,0,0,0.1) -1px -1px 1px 1px rgba(0,0,0,0.1) }
#gal #left { left:16px }
#gal #right { left:calc(100% - 76px) }
@media screen and (max-width:1280px) {
#gal #left { left:0px }
#gal #right { left:calc(100% - 60px) }
#gal .pnBtn.reveal:hover { background-color:transparent }
}
/* Javascript */
// 사용자 설정
// 썸네일 생성 유무 || on or off
const thumbOpt = 'on';
// 썸네일 레이어가 들어갈 위치 || 지정한 위치 바로 윗쪽에 썸네일 레이어가 만들어짐 || 기본값은 공감 버튼이 들어있는 레이어
const thumbPosition = '.postbtn_like'
// 썸네일 레이어 헤드라인 || 필요없으면 따옴표 안의 내용 지울 것
const thumbTxt = 'i.m.a.g.e.m.a.p';
// 썸네일에 흑백 필터 적용 유무 || on or off
const thumbColor = 'on';
// 썸네일 클릭시의 기능 설정 || 0 - 이미지 뷰어 || 1 - 이미지 맵 (원본 이미지의 위치로 이동)
const thumbFn = 1;
// 썸네일의 기능이 이미지 맵일 때, 썸네일 레이어로의 복귀 버튼 || 텍스트, 이미지 기타 등등
const thumbFnRbtn = '⚓';
// 파노라마 사진일 경우 X축 스크롤 스피드
const sSpeed = 600;
const _0x476684=_0x5d92;(function(_0x365236,_0x3b8d4a){const _0x179aca=_0x5d92,_0x528604=_0x365236();while(!![]){try{const _0x9e14b5=parseInt(_0x179aca(0x229))/0x1+parseInt(_0x179aca(0x240))/0x2*(parseInt(_0x179aca(0x20b))/0x3)+-parseInt(_0x179aca(0x1f8))/0x4*(-parseInt(_0x179aca(0x200))/0x5)+parseInt(_0x179aca(0x202))/0x6+parseInt(_0x179aca(0x1d5))/0x7+parseInt(_0x179aca(0x23c))/0x8+-parseInt(_0x179aca(0x225))/0x9*(parseInt(_0x179aca(0x1c2))/0xa);if(_0x9e14b5===_0x3b8d4a)break;else _0x528604['push'](_0x528604['shift']());}catch(_0x12b46e){_0x528604['push'](_0x528604['shift']());}}}(_0x238f,0xed600));function _0x238f(){const _0x649bd9=['log','bind','ArrowLeft','reveal','.imageblock\x20img','font-family:\x27arial\x27;\x20color:#4aa3ff;\x20font-size:18px','<img\x20id=\x22','land\x20r32','getAttribute','smooth','body','\x22\x20data-width=\x22','getElementsByTagName','removeEventListener','hidden','font-family:\x27arial\x27;\x20font-size:14px;','%cPhoto\x20Viewer\x20for\x20TISTORY','forEach','#gal\x20.pnBtn','beforebegin','\x20small','328dlkhwV','vimg','land','\x22\x20data-height=\x22','16:9','indexOf','load','default','71430MwgtAl','#left','2164374BAgzmV','lastChild','left','#gal\x20#left','click','none','\x22\x20src=\x22','width','scroll','3SdEZDL','font-family:\x27arial\x27;\x20font-size:16px;\x20color:crimson','</div>','3:2','querySelector','DOMContentLoaded','scrollLeft','#gal\x20.viewer','#thumbL','\x22\x20style=\x22width:','2:3','add','innerHeight','data-lightbox','#left,\x20#right','span','setItem','querySelectorAll','pointer','\x22\x20style=\x22width:auto;\x20height:','imageblock','getItem','key','abs','.imageblock','clientHeight','249633RrdeWX','ArrowRight','opacity','offsetTop','1771193xkegJm','parentNode','10:16','innerWidth','position','contains','last','setAttribute','px;\x20height:auto\x22\x20data-width=\x22','deltaY','square','width:','.trBtn','cursor','keyup','scrollTo','addEventListener','<div\x20class=\x22imgCon\x22></div>','#gal\x20#right','1099048rwJGvp','outerHTML','push','overflowY','1362442OGVKfd','</p><div\x20id=\x22galT\x22></div></div>','getElementsByClassName','replace','9:16','html','3:4','class','px\x22\x20data-width=\x22','1530sZZVYP','remove','src','#galT','innerHTML','port','pano','style','16:10','img','split','auto','vimg1','scrollY','classList','length','.imageslideblock','insertAdjacentHTML','#gal','7658511MVYyjd','wheel','port\x20r_pano','imgNum','%cDesigned\x20by\x20ddamddon','#gal\x20.viewer\x20img','<img\x20src=\x22','orientation','<div\x20id=\x22gal\x22\x20class><div\x20id=\x22left\x22\x20class=\x22pnBtn\x22><span>‹</span></div><div\x20id=\x22right\x22\x20class=\x22pnBtn\x22><span>›</span></div><div\x20class=\x22viewer\x22></div></div>','offsetHeight','beforeend','mousemove','gray','onmousemove'];_0x238f=function(){return _0x649bd9;};return _0x238f();}function _0x5d92(_0x25aa34,_0x135305){const _0x238fe3=_0x238f();return _0x5d92=function(_0x5d9210,_0x46bc8f){_0x5d9210=_0x5d9210-0x1bb;let _0xb2b7e4=_0x238fe3[_0x5d9210];return _0xb2b7e4;},_0x5d92(_0x25aa34,_0x135305);}function del_lighttt(){const _0x465dfb=_0x5d92;var _0x2807ca=document[_0x465dfb(0x1ef)](_0x465dfb(0x21a));for(var _0x6ba90d=0x0;_0x6ba90d<_0x2807ca['length'];_0x6ba90d++){_0x2807ca[_0x6ba90d]['getAttribute'](_0x465dfb(0x218))=='lightbox'&&(_0x2807ca[_0x6ba90d][_0x465dfb(0x23d)]=_0x2807ca[_0x6ba90d]['outerHTML'][_0x465dfb(0x1cc)]('data-lightbox=\x22lightbox\x22')['join'](''));}window[_0x465dfb(0x1f0)]('DOMContentLoaded',del_lighttt);}window[_0x476684(0x239)](_0x476684(0x210),del_lighttt),window['addEventListener'](_0x476684(0x1fe),function(){const _0xafd3e4=_0x476684;if(document[_0xafd3e4(0x20f)]('body')['id']=='tt-body-page'&&document[_0xafd3e4(0x20f)](_0xafd3e4(0x223))){const _0x109f10=Number(screen[_0xafd3e4(0x209)]);document[_0xafd3e4(0x20f)](_0xafd3e4(0x1ed))[_0xafd3e4(0x1d3)](_0xafd3e4(0x1df),_0xafd3e4(0x1dd));let _0x2588f1=[];setTimeout(()=>{const _0x29b834=_0xafd3e4;document['querySelectorAll'](_0x29b834(0x223))[_0x29b834(0x1f4)](function(_0x5996b9,_0x31f27c){const _0x1003d4=_0x29b834;_0x5996b9[_0x1003d4(0x20f)](_0x1003d4(0x1cb))[_0x1003d4(0x230)]('id','img'+_0x31f27c);let _0x4762fb=_0x5996b9[_0x1003d4(0x20f)](_0x1003d4(0x1cb))[_0x1003d4(0x1eb)](_0x1003d4(0x1c4)),_0x3f859d=_0x5996b9['getAttribute']('data-origin-width'),_0x107ddc=_0x5996b9['getAttribute']('data-origin-height'),_0x4d3db5=_0x5996b9['offsetTop'];_0x2588f1[_0x1003d4(0x23e)]([_0x4762fb,_0x3f859d,_0x107ddc,_0x4d3db5]);}),document[_0x29b834(0x21c)](_0x29b834(0x1e7))[_0x29b834(0x1f4)](function(_0x510e41,_0x5f02f5){const _0x13afba=_0x29b834;let _0x3705a2=_0x2588f1[_0x5f02f5][0x1],_0x53bc76=_0x2588f1[_0x5f02f5][0x2],_0x3f3023=_0x13afba(0x1f9)+_0x5f02f5,_0x64cc0e=_0xf3ba08(_0x3705a2,_0x53bc76),_0x3982ab=_0x3705a2/_0x64cc0e,_0x203d9b=_0x53bc76/_0x64cc0e,_0x2a9688=_0x3982ab+':'+_0x203d9b,_0x5b721a;if(Number(_0x3705a2)>Number(_0x53bc76)){if(_0x2a9688=='4:3')_0x5b721a='land\x20r43';else{if(_0x2a9688==_0x13afba(0x20e))_0x5b721a=_0x13afba(0x1ea);else{if(_0x2a9688=='16:9'||_0x2a9688==_0x13afba(0x1ca)||_0x64cc0e>=0x3&&_0x64cc0e<=0x2d)_0x5b721a='pano';else(_0x2a9688!='4:3'||_0x2a9688!=_0x13afba(0x20e)||_0x2a9688!=_0x13afba(0x1fc)||_0x2a9688!=_0x13afba(0x1ca))&&(_0x5b721a=_0x13afba(0x1fa));}}}else{if(Number(_0x3705a2)<Number(_0x53bc76)){if(_0x2a9688==_0x13afba(0x1bf))_0x5b721a='port\x20r43';else{if(_0x2a9688==_0x13afba(0x215))_0x5b721a='port\x20r32';else{if(_0x2a9688=='9:16'||_0x2a9688==_0x13afba(0x22b)||_0x64cc0e>=0x3&&_0x64cc0e<=0x2d)_0x5b721a=_0x13afba(0x1d7);else(_0x2a9688!=_0x13afba(0x1bf)||_0x2a9688!=_0x13afba(0x215)||_0x2a9688!=_0x13afba(0x1bd)||_0x2a9688!=_0x13afba(0x22b))&&(_0x5b721a=_0x13afba(0x1c7));}}}else Number(_0x3705a2)==Number(_0x53bc76)&&(_0x5b721a='square');}_0x53bc76<=window[_0x13afba(0x217)]&&(_0x5b721a=_0x5b721a+_0x13afba(0x1f7)),_0x2588f1[_0x5f02f5][_0x13afba(0x23e)](_0x5b721a);});thumbOpt=='on'&&(thumbTxt!=''?document[_0x29b834(0x20f)](thumbPosition)[_0x29b834(0x22a)][_0x29b834(0x1d3)](_0x29b834(0x1f6),'<div\x20id=\x22thumbL\x22><p>'+thumbTxt+_0x29b834(0x241)):document['querySelector'](thumbPosition)[_0x29b834(0x22a)][_0x29b834(0x1d3)](_0x29b834(0x1f6),'<div\x20id=\x22thumbL\x22><div\x20id=\x22galT\x22></div></div>'),thumbColor=='on'&&document[_0x29b834(0x20f)](_0x29b834(0x1c5))[_0x29b834(0x230)](_0x29b834(0x1c0),_0x29b834(0x1e1)),_0x2588f1[_0x29b834(0x1f4)](function(_0x41fb85,_0x3df059){const _0x3c08eb=_0x29b834;let _0x448c19=_0x41fb85[0x0],_0x1a9c21=_0x41fb85[0x4];document['querySelector'](_0x3c08eb(0x1c5))[_0x3c08eb(0x1d3)]('beforeend',_0x3c08eb(0x23a)),document['querySelector'](_0x3c08eb(0x1c5))[_0x3c08eb(0x203)][_0x3c08eb(0x1c6)]=_0x3c08eb(0x1db)+_0x448c19+'\x22\x20class=\x22'+_0x1a9c21+'\x22>';}),sessionStorage[_0x29b834(0x21b)]('position2',document[_0x29b834(0x20f)](_0x29b834(0x213))[_0x29b834(0x228)]-document[_0x29b834(0x20f)]('#thumbL')[_0x29b834(0x224)]*0.5),thumbFn==0x1&&document[_0x29b834(0x20f)]('body')['insertAdjacentHTML'](_0x29b834(0x1df),'<div\x20class=\x22trBtn\x22>'+thumbFnRbtn+_0x29b834(0x20d)));document['querySelectorAll']('#galT\x20.imgCon')[_0x29b834(0x1f4)](function(_0xe13752,_0x242d82){const _0x316ff2=_0x29b834;_0xe13752[_0x316ff2(0x239)](_0x316ff2(0x206),function(){const _0x422413=_0x316ff2;if(_0xe13752[_0x422413(0x1d0)][_0x422413(0x22e)]('SS')==!![]){let _0xf20515=document[_0x422413(0x20f)](_0x422413(0x1d2))[_0x422413(0x228)]-(window[_0x422413(0x217)]-document[_0x422413(0x20f)](_0x422413(0x1d2))[_0x422413(0x1de)])/0x2;}else{if(thumbFn==0x0){let _0xe63320=0x1;_0x1dbe42(_0x242d82,_0xe63320);}else _0x16cf66(_0x242d82);}});}),document['querySelectorAll'](_0x29b834(0x1e7))[_0x29b834(0x1f4)](function(_0x42b790,_0x3c6aa5){const _0x44e579=_0x29b834;_0x42b790['addEventListener'](_0x44e579(0x206),function(){const _0x55e1f2=_0x44e579;let _0x2f9554;_0x2588f1[_0x3c6aa5][0x4][_0x55e1f2(0x1fd)](_0x55e1f2(0x1fa))!=-0x1||_0x2588f1[_0x3c6aa5][0x4][_0x55e1f2(0x1fd)]('square')!=-0x1||_0x2588f1[_0x3c6aa5][0x4][_0x55e1f2(0x1fd)]('pano')!=-0x1?_0x2f9554=Number(_0x2588f1[_0x3c6aa5][0x3])-(window[_0x55e1f2(0x217)]-document['getElementsByClassName'](_0x55e1f2(0x21f))[_0x3c6aa5]['offsetHeight'])/0x2:_0x2f9554=Number(_0x2588f1[_0x3c6aa5][0x3])-0x14;sessionStorage[_0x55e1f2(0x21b)](_0x55e1f2(0x22d),_0x2f9554),sessionStorage[_0x55e1f2(0x21b)](_0x55e1f2(0x1d8),_0x3c6aa5);let _0xc6ab1f=0x0;_0x1dbe42(_0x3c6aa5,_0xc6ab1f);});}),document[_0x29b834(0x21c)](_0x29b834(0x1f5))[_0x29b834(0x1f4)](function(_0x4dc341){const _0x370cc3=_0x29b834;_0x4dc341[_0x370cc3(0x239)]('click',function(){const _0x2ed098=_0x370cc3;document[_0x2ed098(0x20f)]('#gal\x20#left')[_0x2ed098(0x1d0)][_0x2ed098(0x216)]('reveal'),document[_0x2ed098(0x20f)](_0x2ed098(0x23b))['classList']['add'](_0x2ed098(0x1e6)),document[_0x2ed098(0x21c)](_0x2ed098(0x219))[_0x2ed098(0x1f4)](function(_0x2a34cd){const _0x49a9d8=_0x2ed098;_0x2a34cd[_0x49a9d8(0x1c9)][_0x49a9d8(0x236)]=_0x49a9d8(0x21d),_0x2a34cd[_0x49a9d8(0x1c9)]['opacity']=0x1;}),document[_0x2ed098(0x20f)](_0x2ed098(0x1d4))[_0x2ed098(0x1c9)][_0x2ed098(0x236)]=_0x2ed098(0x1ff),document[_0x2ed098(0x20f)]('#gal\x20.viewer')[_0x2ed098(0x1c9)]['cursor']='pointer';let _0x432d00=this['id'];if(_0x432d00=='left'&&document[_0x2ed098(0x20f)](_0x2ed098(0x1da))['id']==_0x2ed098(0x1ce))document[_0x2ed098(0x20f)]('#gal\x20#left')['classList'][_0x2ed098(0x1c3)](_0x2ed098(0x1e6));else _0x432d00=='right'&&document[_0x2ed098(0x20f)](_0x2ed098(0x1da))['id'][_0x2ed098(0x1bc)](_0x2ed098(0x1f9),'')==document[_0x2ed098(0x21c)]('.imageblock')[_0x2ed098(0x1d1)]-0x2&&document['querySelector'](_0x2ed098(0x23b))[_0x2ed098(0x1d0)][_0x2ed098(0x1c3)](_0x2ed098(0x1e6));let _0x3f8631=document[_0x2ed098(0x20f)](_0x2ed098(0x1da))['id']['replace']('vimg','');_0x3f8631=Number(_0x3f8631);let _0xf4c763,_0x341651,_0x53cef0,_0x993f27,_0x20cc2a;if(_0x432d00==_0x2ed098(0x204)&&_0x3f8631>0x0)_0x20cc2a=_0x3f8631-0x1,_0xf4c763=_0x2588f1[_0x20cc2a][0x0],_0x341651=_0x2ed098(0x1f9)+_0x20cc2a,_0x53cef0=_0x2588f1[_0x20cc2a][0x1],_0x993f27=_0x2588f1[_0x20cc2a][0x2];else _0x432d00=='right'&&_0x3f8631<_0x2588f1[_0x2ed098(0x1d1)]&&(_0x20cc2a=_0x3f8631+0x1,_0xf4c763=_0x2588f1[_0x20cc2a][0x0],_0x341651='vimg'+_0x20cc2a,_0x53cef0=_0x2588f1[_0x20cc2a][0x1],_0x993f27=_0x2588f1[_0x20cc2a][0x2]);let _0x39ee42=_0xf3ba08(_0x53cef0,_0x993f27),_0x5ed1f9=_0x53cef0/_0x39ee42,_0x867f23=_0x993f27/_0x39ee42;_0x378145(_0xf4c763,_0x341651,_0x39ee42,_0x53cef0,_0x993f27);});}),document[_0x29b834(0x239)](_0x29b834(0x237),function(_0x11bb63){const _0x26071d=_0x29b834;if(document[_0x26071d(0x20f)]('#gal\x20.viewer\x20img')){let _0xfd0e27=document[_0x26071d(0x20f)](_0x26071d(0x1da))[_0x26071d(0x1eb)]('id');_0xfd0e27=Number(_0xfd0e27['replace']('vimg','')),_0x11bb63[_0x26071d(0x221)]==_0x26071d(0x1e5)&&_0xfd0e27!=0x0&&document[_0x26071d(0x20f)](_0x26071d(0x201))[_0x26071d(0x206)](),_0x11bb63[_0x26071d(0x221)]==_0x26071d(0x226)&&_0xfd0e27!=_0x2588f1['length']-0x1&&document[_0x26071d(0x20f)]('#right')[_0x26071d(0x206)]();}});function _0x1dbe42(_0x5cba20,_0x2d3a4f){const _0x14c1a2=_0x29b834;_0x5cba20==_0x2588f1[_0x14c1a2(0x1d1)]-0x1&&document['querySelector'](_0x14c1a2(0x1d4))[_0x14c1a2(0x1d0)][_0x14c1a2(0x216)](_0x14c1a2(0x22f));_0x5cba20<_0x2588f1[_0x14c1a2(0x1d1)]-0x1&&document[_0x14c1a2(0x20f)](_0x14c1a2(0x1d4))[_0x14c1a2(0x1d0)][_0x14c1a2(0x22e)](_0x14c1a2(0x22f))==!![]&&document[_0x14c1a2(0x20f)]('#gal')[_0x14c1a2(0x1d0)]['remove'](_0x14c1a2(0x22f));setTimeout(()=>{const _0x4fca03=_0x14c1a2;let _0x445499;if(_0x2d3a4f==0x1)_0x445499=sessionStorage[_0x4fca03(0x220)]('position2');else _0x2d3a4f==0x0&&(_0x445499=sessionStorage[_0x4fca03(0x220)]('position'));document[_0x4fca03(0x20f)](_0x4fca03(0x1be))[_0x4fca03(0x238)]({'top':_0x445499,'behavior':_0x4fca03(0x1cd)}),document[_0x4fca03(0x20f)](_0x4fca03(0x1ed))[_0x4fca03(0x238)]({'top':_0x445499,'behavior':_0x4fca03(0x1cd)});},0x32),document[_0x14c1a2(0x20f)]('html')['style'][_0x14c1a2(0x23f)]=_0x14c1a2(0x1f1),document[_0x14c1a2(0x20f)](_0x14c1a2(0x1ed))[_0x14c1a2(0x1c9)]['overflowY']=_0x14c1a2(0x1f1);if(_0x5cba20==0x0)document['querySelector'](_0x14c1a2(0x23b))[_0x14c1a2(0x1d0)][_0x14c1a2(0x216)]('reveal');else _0x5cba20==document[_0x14c1a2(0x21c)](_0x14c1a2(0x1e7))[_0x14c1a2(0x1d1)]-0x1?document[_0x14c1a2(0x20f)](_0x14c1a2(0x205))[_0x14c1a2(0x1d0)][_0x14c1a2(0x216)]('reveal'):(document[_0x14c1a2(0x20f)](_0x14c1a2(0x205))[_0x14c1a2(0x1d0)][_0x14c1a2(0x216)](_0x14c1a2(0x1e6)),document[_0x14c1a2(0x20f)](_0x14c1a2(0x23b))['classList'][_0x14c1a2(0x216)](_0x14c1a2(0x1e6)));let _0x4ded47=_0x2588f1[_0x5cba20][0x0],_0x2257aa=_0x2588f1[_0x5cba20][0x1],_0x571bfc=_0x2588f1[_0x5cba20][0x2],_0x1c3f17='vimg'+_0x5cba20,_0x2dc7c9=_0xf3ba08(_0x2257aa,_0x571bfc),_0x57ddc7=_0x2257aa/_0x2dc7c9,_0x177f36=_0x571bfc/_0x2dc7c9;document[_0x14c1a2(0x20f)](_0x14c1a2(0x212))[_0x14c1a2(0x1eb)](_0x14c1a2(0x1c0))['indexOf'](_0x14c1a2(0x1c8))!=-0x1&&document[_0x14c1a2(0x20f)](_0x14c1a2(0x212))[_0x14c1a2(0x1d0)]['remove']('pano');document[_0x14c1a2(0x20f)](_0x14c1a2(0x212))[_0x14c1a2(0x211)]=0x0;if(_0x2257aa>window[_0x14c1a2(0x22c)]&&_0x571bfc<=window[_0x14c1a2(0x217)])document[_0x14c1a2(0x20f)]('#gal\x20.viewer')[_0x14c1a2(0x1c6)]=_0x14c1a2(0x1e9)+_0x1c3f17+_0x14c1a2(0x208)+_0x4ded47+_0x14c1a2(0x214)+window[_0x14c1a2(0x22c)]+_0x14c1a2(0x231)+_0x2257aa+'\x22\x20data-height=\x22'+_0x571bfc+'\x22>';else{if(_0x2257aa<=window['innerWidth']&&_0x571bfc>window[_0x14c1a2(0x217)])document[_0x14c1a2(0x20f)](_0x14c1a2(0x212))[_0x14c1a2(0x1c6)]=_0x14c1a2(0x1e9)+_0x1c3f17+'\x22\x20src=\x22'+_0x4ded47+_0x14c1a2(0x21e)+window[_0x14c1a2(0x217)]+_0x14c1a2(0x1c1)+_0x2257aa+_0x14c1a2(0x1fb)+_0x571bfc+'\x22>';else _0x2257aa>window[_0x14c1a2(0x22c)]&&_0x571bfc>window[_0x14c1a2(0x217)]?(document[_0x14c1a2(0x20f)](_0x14c1a2(0x212))['innerHTML']=_0x14c1a2(0x1e9)+_0x1c3f17+_0x14c1a2(0x208)+_0x4ded47+_0x14c1a2(0x21e)+window[_0x14c1a2(0x217)]+_0x14c1a2(0x1c1)+_0x2257aa+_0x14c1a2(0x1fb)+_0x571bfc+'\x22>',_0x2dc7c9>=0x3&&_0x2dc7c9<=0x2d&&(document[_0x14c1a2(0x20f)](_0x14c1a2(0x212))['classList'][_0x14c1a2(0x216)](_0x14c1a2(0x1c8)),window['addEventListener'](_0x14c1a2(0x1d6),function(_0x1bb429){const _0x5045dd=_0x14c1a2;let _0x1aa022=_0x1bb429[_0x5045dd(0x232)];_0x1aa022>0x0?document[_0x5045dd(0x20f)]('#gal\x20.viewer')[_0x5045dd(0x211)]+=sSpeed:document['querySelector'](_0x5045dd(0x212))[_0x5045dd(0x211)]+=Math[_0x5045dd(0x222)](sSpeed)*-0x1;}))):document[_0x14c1a2(0x20f)](_0x14c1a2(0x212))[_0x14c1a2(0x1c6)]=_0x14c1a2(0x1e9)+_0x1c3f17+_0x14c1a2(0x208)+_0x4ded47+'\x22\x20data-width=\x22'+_0x2257aa+_0x14c1a2(0x1fb)+_0x571bfc+'\x22>';}_0x109f10<0x1e0&&window[_0x14c1a2(0x1dc)]==0x0&&Number(_0x2257aa)<Number(_0x571bfc)&&document[_0x14c1a2(0x20f)](_0x14c1a2(0x1da))[_0x14c1a2(0x230)](_0x14c1a2(0x1c9),_0x14c1a2(0x234)+window['innerWidth']+'px;\x20height:auto');document[_0x14c1a2(0x20f)]('#gal')[_0x14c1a2(0x1d0)][_0x14c1a2(0x216)](_0x14c1a2(0x1e6));if(_0x5cba20==0x0)document[_0x14c1a2(0x20f)](_0x14c1a2(0x205))['classList']['remove']('reveal');else _0x5cba20==document[_0x14c1a2(0x21c)]('.imageblock')[_0x14c1a2(0x1d1)]-0x1&&document[_0x14c1a2(0x20f)](_0x14c1a2(0x23b))[_0x14c1a2(0x1d0)][_0x14c1a2(0x1c3)](_0x14c1a2(0x1e6));_0x3cec4b();}function _0x378145(_0x18015b,_0x6aadbf,_0x36884b,_0x38aee2,_0x1d160b){const _0x226e6b=_0x29b834;let _0x434991=Number(_0x6aadbf[_0x226e6b(0x1bc)](_0x226e6b(0x1f9),''));_0x434991==_0x2588f1[_0x226e6b(0x1d1)]-0x1&&document[_0x226e6b(0x20f)](_0x226e6b(0x1d4))[_0x226e6b(0x1d0)][_0x226e6b(0x216)]('last');_0x434991<_0x2588f1[_0x226e6b(0x1d1)]-0x1&&document[_0x226e6b(0x20f)]('#gal')[_0x226e6b(0x1d0)][_0x226e6b(0x22e)](_0x226e6b(0x22f))==!![]&&document[_0x226e6b(0x20f)](_0x226e6b(0x1d4))[_0x226e6b(0x1d0)][_0x226e6b(0x1c3)]('last');document[_0x226e6b(0x20f)]('#gal\x20.viewer')[_0x226e6b(0x1eb)](_0x226e6b(0x1c0))[_0x226e6b(0x1fd)](_0x226e6b(0x1c8))!=-0x1&&document[_0x226e6b(0x20f)](_0x226e6b(0x212))[_0x226e6b(0x1d0)][_0x226e6b(0x1c3)]('pano');document[_0x226e6b(0x20f)](_0x226e6b(0x212))[_0x226e6b(0x211)]=0x0;if(_0x38aee2>window['innerWidth']&&_0x1d160b<=window['innerHeight'])document[_0x226e6b(0x20f)]('#gal\x20.viewer')['innerHTML']='<img\x20id=\x22'+_0x6aadbf+_0x226e6b(0x208)+_0x18015b+'\x22\x20style=\x22width:'+window[_0x226e6b(0x22c)]+'px;\x20height:auto\x22\x20data-width=\x22'+_0x38aee2+_0x226e6b(0x1fb)+_0x1d160b+'\x22>';else{if(_0x38aee2<=window[_0x226e6b(0x22c)]&&_0x1d160b>window['innerHeight'])document[_0x226e6b(0x20f)]('#gal\x20.viewer')['innerHTML']=_0x226e6b(0x1e9)+_0x6aadbf+_0x226e6b(0x208)+_0x18015b+_0x226e6b(0x21e)+window[_0x226e6b(0x217)]+_0x226e6b(0x1c1)+_0x38aee2+_0x226e6b(0x1fb)+_0x1d160b+'\x22>';else _0x38aee2>window['innerWidth']&&_0x1d160b>window[_0x226e6b(0x217)]?(document[_0x226e6b(0x20f)]('#gal\x20.viewer')[_0x226e6b(0x1c6)]=_0x226e6b(0x1e9)+_0x6aadbf+'\x22\x20src=\x22'+_0x18015b+_0x226e6b(0x21e)+window[_0x226e6b(0x217)]+'px\x22\x20data-width=\x22'+_0x38aee2+_0x226e6b(0x1fb)+_0x1d160b+'\x22>',_0x36884b>=0x3&&_0x36884b<=0x2d&&(document[_0x226e6b(0x20f)](_0x226e6b(0x212))[_0x226e6b(0x1d0)][_0x226e6b(0x216)](_0x226e6b(0x1c8)),window[_0x226e6b(0x239)](_0x226e6b(0x1d6),function(_0x12439c){const _0x1dd3fa=_0x226e6b;let _0x33b8f0=_0x12439c[_0x1dd3fa(0x232)];_0x33b8f0>0x0?document[_0x1dd3fa(0x20f)](_0x1dd3fa(0x212))[_0x1dd3fa(0x211)]+=sSpeed:document[_0x1dd3fa(0x20f)]('#gal\x20.viewer')[_0x1dd3fa(0x211)]+=Math[_0x1dd3fa(0x222)](sSpeed)*-0x1;}))):document[_0x226e6b(0x20f)]('#gal\x20.viewer')['innerHTML']=_0x226e6b(0x1e9)+_0x6aadbf+_0x226e6b(0x208)+_0x18015b+_0x226e6b(0x1ee)+_0x38aee2+_0x226e6b(0x1fb)+_0x1d160b+'\x22>';}_0x109f10<0x1e0&&window[_0x226e6b(0x1dc)]==0x0&&Number(_0x38aee2)<Number(_0x1d160b)&&document[_0x226e6b(0x20f)](_0x226e6b(0x1da))['setAttribute'](_0x226e6b(0x1c9),'width:'+window[_0x226e6b(0x22c)]+'px;\x20height:auto'),_0x3cec4b();}document[_0x29b834(0x20f)](_0x29b834(0x212))['addEventListener'](_0x29b834(0x206),function(_0x4f375d){const _0x3ac13f=_0x29b834;document[_0x3ac13f(0x20f)](_0x3ac13f(0x1d4))[_0x3ac13f(0x230)]('class',''),document[_0x3ac13f(0x20f)]('#gal\x20#left')['classList']['remove'](_0x3ac13f(0x1e6)),document['querySelector']('#gal\x20#right')['classList']['remove']('reveal'),document[_0x3ac13f(0x20f)](_0x3ac13f(0x212))[_0x3ac13f(0x1c6)]='',document[_0x3ac13f(0x20f)](_0x3ac13f(0x1be))[_0x3ac13f(0x1c9)]['overflowY']=_0x3ac13f(0x1cd),document[_0x3ac13f(0x20f)]('body')[_0x3ac13f(0x1c9)][_0x3ac13f(0x23f)]=_0x3ac13f(0x1cd);});function _0x3cec4b(){const _0xff7893=_0x29b834;if(_0x109f10>=0x500){let _0x5689f1;document[_0xff7893(0x1e2)]=function(){clearTimeout(_0x5689f1),_0x5689f1=setTimeout(function(){const _0x604b98=_0x5d92;document[_0x604b98(0x21c)]('#left,\x20#right')['forEach'](function(_0x194c01){const _0x50ccaf=_0x604b98;_0x194c01[_0x50ccaf(0x1c9)][_0x50ccaf(0x236)]=_0x50ccaf(0x207),_0x194c01[_0x50ccaf(0x1c9)][_0x50ccaf(0x227)]=0x0;}),document[_0x604b98(0x20f)](_0x604b98(0x1d4))[_0x604b98(0x1c9)][_0x604b98(0x236)]=_0x604b98(0x207),document[_0x604b98(0x20f)](_0x604b98(0x212))[_0x604b98(0x1c9)][_0x604b98(0x236)]=_0x604b98(0x207);},0x5dc);},document['querySelector'](_0xff7893(0x1d4))[_0xff7893(0x239)](_0xff7893(0x1e0),function(){const _0x1fe685=_0xff7893;document[_0x1fe685(0x21c)](_0x1fe685(0x219))[_0x1fe685(0x1f4)](function(_0xfd7284){const _0x50bce7=_0x1fe685;_0xfd7284['style'][_0x50bce7(0x236)]=_0x50bce7(0x21d),_0xfd7284[_0x50bce7(0x1c9)][_0x50bce7(0x227)]=0x1;}),document[_0x1fe685(0x20f)](_0x1fe685(0x1d4))[_0x1fe685(0x1c9)]['cursor']='default',document[_0x1fe685(0x20f)](_0x1fe685(0x212))[_0x1fe685(0x1c9)][_0x1fe685(0x236)]='pointer';});}}function _0x16cf66(_0x4ba7d1){const _0x16a403=_0x29b834;let _0x3080e4;_0x2588f1[_0x4ba7d1][0x4]['indexOf'](_0x16a403(0x1fa))!=-0x1||_0x2588f1[_0x4ba7d1][0x4]['indexOf'](_0x16a403(0x233))!=-0x1||_0x2588f1[_0x4ba7d1][0x4][_0x16a403(0x1fd)](_0x16a403(0x1c8))!=-0x1?_0x3080e4=Number(_0x2588f1[_0x4ba7d1][0x3])-(window[_0x16a403(0x217)]-document[_0x16a403(0x1bb)](_0x16a403(0x21f))[_0x4ba7d1][_0x16a403(0x1de)])/0x2:_0x3080e4=Number(_0x2588f1[_0x4ba7d1][0x3])-0x14,sessionStorage[_0x16a403(0x21b)](_0x16a403(0x22d),_0x3080e4),sessionStorage[_0x16a403(0x21b)](_0x16a403(0x1d8),_0x4ba7d1),document[_0x16a403(0x20f)]('html')[_0x16a403(0x238)]({'top':_0x3080e4,'behavior':'smooth'}),document[_0x16a403(0x20f)](_0x16a403(0x1ed))['scrollTo']({'top':_0x3080e4,'behavior':_0x16a403(0x1ec)}),setTimeout(()=>{const _0x2def1f=_0x16a403;document[_0x2def1f(0x20f)]('.trBtn')['classList']['add'](_0x2def1f(0x1e6));},0x12c),document['querySelector']('.trBtn')[_0x16a403(0x239)]('click',function(){const _0x43d017=_0x16a403;let _0x5e3f37=sessionStorage[_0x43d017(0x220)]('position2');_0x5e3f37=Number(_0x5e3f37),document['querySelector']('html')[_0x43d017(0x238)]({'top':_0x5e3f37,'behavior':_0x43d017(0x1ec)}),document[_0x43d017(0x20f)](_0x43d017(0x1ed))[_0x43d017(0x238)]({'top':_0x5e3f37,'behavior':'smooth'}),setTimeout(()=>{const _0x5ad250=_0x43d017;document[_0x5ad250(0x20f)](_0x5ad250(0x235))[_0x5ad250(0x1d0)][_0x5ad250(0x1c3)]('reveal');},0x12c);}),setTimeout(()=>{const _0x2b9440=_0x16a403;window[_0x2b9440(0x239)](_0x2b9440(0x20a),function(){const _0x13f36=_0x2b9440;let _0x112ab4=document[_0x13f36(0x20f)](_0x13f36(0x223))[_0x13f36(0x228)]-0x64,_0x2c79b7=document[_0x13f36(0x20f)](_0x13f36(0x1c5))[_0x13f36(0x228)]+0x64;window['scrollY']<_0x112ab4&&(document[_0x13f36(0x20f)](_0x13f36(0x235))[_0x13f36(0x1c9)][_0x13f36(0x227)]=0x0);if(window['scrollY']>=_0x112ab4&&window[_0x13f36(0x1cf)]<_0x2c79b7)document[_0x13f36(0x20f)](_0x13f36(0x235))[_0x13f36(0x1c9)]['opacity']=0x1;else window['scrollY']>=_0x112ab4&&window[_0x13f36(0x1cf)]>_0x2c79b7&&(document[_0x13f36(0x20f)](_0x13f36(0x235))['style'][_0x13f36(0x227)]=0x0);});},0x1f4);}function _0xf3ba08(_0x276ab3,_0x25ef92){return _0x25ef92==0x0?_0x276ab3:_0xf3ba08(_0x25ef92,_0x276ab3%_0x25ef92);}},0x1f4),setTimeout(console[_0xafd3e4(0x1e3)]['bind'](console,_0xafd3e4(0x1f3),_0xafd3e4(0x20c)),0x6e),setTimeout(console['log']['bind'](console,'%chttps://ddamddon.tistory.com/10255',_0xafd3e4(0x1f2)),0x73),setTimeout(console[_0xafd3e4(0x1e3)][_0xafd3e4(0x1e4)](console,_0xafd3e4(0x1d9),_0xafd3e4(0x1e8)),0x78);}});
