티스토리 뷰
lightbox.mxpLightbox는 최근들어 이미지를 보여주는 방식으로 많이 사용하고 있는 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>
댓글