Delightbox - dojo 기반의 Lightbox

사진작가들이 쓰는 Lightbox 얘기가 아니다. 웹개발자나 디자이너에게 Lightbox는 웹 페이지 상에서 이미지들을 뽀대나게 보여주는 일종의 Modal Dialog 형태의 UI 컴포넌트다.

대표적인 Lightbox 라이브러리로는 (유행이 좀 지난 느낌이 있지만) prototype / script.aculo.us 를 사용하여 만든 Lightbox2를 보면 어떤 것인지 쉽게 이해 된다. 요즘 유행하는 jQuery용 플러그인은 넘쳐난다.

하지만, 개인적으로 prototype이나 jQuery 보다는 dojo를 선호하기 때문에(대부분의 경우엔 별 차이가 없지만, 마이너리티 체질의 똥고집이랄까...) dojo로 Lightbox를 만들기로 했는데... 웬걸 -.-; dojox.image.Lightbox라는 녀석이 이미 있더라. 그냥 쓸까 하다가... 이 녀석이 dijit(dojo의 위젯 시스템; jQuery UI 쯤에 해당하는 모듈이다)에 의존하는 관계로 버림받고 있길래 간단히 하나 맹그러봤다.

솔직히... 만만하게 보고 시작했는데... 생각보다는 많이 복잡하더라. -,.-;;;

이름은 Lightbox와 비슷하면서도 dojo로 만들었다는 느낌이 들도록 Delightbox라고 지었다 ^^;

각설하고, 사용법을 보자면 대충 이런 식이다:

1. (jQuery빠들이 좋아하는) unobtrusive 스타일

iolo.ui.Delightbox.create(dojo.query('#content a.delightbox'));

html 페이지의 모양새가 대충 이런식이라고 하면:

...

<div id="content">

...

<a href="원본이미지url" title="제목" class="delightbox"><img src="썸네일이미지url" /></a>

<a href="원본이미지url" class="delightbox">제목</a>

...

위의 예는 html 페이지 내에서 id가 content인 태그 안쪽에서 "delightbox"라는 css 클래스를 가진 모든 a 태그를(dojo.query는 jQuery의 $의 여러가지 기능 중의 하나라고 보면 된다) delightbox 형태로 바꾼다.

이 방식의 장점은 javascript를 쓸 수 없는 환경에서도 그럭저럭 보이는 거라고 하는데... 글쎄.. 과연 그럴까? 아무튼, unobtrusive javascript에 대해서는 예전에 쓴 글을 참고하시라.

2. (dojo빠들이 좋아하는) json datastore 스타일

iolo.ui.Delightbox.fetch('http://iolo.pe.kr/screenshots/screenshots.json');

json 파일은 대충 이런 식인데, thumbnail이 없으면 title을 사용한다:

{

items: [

{ url: '원본 이미지 url', title:'제목', thumbnail:'썸네일 url' },

...

]

}

위의 예는 주어진 url에서 json으로 된 데이터를 ajax로 읽어와서 그 안에 있는 내용을 토대로 동적으로 delightbox가 결합된 html을 만든다.

3. 코딩으로 처리하기

이건 소스 코드를 참고해서 알아서 하시면 되겠다. :p 소스

소스 코드는 여기, 실제 돌아가는 페이지는 여기.

덧1. dojo의 크로스 도메인 빌드를 지원하도록 만들었으므로, 내 웹서버에는 이것과 관련해서는 js 파일이 하나도 필요없다. 여기에 대해서는 테스트 페이지의 소스 코드를 참조하시면 되겠다.

덧2. 아! 빼먹을 뻔 했는데... IE에선 안된다. CSS만 좀 손봐주면 될것 같은데... 귀찮아서-,.-;;;