티스토리, Lightbox 이미지뷰어 다듬기

 

 

뷰어 및 배경 스크롤 막기

 

 

[Demo] 티스토리, LightBox 다듬기

 

 

 

 

 

 

 

 

 

 

Code

 

 

// Tistory LightBox	
// 사진 레이어와 데이터 레이어 간격 (단위 - px)
let dbm = 2;

function _0x32bd(){var _0xa37679=['style','500ms','dataset','classList','4071252XkFCGv','click','keydown','transform','px)','addEventListener','forEach','5029969eWQVmi','parentNode','body','body.viewerOn\x20#lightbox\x20.lb-dataContainer','27414440dJmMnX','4540BpZhxC','554453tBuZit','target','11487996GsrNrQ','add','viewerOn','ArrowLeft','.lb-nav\x20a','2zasOxc','opacity','11QuxwvI','ArrowRight','#lightbox\x20div.lb-outerContainer','key','querySelector','remove','lightbox','2211WAmbNW','5398620BMkkWn','16cwoKSJ','#lightboxOverlay','.imageblock','translate(-50%,\x20','imageblock','transition','contains','.lb-close','.contents_style'];_0x32bd=function(){return _0xa37679;};return _0x32bd();}var _0x4f01b1=_0x35f8;(function(_0x4b2017,_0x2f240e){var _0x5001a3=_0x35f8,_0x4c939b=_0x4b2017();while(!![]){try{var _0x44bfd6=parseInt(_0x5001a3(0x1d5))/0x1*(parseInt(_0x5001a3(0x1dc))/0x2)+parseInt(_0x5001a3(0x1b9))/0x3*(-parseInt(_0x5001a3(0x1d4))/0x4)+-parseInt(_0x5001a3(0x1ba))/0x5+-parseInt(_0x5001a3(0x1c8))/0x6+parseInt(_0x5001a3(0x1cf))/0x7*(parseInt(_0x5001a3(0x1bb))/0x8)+-parseInt(_0x5001a3(0x1d7))/0x9+-parseInt(_0x5001a3(0x1d3))/0xa*(-parseInt(_0x5001a3(0x1b2))/0xb);if(_0x44bfd6===_0x2f240e)break;else _0x4c939b['push'](_0x4c939b['shift']());}catch(_0x393753){_0x4c939b['push'](_0x4c939b['shift']());}}}(_0x32bd,0xd2682));function _0x35f8(_0x360295,_0x457f72){var _0x32bde5=_0x32bd();return _0x35f8=function(_0x35f8b4,_0x5f428d){_0x35f8b4=_0x35f8b4-0x1b1;var _0x35450b=_0x32bde5[_0x35f8b4];return _0x35450b;},_0x35f8(_0x360295,_0x457f72);}if(document[_0x4f01b1(0x1b6)](_0x4f01b1(0x1d1))['id']=='tt-body-page'&&document['querySelector'](_0x4f01b1(0x1bd))){document['querySelector'](_0x4f01b1(0x1c3))['addEventListener'](_0x4f01b1(0x1c9),_0xe4e12d=>{var _0x5c9846=_0x4f01b1;(_0xe4e12d[_0x5c9846(0x1d6)][_0x5c9846(0x1d0)][_0x5c9846(0x1d0)][_0x5c9846(0x1c7)][_0x5c9846(0x1c1)](_0x5c9846(0x1bf))==!![]||_0xe4e12d[_0x5c9846(0x1d6)][_0x5c9846(0x1d0)][_0x5c9846(0x1c6)]['lightbox']==_0x5c9846(0x1b8))&&(document[_0x5c9846(0x1b6)]('body')[_0x5c9846(0x1c7)][_0x5c9846(0x1d8)](_0x5c9846(0x1d9)),dataposition(),document['querySelectorAll'](_0x5c9846(0x1db))[_0x5c9846(0x1ce)](_0x42f051=>{_0x42f051['addEventListener']('click',()=>{dataposition();});}),document[_0x5c9846(0x1b6)](_0x5c9846(0x1bc))[_0x5c9846(0x1cd)](_0x5c9846(0x1c9),()=>{var _0x526b20=_0x5c9846;document[_0x526b20(0x1b6)](_0x526b20(0x1d1))['classList']['remove']('viewerOn');}),document['querySelector'](_0x5c9846(0x1c2))['addEventListener'](_0x5c9846(0x1c9),()=>{var _0x4d1d84=_0x5c9846;document[_0x4d1d84(0x1b6)](_0x4d1d84(0x1d1))[_0x4d1d84(0x1c7)][_0x4d1d84(0x1b7)]('viewerOn');}),document[_0x5c9846(0x1cd)](_0x5c9846(0x1ca),_0x2ad921=>{var _0x3e22a9=_0x5c9846;(_0x2ad921['key']==_0x3e22a9(0x1b3)||_0x2ad921[_0x3e22a9(0x1b5)]==_0x3e22a9(0x1da))&&dataposition();}));});function dataposition(){var _0x19cdc6=_0x4f01b1;document[_0x19cdc6(0x1b6)](_0x19cdc6(0x1d2))[_0x19cdc6(0x1c4)][_0x19cdc6(0x1b1)]=0x0,setTimeout(()=>{var _0xa00460=_0x19cdc6;document[_0xa00460(0x1b6)]('body.viewerOn\x20#lightbox\x20.lb-dataContainer')[_0xa00460(0x1c4)][_0xa00460(0x1cb)]=_0xa00460(0x1be)+(document[_0xa00460(0x1b6)](_0xa00460(0x1b4))['getClientRects']()[0x0]['bottom']+dbm)+_0xa00460(0x1cc),setTimeout(()=>{var _0x366f96=_0xa00460;document['querySelector']('body.viewerOn\x20#lightbox\x20.lb-dataContainer')[_0x366f96(0x1c4)][_0x366f96(0x1b1)]=0x1,document[_0x366f96(0x1b6)](_0x366f96(0x1d2))['style'][_0x366f96(0x1c0)]=_0x366f96(0x1c5);},0x190,{'once':!![]});},0x190,{'once':!![]});}}

 

 

/* Tistory LightBox */
body { overflow-y: auto }
body.viewerOn { overflow: hidden }
body.viewerOn #lightbox .lb-outerContainer { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) }
body.viewerOn #lightbox .lb-dataContainer { position: fixed; left: 50%; top: 0px; transform: translateX(-50%) }
body.viewerOn #lightbox .lb-dataContainer .lb-close { transform: scale(0.7) translate(14px, -4px) }