ajax 팝업들의 종류는 많다.
그중에서 소개할 팝업스크립트는 쉐도우박스다. 그림자상자라는 이름의 이 프로그램은 제목에도 써놨지만 팝업의 완결이다. 모든 종류의 팝업을 다 처리할수 있으며 사용법이 너무 쉽다.
SHADOWBOX(http://mjijackson.com/shadowbox/)
쉐도우박스를 쓰는 이유는 너무나도 간단한 사용법과 역동적인 화면, 그리고 이미지뿐만 아니라 페이지,동영상 ,flash, 기타 등등 필요한 모든 기능을 제공한다는 점이다. 그리고 너무 가볍다. (이 가볍다는것이 나에겐 아주 중요하다. 내가 dojo 를 쓰지 않는 이유가 너무 무겁다는것..)
물론 어떤 브로우저에서도 잘 작동한다.
- Firefox 1.5+
- Camino
- Safari 2+
- Opera 9+
- Internet Explorer 6+
특히 놀라운건 많은 자바스크립트 프레임웍을 지원한다는것이다.
- Yahoo! User Interface Library (yahoo, dom, event, anim)
- Ext (standalone, ext-core.js)
- Prototype + Scriptaculous
- jQuery
- MooTools (requires Fx.Styles and its dependancies)
- Dojo Toolkit (thanks Peter Higgins)
개인적으로는 protorype.js 를 애용하기 때문에 사용상에 아무 문제가 없고 편하다.
실행을 시키면 왼쪽 그림처럼 화면이 까맣게 변하면서 클릭한 이미지가 역동적으로 뜬다.
자세한 사용법은 아래 설명하겠지만, 간단하게 설명하면..
<a href="이미지.jpg" rel="shadowbox" title="자동차이미지">이미지보기</a>
이렇게만 해주면 된다. 링크를 그냥 누르면 알아서 팝업으로 뜨게된다.
a 태그에 단지 rel="shadowbox" 이것만 추가해주면 되는것이다.
shadowbox.js 상세 사용법
사용법은 protorype.js 를 기준으로 설명합니다. 다른 프레임웍은 http://mjijackson.com/shadowbox/ 에서 봐주세요..
쉐도우박스를 사용하기 위해선 필수적으로 있어야할 스크립트들이 있다.
<script src="scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="scriptaculous/src/effects.js"></script>
<script type="text/javascript" src="scriptaculous/src/builder.js"></script>
<script type="text/javascript" src="shadowbox-1.0b3/src/js/adapter/shadowbox-prototype.js"></script>
<script type="text/javascript" src="shadowbox-1.0b3/src/js/shadowbox.js"></script>
<link href="shadowbox-1.0b3/src/css/shadowbox.css" rel="stylesheet" type="text/css">
먼가 많아보이는데 생각보다 가벼운놈들이기 때문에 크게 걱정은 안해도 될듯하다.
- shadowbox 다운로드
- scriptaculous 다운로드
최신버전의 scriptaculous 에서 오류가 난다면 하위버전으로 해보세요..
위의 코드의 경로를 정확히 설정해서 페이지 상단에 넣어주고,
<script>
Shadowbox.init();
</script>
이 코드를 페이지 젤 하단에 넣어주면 사전준비작업은 끝이다.
사전작업이 끝났으면 팝업을 열었으면 하는곳에 단지 링크만 걸면된다.
링크건파일이 이미지면 이미지가 뜰것이고 , 플래쉬면 플래쉬가 뜨고 그냥 웹페이지면 웹페이지가 뜬다. 물론 다른 사이트 링크도 가능하다.
- test.jpg 이미지 띄우기
<a href="test.jpg" rel="shadowbox">이미지테스트</a> - 가로크기 500px,창제목은 "팝업테스트" , 오픈할파일은 test.html
<a href="test.html" rel="shadowbox;width=500" title="팝업테스트">팝업테스트</a>
height를 설정하지 않으면 100%가 적용된다. - http://toyobi.net/web 띄우기
<a href=http://toyobi.net/web" rel="shadowbox" title="php를 들고 web2.0속을 헤매는 문디뚱">php를 들고 web2.0속을 헤매는 문디뚱</a>
만약 익스 7에서 오작동(팝업이 화면중간에 안뜨고 아래로 밀려서 뜬다던지..)을 한다면..
페이지 상단에 아래 코드를 넣어봅니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
그외 ajax 팝업 스크립트들 ...
- MODALBOX (http://www.wildbit.com/labs/modalbox/)
얼마전까지 사용하던 팝업스크립트인데, 화면중간이 아닌 상단에서 내려오는게 맘에 안들어서 사용하지 않고 있다. 페이지내에서 다른 페이지를 불러낼때 유용하다. - POPBOX(http://www.c6software.com/Products/PopBox/Default.aspx)
이미지를 바로 확대해서 볼수 있는 스크립트 - LIGHTBOX2(http://www.huddletogether.com/projects/lightbox2/#example)
이미지를 바로 확대해서 보거나 여러이미지를 슬라이드처럼 볼수 있게 해주는 너무나도 유명한 팝업 스크립트 . 이미지만 처리가 가능하기 때문에 페이지내에서 다른페이지를 불러내고 싶을때는 별로의 스크립트가 필요해서 불편하다.
댓글 없음:
댓글 쓰기