썸네일 이미지 원본크기 보기

jquery-lightbox-0.5.zip

적용방법

0, jqeury 의 plugin 으로 개발되어 있으므로 jquery 가 필요합니다.

1. jquery 본체외에 lightbox js, css 를 include 합니다.

    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

2. 확대를 하고 싶은 이미지가 들어가 있는 container (div, p, table등)에 적당한 id 값을 부여합니다.

    <div id="gallery">

3. 확대를 원하는 이미지에 <a 태그를 적용합니다.

    <a href="photos/image1.jpg"><img src="photos/thumb_image1.jpg" width="72" height="72" alt="" /></a>

    a 태그에 title 을 추가시키면 확대 이미지 출력시에 해당 메시지가 아래쪽에 노출됩니다.

4. $(document).ready() 안에 아래 태그를 적용합니다.

    $('#gallery a').lightBox();

    id=gallery 에 속해 있는 a 태그에는 모두 lightbox 속성을 부여한다는 의미입니다.