티스토리 뷰

라이브러리 개조 : LightBox2 - 1화

 Javascript를 공부하는데 가장 도움이 되는 건 바로, 남의 소스를 바라보는 것이 아닌가 한다. 물론 그전에 그것을 보기에 기본이 되는 실력이 없다면, 보자마자 현기증이 일 것이다. 하지만, 어느정도 레벨에 오른 개발자들 중 더 나은 실력을 가지고 싶다 생각하는 사람들은 자연스레 오픈소스에 눈이 돌아가게 되고, 기여를 하고 싶어할 것이다.

 그렇다면, 이를 위해서 어떤 단계를 거쳐야 할까?

 가장 먼저 내가 필요하거나 재미있다고 생각하는 라이브러리를 먼저 찾아보는 것이 내가 한 일이었다. 물론 필요에 의해 많은 Javascript 라이브러리들을 사용했지만, 단순하면서도 재미있는 라이브러리를 찾는 것은 쉽지 않는 일이었다. 허나 요근래 프로젝트를 하면서 딱 맞는 라이브러리를 발견했으니, 바로 LightBox2였다.
이 라이브러리는 HTML 상 이미지를 선택하면 상세보기를 위해 팝업처럼 크게 나와 출력하게 해주는 단순하게 사용할 수 있으며, 소스도 그렇게 길지 않는 라이브러리이다. 무려 version 2를 지닌 역사가 있는 라이브러리이기도 했다.

 이것과 비슷한 라이브러리들은 여러개 있었다. 그런데, 이 녀석을 좀 개조해 보자고 생각하게 만든 것은 다름아닌 필요한 기능이 없어서였다. 실제 이미지를 누르면 상세보기처럼 이미지 팝업이 나오는 것은 좋지만, 이게 가능하려면 a tag로 감싸있는 img가 정적 페이지에 존재해야 한다는 것이다. 물론 jquery등으로 동적 생성하여 출력해 놓아도, LightBox2(이하 LB2)가 지정하는 방식으로 구성하면 문제 없이 잘 호출되는 건 다행이었다.

 여기에 한 가지 기능을 추가하고 싶었다. 실제, DOM 영역에 존재하는 img가 아닌 그냥 버튼을 선택하면 사진 데이터 값을 Json 배열로 사용하여 갤러리 보기 처럼 만들고 싶었다. 즉, 버튼을 누르면 서버에서 받아온 데이터로 상세 사진 보기 기능을 만들고 싶었다. 문제는 이러한 기능을 추가하기 위해서는 직접 LB2 소스를 다운받아 분석/수정을 해야만 했다.

 오픈소스이기 때문에, 압축을 해제하면 /dist/js 위치로 가면 lightbox.js파일을 찾을 수 있다. 이게 이번 우리가 가지고 놀 대상이 되겠다. 참고로 LB2는 jquery를 기반으로 사용되기 깨문에, jquery를 사용하지 않을 경우에는 jquery가 포함된 버전인 lightbox-plus-jquery.js를 사용하면 된다.

 제일 먼저 LB2 분석하기 위하여 /example/index.html크롬에서 실행해보자. 크롬에서 실행해보는 이유는 개인적으로 개발 시 크롬을 이용하여 분석/디버깅하기에 가장 익숙한 브라우저로써 택했다. 샘플 페이지인데, 실행 후 페이지 내 이미지들을 선택하면 LB2가 도대체 뭐하는 녀석인지는 쉽게 이해할 수 있을 것이다.

 단순하지만 멋진 기능을 가진 LB2와 잘 찍은 풍경 사진에 빠져 있지 말고, F12버튼을 눌러 개발자 도구를 호출한다. 많은 탭 메뉴 중 가장 먼저 Console메뉴를 선택한다.



 그리고 비어있는 화면에 >가 보일텐데, 이게 자바스크립트를 테스트 해볼 수 있는 인터프리터 기반의 프롬프터이다. 여기에 뭘 해볼 거냐면, LB2<script>로 추가되면서 페이지 전역에 어떠한 족적을 남기는 지 보기 위해서다. lightbox의 이름으로 전역에 어떤 내용이 있는지 확인해보자. 요근래 크롬의 콘솔창에서 명령어를 치면 자동완성이 되어 참 좋다. lightbox를 치면 자동 완성되면서 나오게 될 것이다. 크롬에서 lightbox를 오브젝트로 선언되어 가지고 있다는 의미이다.



 여기에 보면 lightbox 오브젝트 내부에 위와 같은 내용들이 담겨 있으며, 이 내용들은 분명 어딘가에서 선언되어 사용할 수 있게 되었을 것이다. 이렇게 라이브러리를 만들게 된다면, 전역에 마구잡이로 변수를 선언하면 안된다는 사실은 모두다 알고 있기 때문에 꼭 한정적으로 사용할 것만 조심스레 감싸서 전역으로 내어져야 한다. 이러한 마인드를 역으로 읽어 간다면, 더 빠르게 소스를 읽어 내릴 수 있다. 무작정 소스를 보는 것 보다는 손자병법에도 나와 있듯이 지피지기면 백전불태라는 단어의 속 뜻 처럼, 이것을 어떠한 형식으로 사용되고 있냐를 먼저 파악하는 것이 가장 중요하다.

 이번에는 index.html을 열어보자. 실제로 열어보면, LB2를 선언하는 곳은 쉽게 찾을 수 있지만, 자바스크립트 상에서 실행되는 부분은 없다. 물론 LB2 사이트에서 이것에 대한 사용법을 정독하였다면 어떻게 사용하는 지 확인 할 수 있을 것이다. 바로, <img><a>로 감싸고, <a>에 필요한 attribute를 넣어 주면된다.

<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-1.jpg" data-lightbox="example-1">
    <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-1.jpg" alt="image-1" />
</a>
  • href : 원본 이미지 파일의 위치. 썸네일 이미지를 선택하면 여기에 정의한 이미지가 팝업으로 출력된다.
  • data-lightbox : 앨범 명. 이 이름과 동일한 이름을 가진 부분과 같은 앨범을 이루게 된다.
  • data-title : 팝업으로 출력 시, 사진의 이름으로 출력. 필수는 아니다.

 여기까지 이해했다면, 이번에는 LB2를 이용하여 간단한 페이지를 만들어 자신의 이미지에 적용해 보자. 물론 썸네일로 페이지에 기본 출력하고, 그 썸네일을 클릭하면 팝업으로 원본 이미지를 출력하게 하는 간단한 예제를 말이다.


댓글
댓글쓰기 폼