| Index Print for Film |
모바일은 지원하지 않습니다.
| Demo & Code |
[Demo] Index Print for Film
필름명 필름 매수 카메라 현상소 Loaded Unloaded Kodak Portra 160 36 Nikon F6 토픽현상소 2020. 5. 1. 2021. 5. 31.
dd-stuff.tistory.com
포스트마다 아래의 서식이 들어가야 됨!
서식을 먼저 삽입하고, 사진 업로드의 순서로...
<!-- 티스토리 서식 -->
<table class="filminfo" style="width: 860px; border: 1px solid #000000; height: 60px;" data-ke-align="alignLeft; text-align:center">
<tbody style="text-align: center;">
<tr style="height: 30px;">
<td style="width: 246px;">필름명</td>
<td style="width: 40px;">필름 매수</td>
<td style="width: 143px;">카메라</td>
<td style="width: 143px;">현상소</td>
<td style="width: 143px;">Loaded</td>
<td style="width: 143px;">Unloaded</td>
</tr>
<tr style="height: 30px; color: crimson;">
<td style="width: 246px;">*</td>
<td style="width: 40px;">36</td>
<td style="width: 143px;">*</td>
<td style="width: 143px;">*</td>
<td style="width: 143px;">2021. . .</td>
<td style="width: 143px;">2021. . .</td>
</tr>
</tbody>
</table>
/* 삽입되는 서식 - 보이지 않게 처리 */
table.filminfo { width:0px; height:0px; display:none }
/* 인덱스 프린트 레이아웃 */
#filmouter { width:860px; height:auto; margin-left:auto; margin-right:auto; margin-bottom:100px; background-color:#ffc803 !important; padding:18px 0px 28px 0px }
/* 상단 정보 */
#filmouter .rinfo { width:100%; height:90px; padding:10px 0px 30px 0px }
#filmouter .rinfo table { width:95.4%; height:auto; color:#000; padding:0px 12px; margin-bottom:18px; border-collapse:unset; text-align:left !important; background-color:rgb(254, 255, 203); border:1px solid #000 !important }
#filmouter .rinfo table td:nth-child(odd) { border:0px !important; font-family:"Dotum"; font-size:16px; width:100px; opacity:0.8 }
#filmouter .rinfo table td:nth-child(even) { border:0px !important; width:330px }
#filmouter .rinfo table td span { font-family:"Arial"; font-size:20px; font-weight:900; font-style:italic; opacity:0.66 }
/* 인덱스 */
#rollidx { all:unset; width:80%; height:300px; border-spacing:8px !important; border-collapse:unset; border:0px !important }
#rollidx td { width:108px !important; height:60px; border:1px solid rgba(0,0,0,.5); background-color:rgba(0,0,0,.3); padding:0 !important }
#rollidx tr:last-child td:last-child { border:0px !important; background-color:transparent; text-align:center; vertical-align:middle }
#rollidx tr:last-child td:last-child span { border:2px dashed rgba(0,0,0,.3); color:#000; font-size:20px; padding:8px 40px }
#rollidx img { cursor:pointer }
#rollidx img.land { width:108px !important; height:72px !important; vertical-align:middle }
#rollidx img.port { width:auto; height:72px !important; vertical-align:middle; margin-left:50%; transform:translateX(-50%) }
/* 복귀버튼 */
#rBtn { position:fixed; width:40px; height:40px; top:50%; right:240px; transform:translateY(-50%); color:#000; cursor:pointer; font-size:24px }
#rBtn.hide { width:0px; height:0px; opacity:0 }
let bBtn = 'on'; // 썸네일 클릭시 인덱스 복귀 버튼 생성 유무 - on || off
let bBtnC = '<i class="icon-compass2"></i>'; // 복귀 버튼으로 사용할 이미지나 아이콘, 문구
let filmName = '<i class="icon-film"></i>'; // 인덱스 필름 항목 제목글
let cameraName = '<i class="icon-v-camera2"></i>'; // 인덱스 카메라 항목 제목글
let lensName = '<i class="icon-lens"></i>'; // 인덱스 렌즈 항목 제목글
let filmLoad = '<i class="icon-download2"></i>'; // 인덱스 필름 로드 항목 제목글
let filmUnload = '<i class="icon-upload2"></i>'; // 인덱스 필름 언로드 항목 제목글
let deSc = '<i class="icon-pushpin"></i>'; // 인덱스 렌즈 메모 항목 제목글
function _0x37e2(_0x4c3dde,_0x41c9b8){const _0x3c3829=_0x3c38();return _0x37e2=function(_0x37e20f,_0x38c185){_0x37e20f=_0x37e20f-0x138;let _0x5ae3b3=_0x3c3829[_0x37e20f];return _0x5ae3b3;},_0x37e2(_0x4c3dde,_0x41c9b8);}const _0x30ed9e=_0x37e2;function _0x3c38(){const _0x4c0784=['afterbegin','#filmouter\x20.rinfo\x20table\x20tr:last-child','#rollidx\x20tr:last-child\x20td:last-child','click','addEventListener','<td\x20colspan=\x223\x22></td>','5591604iYnbta','src','#rollidx','querySelectorAll','<center><table\x20id=\x22rollidx\x22><tbody></tbody></table></center></div>','</span>','.imageblock\x20img','272FdaUDW','</div>','load','innerHTML','clientHeight','beforebegin','#filmouter\x20.rinfo\x20table\x20tr:nth-child(2)\x20td:nth-child(4)','length','clientWidth','118648OvSaoQ','beforeend','765819sFoQkx','1430424ZlYGgx','replace','table.filminfo\x20tr:nth-child(4)\x20td:nth-child(2)','land','tagName','querySelector','imageblock','#rBtn','offsetTop','\x22\x20src=\x22','6jGqqXz','table.filminfo\x20tr:nth-child(2)\x20td:nth-child(4)','table.filminfo\x20tr:nth-child(2)\x20td:nth-child(3)','getElementsByTagName','insertAdjacentHTML','innerText','target','contains','table.filminfo\x20tr:nth-child(3)\x20td:nth-child(2)','#filmouter\x20.rinfo\x20table\x20tr:nth-child(3)\x20td:nth-child(2)','IMG','table.filminfo\x20tr:nth-child(2)\x20td:nth-child(2)','#rollidx\x20tbody','#filmouter','availHeight','</tr>','<tr></tr>','<td></td>','setAttribute','body','#filmouter\x20.rinfo\x20table\x20tr:nth-child(1)\x20td:nth-child(2)','remove','getElementsByClassName','classList','42rejJLD','20yduSux','4804710tCUPsl','.imageblock','img','width','forEach','</td>','smooth','timg','offsetHeight','getAttribute','<span>','<div\x20id=\x22rBtn\x22>','3238fyunXU','#rollidx\x20tbody\x20tr:last-child','scrollTo','20822945pPSPvy','table.filminfo','https://img1.daumcdn.net/thumb/R200x0/?scode=mtistory2&fname=','<tr>','<td>','#filmouter\x20.rinfo\x20table\x20tr:nth-child(3)'];_0x3c38=function(){return _0x4c0784;};return _0x3c38();}(function(_0x1870d9,_0x1e6848){const _0x2de9f4=_0x37e2,_0x20876b=_0x1870d9();while(!![]){try{const _0x28c7e0=-parseInt(_0x2de9f4(0x175))/0x1*(parseInt(_0x2de9f4(0x15f))/0x2)+parseInt(_0x2de9f4(0x139))/0x3*(parseInt(_0x2de9f4(0x17e))/0x4)+-parseInt(_0x2de9f4(0x153))/0x5+-parseInt(_0x2de9f4(0x16e))/0x6+parseInt(_0x2de9f4(0x151))/0x7*(parseInt(_0x2de9f4(0x181))/0x8)+-parseInt(_0x2de9f4(0x180))/0x9*(-parseInt(_0x2de9f4(0x152))/0xa)+parseInt(_0x2de9f4(0x162))/0xb;if(_0x28c7e0===_0x1e6848)break;else _0x20876b['push'](_0x20876b['shift']());}catch(_0x4aefb7){_0x20876b['push'](_0x20876b['shift']());}}}(_0x3c38,0xd277b),window['addEventListener'](_0x30ed9e(0x177),()=>{const _0x19c3c4=_0x30ed9e;if(document['querySelector'](_0x19c3c4(0x163))&&screen[_0x19c3c4(0x156)]>0x400&&document['querySelectorAll']('.imageblock')[_0x19c3c4(0x17c)]>0x1){let _0x56097c=['<div\x20id=\x22filmouter\x22><div\x20class=\x22rinfo\x22><center><table><tbody>',_0x19c3c4(0x165),_0x19c3c4(0x166)+filmName+_0x19c3c4(0x158),'<td></td>',_0x19c3c4(0x166)+filmLoad+_0x19c3c4(0x158),'<td></td>',_0x19c3c4(0x148),_0x19c3c4(0x165),_0x19c3c4(0x166)+cameraName+_0x19c3c4(0x158),'<td></td>',_0x19c3c4(0x166)+filmUnload+_0x19c3c4(0x158),_0x19c3c4(0x14a),_0x19c3c4(0x148),_0x19c3c4(0x165),_0x19c3c4(0x166)+lensName+_0x19c3c4(0x158),_0x19c3c4(0x16d),_0x19c3c4(0x148),_0x19c3c4(0x165),_0x19c3c4(0x166)+deSc+_0x19c3c4(0x158),_0x19c3c4(0x16d),_0x19c3c4(0x148),'</tbody></table></center></div>',_0x19c3c4(0x172)],_0x4a8b9c='';_0x56097c['forEach'](_0x215ca9=>{_0x4a8b9c=_0x4a8b9c+_0x215ca9;}),document[_0x19c3c4(0x186)](_0x19c3c4(0x154))[_0x19c3c4(0x13d)](_0x19c3c4(0x17a),_0x4a8b9c);}let _0x3cb11d,_0x5047ed,_0x335a9c,_0x2bade5,_0x3b3aa4,_0x3f6185,_0x2df4ba,_0x3a1bde,_0x181847,_0x75238,_0x54f744;_0x3f6185=document[_0x19c3c4(0x186)]('table.filminfo\x20tr:nth-child(2)\x20td:nth-child(1)')['innerText'],_0x335a9c=document['querySelector'](_0x19c3c4(0x144))[_0x19c3c4(0x13e)],_0x2df4ba=document[_0x19c3c4(0x186)](_0x19c3c4(0x13b))[_0x19c3c4(0x13e)],_0x3b3aa4=document['querySelector'](_0x19c3c4(0x13a))['innerText'],_0x3a1bde=document[_0x19c3c4(0x186)]('table.filminfo\x20tr:nth-child(2)\x20td:nth-child(5)')[_0x19c3c4(0x13e)],_0x181847=document[_0x19c3c4(0x186)]('table.filminfo\x20tr:nth-child(2)\x20td:nth-child(6)')[_0x19c3c4(0x13e)],_0x75238=document[_0x19c3c4(0x186)](_0x19c3c4(0x141))[_0x19c3c4(0x13e)],_0x54f744=document['querySelector'](_0x19c3c4(0x183))[_0x19c3c4(0x13e)],_0x2bade5=_0x335a9c/0x7,document[_0x19c3c4(0x186)]('table.filminfo')[_0x19c3c4(0x14e)](),document[_0x19c3c4(0x186)](_0x19c3c4(0x14d))[_0x19c3c4(0x178)]=_0x19c3c4(0x15d)+_0x3f6185+'</span>',document[_0x19c3c4(0x186)]('#filmouter\x20.rinfo\x20table\x20tr:nth-child(1)\x20td:nth-child(4)')[_0x19c3c4(0x178)]=_0x19c3c4(0x15d)+_0x3a1bde+'</span>',document[_0x19c3c4(0x186)]('#filmouter\x20.rinfo\x20table\x20tr:nth-child(2)\x20td:nth-child(2)')[_0x19c3c4(0x178)]=_0x19c3c4(0x15d)+_0x2df4ba+_0x19c3c4(0x173),document['querySelector'](_0x19c3c4(0x17b))[_0x19c3c4(0x178)]=_0x19c3c4(0x15d)+_0x181847+_0x19c3c4(0x173);_0x75238[_0x19c3c4(0x17c)]<0x5||_0x75238=='-'||_0x75238=='*'?document[_0x19c3c4(0x186)](_0x19c3c4(0x167))[_0x19c3c4(0x14e)]():document[_0x19c3c4(0x186)](_0x19c3c4(0x142))[_0x19c3c4(0x178)]='<span>'+_0x75238+_0x19c3c4(0x173);_0x54f744[_0x19c3c4(0x17c)]<0x5||_0x54f744=='-'||_0x54f744=='*'?document[_0x19c3c4(0x186)](_0x19c3c4(0x169))[_0x19c3c4(0x14e)]():document['querySelector']('#filmouter\x20.rinfo\x20table\x20tr:nth-child(4)\x20td:nth-child(2)')['innerHTML']='<span>'+_0x54f744+_0x19c3c4(0x173);for(_0x3cb11d=0x0;_0x3cb11d<_0x2bade5;_0x3cb11d++){if(_0x3cb11d%0x1==0x0){document[_0x19c3c4(0x186)](_0x19c3c4(0x145))['insertAdjacentHTML'](_0x19c3c4(0x17f),_0x19c3c4(0x149));for(_0x5047ed=0x0;_0x5047ed<0x7;_0x5047ed++){document[_0x19c3c4(0x186)](_0x19c3c4(0x160))[_0x19c3c4(0x13d)]('afterbegin',_0x19c3c4(0x14a));}}}document[_0x19c3c4(0x186)](_0x19c3c4(0x16a))[_0x19c3c4(0x14e)](),document[_0x19c3c4(0x186)](_0x19c3c4(0x16a))[_0x19c3c4(0x14b)]('colspan','2');let _0x5c1a6f,_0x4930eb,_0xf8b778,_0x174e1e,_0x131e3e;_0x131e3e=document['querySelectorAll'](_0x19c3c4(0x174))[_0x19c3c4(0x17c)],document[_0x19c3c4(0x171)](_0x19c3c4(0x174))[_0x19c3c4(0x157)]((_0x2a5e1a,_0x4e91bb)=>{const _0x51b8c5=_0x19c3c4;_0x2a5e1a['id']=_0x51b8c5(0x155)+_0x4e91bb,_0x5c1a6f=_0x2a5e1a[_0x51b8c5(0x17d)],_0x4930eb=_0x2a5e1a[_0x51b8c5(0x179)],_0xf8b778=_0x51b8c5(0x164)+_0x2a5e1a[_0x51b8c5(0x15c)](_0x51b8c5(0x16f)),_0x5c1a6f>_0x4930eb?_0x174e1e='land':_0x174e1e='port',document[_0x51b8c5(0x186)](_0x51b8c5(0x170))[_0x51b8c5(0x13c)]('td')[_0x4e91bb]['innerHTML']='<img\x20id=\x22timg'+_0x4e91bb+_0x51b8c5(0x138)+_0xf8b778+'\x22>',document[_0x51b8c5(0x186)](_0x51b8c5(0x170))[_0x51b8c5(0x13c)]('td')[_0x4e91bb]['lastChild'][_0x51b8c5(0x150)]['add'](_0x174e1e);}),document[_0x19c3c4(0x186)](_0x19c3c4(0x16a))[_0x19c3c4(0x178)]=_0x19c3c4(0x15d)+_0x3b3aa4+_0x19c3c4(0x173),document[_0x19c3c4(0x186)](_0x19c3c4(0x146))['addEventListener'](_0x19c3c4(0x16b),_0x283f04=>{const _0x49ab5a=_0x19c3c4;let _0x4a713a,_0x342e7f;if(_0x283f04[_0x49ab5a(0x13f)][_0x49ab5a(0x185)]==_0x49ab5a(0x143)){_0x4a713a=Number(_0x283f04[_0x49ab5a(0x13f)]['id'][_0x49ab5a(0x182)](_0x49ab5a(0x15a),'')),_0x342e7f=document[_0x49ab5a(0x14f)](_0x49ab5a(0x187))[_0x4a713a][_0x49ab5a(0x189)];if(_0x283f04['target'][_0x49ab5a(0x150)][_0x49ab5a(0x140)](_0x49ab5a(0x184))==!![])_0x342e7f=_0x342e7f-(screen[_0x49ab5a(0x147)]-document['getElementsByClassName'](_0x49ab5a(0x187))[_0x4a713a][_0x49ab5a(0x15b)])/0x2+0x24;else _0x283f04[_0x49ab5a(0x13f)][_0x49ab5a(0x150)]['contains']('port')==!![]&&(_0x342e7f=_0x342e7f-0x24);window[_0x49ab5a(0x161)]({'top':_0x342e7f,'behavior':_0x49ab5a(0x159)});if(bBtn=='on'&&!document[_0x49ab5a(0x186)](_0x49ab5a(0x188))){document[_0x49ab5a(0x186)](_0x49ab5a(0x14c))[_0x49ab5a(0x13d)](_0x49ab5a(0x168),_0x49ab5a(0x15e)+bBtnC+_0x49ab5a(0x176));let _0xcabb4f=document[_0x49ab5a(0x186)](_0x49ab5a(0x146))[_0x49ab5a(0x189)]-0x1e;document[_0x49ab5a(0x186)](_0x49ab5a(0x188))[_0x49ab5a(0x16c)](_0x49ab5a(0x16b),()=>{window['scrollTo']({'top':_0xcabb4f,'behavior':'smooth'}),setTimeout(()=>{const _0x5c363e=_0x37e2;document[_0x5c363e(0x186)](_0x5c363e(0x188))[_0x5c363e(0x14e)]();},0x1f4,{'once':!![]});});}}});}));
