「zim.js」단일페이지 썸네일GUI 제작

 

 

zim.js의 장점은 다양한 기능을 탑재한 단일 페이지 제작이 쉽다는 점이다.

 

가령, 아래의 이미지는 그냥 사진첩처럼 보이지만,

클릭해보면 사진첩과 같은 기능임을 알 수 있다.

 

 

 

단일 페이지 내 사진첩을 구사하려면,

코드에 앞서 소스 이미지의 이름과 경로를 지정하는 작업이 필요하다.(중요) 

 

    const path = 'https://firebasestorage.googleapis.com/v0/b/webgame-786ab.appspot.com/o/';
    const assets = [
      'img%2FdevTest%2FcardGUI001.jpg?alt=media&token=798108de-e505-44d1-bedc-1ee95f4ed5df',
      'img%2FdevTest%2FcardGUI002.jpg?alt=media&token=ba4c13a9-1d70-4f73-b162-423fb4af0572',
      'img%2FdevTest%2FcardGUI003.jpg?alt=media&token=4a7e9af6-0449-4a0d-90f2-b04ed56f1bc3',
      'img%2FdevTest%2FcardGUI004.jpg?alt=media&token=39ac84cc-b4b5-4039-828a-d52a1857b69b',
      'img%2FdevTest%2FcardGUI005.jpg?alt=media&token=0ab023dc-863a-4057-bdb6-172359e39af5',
      'img%2FdevTest%2FcardGUI006.jpg?alt=media&token=42c31563-1e39-4eec-b5c9-c81cd6e8d852',
      'img%2FdevTest%2FcardGUI001_thumb.jpg?alt=media&token=6d422ad7-ded9-40e8-a1df-135bbe21dc7b',
      'img%2FdevTest%2FcardGUI002_thumb.jpg?alt=media&token=970335ca-5087-4a8c-8926-4091b776a199',
      'img%2FdevTest%2FcardGUI003_thumb.jpg?alt=media&token=a91c4542-7927-45f0-8fdc-682911473d80',
      'img%2FdevTest%2FcardGUI004_thumb.jpg?alt=media&token=cf870214-9e78-4d9a-95ab-1bd3c4012ce9',
      'img%2FdevTest%2FcardGUI005_thumb.jpg?alt=media&token=34c1afc6-e1d5-4e24-9e9d-1fb8d566b3e8',
      'img%2FdevTest%2FcardGUI006_thumb.jpg?alt=media&token=b82e0715-a1bd-4053-ab9e-2b46b887a9f8'
    ];
    const frame = new Frame( { 
       scaling:'zimBase', 
       width:724,  
       height:430,  
       color:light,
       assets:assets,
       path:path,
       progress:new Waiter()
    }); 
    
//생략...

 

thumb네일에 해당되는 파일명은 thumb를 붙여서

클릭시 따로 썸네일 이미지를 불러오도록 한다.

 

'thumbs'문자열이 포함된 배열은 thumbs변수에 저장한 뒤,

Tile( )객체 내부에 위치시키고, tap( )이벤트를 적용한다.

 

[코드]

//생략...
      const thumbs = [];
      loop(assets, asset=>{
        if(asset.indexOf('_thumb') > 0){
          thumbs.push(frame.asset(asset));
        }
      });

      let picture = null;
      const tile = new Tile(series(thumbs), 3, 2, 20, 20)
                  .centerReg(stage)
                  .sca(.3)
                  .tap(e=>{
                    if(picture){
                      picture.removeFrom();
                    }

                    let pic = e.target.id;
                    let usrPic = pic.split('_thumb');

                    loop(assets, item=>{
                      if(item.match(usrPic[0])){
                        if(!item.match('_thumb')){
                          console.log('매칭 item: '+item);
                          picture = frame.asset(item).sca(.4).center(pane);
                        }
                      }
                    })//루프구문 끝
                    
                    pane.show();
                    stage.update();
                    
                  });//tap() 끝

      const pane = new Pane({
        width:stageW-300,
        height: 300,
        corner:0,
        close:true,
        backgroundColor:dark
      });

//생략...

 

 

Pane( )은 팝업창을 띄울 때 사용하며,

tap( )이벤트 내부에서 호출된다.