간단히 이미지만 나열되어 있는 것으로 사진들쪽 위에서 마우스휠을 스크롤하거나 좌우화살표를 클릭하면 자연스럽게(좀 무겁긴 한듯합니다.) 사진이 커졌다가 작아졌다가 합니다. 간단한 인터페시으로 원하는 크기의 사진을 볼 수 있으니 이미지 브라우징할때 썸네일크기설정같은 것도 필요없고 간지도 좀 나고... 이거다 싶었습니다. 따로 소개페이지는 없고 위의 데모와 소스를 바로 다운로드할 수 있게 되어 있습니다.
Alexander Seel이란 사람이 만들었고 MIT-style license로 배포되었습니다. 현재 버전은 0.0.1이네요 다른것들은 다 좋은데 MooTools 1.2 기반으로 되어 있었습니다. 다 맘에 들었는데 M31에서는 jQuery와 ExtJS를 사용하고 있기 때문에 사용하기가 좀 어려웠습니다.
그래서... 고민하다가 MIT라이센스고 해서 jQuery로 컨버팅하기로 했습니다.(이때는 이렇게 큰 작업이 될 줄은 몰랐습니다.)
지독히도 고생했습니다. 의존 라이브러리를 변경하는 것을 너무 쉽게 생각했던것 같습니다. 일단 MooTools는 한번도 사용해 본적이 없는 데다가 jQuery도 책한번 보고 약간만 만져봤을뿐 아직 메서드같은건 전혀 익숙하지 않은 상태였던 것이 어려움의 큰 원인이었습니다. 그래도 MooTools가 prototype.js랑 꽤 비슷한 형태를 띄고 있었기 때문에 대충 감은 온다는게 그나마 다행이라고 할 수 있습니다.
MooTools API랑 jQuery API 열어놓고 일일이 어떤 기능을 하는 메서드인지 찾아서 일일이 jQuery로 맞게 바꾸어줬습니다. MooTools나 prototype.js는 객체기반(정확한 표현인지는 모르겠지만)인데 반해서 jQuery는 확장그룹기반으로 되어 있기 때문에 은근히 손이 많이갔습니다. 이걸 jQuery 플러그인이라고 해야할 지는 모르겠지만 아직 jQuery방식의 코딩이 손에 안익은 관계로 괜찮은 jQuery 플러그인 하나 받아서 대충 메서드 구성보고 형태를 맞추었습니다. Javascript에서는 this라는 녀석의 감을 잡지 못하다보니 클래스변수로 선언된 $$로 모든걸 처리해버려서 별로 알흠답지는 못하지만 그냥 jQuery기반으로 돌아가는데만 초점을 맞추었습니다. (jQuery 잘하시는 분이 정리한번 해주시면 고맙겠네요.) 많은 내용이 담겨있지는 않았지만 Mootools와 jQuery작성스타일을 한눈에 비교해 볼수 있어서 Javascript Framework Matrix가 많이 도움이 되었습니다.
(좌/우 화살표키로만 동작합니다.)
그럭저럭 돌아갑니다. jQuery 1.3.2기반으로 되었고 애니메이션 easing을 위해서 GSGD에서 만든 jQuery Easing Plugin을 추가했습니다. 원래는 마우스휠로도 핸들링할 수 있게 되어있었는데 jQuery에는 mousewheel에 대한 이벤트핸들러가 없기 때문에 mousewheel 플러그인까지 추가해서 할 필요는 없어보여서(또 그냥 추가해서 연결만 해주면 되기 때문에) 굳이 추가하지 않았습니다. 위 페이지는 좌우화살표로만 동작을 합니다. 버전이 낮아서 선언해놓고 사용안하는 변수나 메서드도 꽤 있었습니다만 그런것들까지 정리할 여력은 안되서 그냥 같이 포팅만 해놓은 상태입니다.
거진 이녀석만 12시간 이상 붙잡고 있었네요. ㅠ..ㅠ 원래 하려면 기능은 3-4시간정도 예상하고 있었는데 아직 프로젝트에 붙히지도 못했고 잘 붙어서 동작할지도 확인못했는데 진정한 야크쉐이빙이군요. 아놔~~ 가벼운 마음으로 "오~ 멋지다"라고 생각하고 시간한게 몇번이나 포기할려다가 나중엔 오기가 생겨서 조금만 더 해보자하다가 겨우 마무리까진 했네요. M31에 대한 마음은 무겁지만 그래도 주말내내 고생시킨게 결국 포기안하고 해결되서 약간은 홀가분하네요. ㅎ
ps. 지금 발견한건데 예제가 IE에서 오류가 나는군요. 나머지 브라우져에서는 다 잘돌아가는데... 이따가 살펴봐야겠네요 ㅠ..ㅠ
ps. IE오류 수정했습니다. 그래도 이상하게 IE에서는 축소한다음에 좀 잔상이 남네요.... 저것까지 해결하긴 좀 어렵군요. ㅠ..ㅠ
Comments