Ajax와 XML : 라이트박스(lightbox)용 Ajax

이번에는 좀 더 쉬운 초급용 Ajax Article을 골라 보자.
11월 6일 IBM dW에 업데이트된 기사로, PHP, Dynamic HTML(DHTML), Asynchronous JavaScript + XML(Ajax)와 같은 기술들을 사용하여 사용자의 관심을 끌 수 있는 컨텐츠를 만드는 방법이다.

먼저 결과 화면부터 보자.

텍스트에 적용된 결과이다. 마우스를 텍스트 위에 올려 놓으면, 우측의 그림처럼 작업 팝업과 같은 형식으로 마치 툴팁과도 같은 모습을 보여준다.

체험하기 : http://www.muttmansion.com/lightbox/tooltips/


다음은 이미지에 적용된 결과이다. 이 그림을 클릭할 경우, 우측의 그림처럼 섬네일의 원래 크기의 이미지가 창 중앙에 디스플레이 된다. 더욱이 백그라운드의 모든 Material이 흐려지기 때문에, 사용자는 중앙의 컨텐츠에 더욱 집중할 수 있다.

체험하기 : http://www.muttmansion.com/lightbox/lightbox/


또한 다음과 같이 페이지 자체적으로 윈도우용 컨텐츠를 가지고 있고, 사용자가 폼에서 Login버튼을 클릭하면 Ajax.Request 객체를 사용하여 서버에서 로그인을 요청한다. 그래서 우측의 그림처럼 매우 참신한 Web2.0 스타일의 로그인 윈도우를 볼 수 있게 된다.
이러한 방식은 애플리케이션에 팝업을 가져올 수 있고, 사용자들에게 웹 보다는 데스크탑 애플리케이션과 비슷한 것을 사용하고 있다는 인식을 줄 수 있다는 점이 매력적이다.

체험하기 : http://www.muttmansion.com/lightbox/window/


이러한 방식으로 자신의 웹 페이지에 유저들의 관심을 효과적으로 끌 수 있는 방법들을 다루고 있는데, 모든 예제는 Prototype.js JavaScript 라이브러리를 기반으로 구현한다.
첫번째 예제는 너무나도 간단하다. 먼저, 보여줄 페이지(index.html)를 구성하되, 마우스가 롤오버 되었을 경우 효과를 보여줄 텍스트를 <div>태그로 감싸주고 이름을 설정한다. 두번째로 롤오버 되었을 경우에 보여줄 텍스트를 text.php에 추가한다. 세번째로, JavaScript를 정의하는데,

<script type="text/javascript">
new Ajax.Updater( 'popup1', 'text.php' );
new Tooltip('설정한 div 이름', 'popup1')
</script>

이것으로 끝이다. 너무나 간단하지 않은가- 자신의 블로그에 굳이 다른 페이지를 통해 표시할 필요가 없는 각종 Contents들은 이러한 방식으로 간단히 표현가능하게 해 주며, 사용자의 관심도 끌 수 있다.
이런식으로 페이지를 어지럽히지 않고 사용자들에게 Contents를 On Demand 방식으로 상세한 내용을 보여줄 수 있으며, 상세한 내용은 텍스트 뿐 아니라 이미지, 테이블 포멧팅 등이 될 수도 있다.

가장 기본적인 예제를 맛보았는데, 상단에서 볼 수 있는 다른 예제들은 IBM dW에서 직접 보도록 하자.
그 외에도 '페이더(fader) 메시지'에 대한 예제도 볼 수가 있는데 html과 JavaScript에 대한 기본적인 이해만 있으면 어렵지 않게 구현할 수 있을 것이다.
또한 이는 모듈 겸, 프레임웍 같이 되어 있어 활용성도 높을 듯 하다.
링크 : http://www.ibm.com/developerworks/kr/library/x-ajaxxml6/index.html

또한, 이것을 그대로 적용한 예제들도 볼 수가 있는데, 아래 링크를 따라가 보자.
링크 : http://www.huddletogether.com/projects/lightbox2/

각자 자신의 블로그에 멋진 이미지 갤러리 하나씩 삽입 해 보는것도 괜찮지 않을까 싶다.