티스토리 뷰



오늘 소개할 익스텐션은 jquery를 이용한 Lightbox입니다.
Lightbox는 최근들어 이미지를 보여주는 방식으로 많이 사용하고 있는 Jquery입니다.

보통 제공되는 소스를 통해 직접 코딩을 통해 설치하는 방법을 사용했는데 드림위버의 익스텐션을 통해 복잡하게 CSS나 소스의 수정없이 간편하게 설치할 수 있습니다.

먼저 함께 첨부된 lightbox.mxp파일을 다운받아 Adobe Extension Manger에서 설치를 합니다.
설치후에 드림위버를 실행하면 아래와 같이 Common의 맨 끝에 Lightbox의 새로운 아이콘이 생성되었을 것입니다.




그럼 본격적으로 삽입하는 방법에 대해 알아보도록 하겠습니다.
먼저 Lightbox를 적용할 이미지를 삽입해줍니다.

삽입된 이미지를 선택후 Common의 Lightbox 아이콘을 클릭하면 아래와 같이 화면이 나타난다.


Image Name : 이미지파일의 경로 및 파일명
Title : 이미지 선택시 이미지설명부분


정상적으로 작업이 되었다면 아래의 소스코드와 같이 Lightbox 소스가 첨부됩니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>Untitled Document</title>
<script src="lightbox/js/prototype.js" type="text/javascript"></script>
<script src="lightbox/js/scriptaculous.js" type="text/javascript"></script>
<script src="lightbox/js/effects.js" type="text/javascript"></script>
<script src="lightbox/js/builder.js" type="text/javascript"></script>
<script src="lightbox/js/lightbox.js" type="text/javascript"></script>
<link href="lightbox/css/lightbox.css" rel="stylesheet" type="text/css" />
</head>

<body>
<A HREF="large.jpg" border="0"  rel="lightbox[Lightbox]" title="꽃사진"><img src="large.jpg" width="400" height="267" /></a>
</body>
</html>

사용자의 필요에 따라 HTML 소스를 수정하여 활용하시면 됩니다.
즉, 작은 이미지 삽입후 클릭시 큰 이미지를 보여지게 하기 위해서는 아래와 같이 수정을 해서 사용하시면 됩니다.

<A HREF="큰이미지.jpg" border="0"  rel="lightbox[Lightbox]" title="꽃사진"><img src="작은이미지.jpg"  /></a>

댓글