jQuery PlugIn - 사진 상세 보기 플러그인 제작 (나만의 플러그인)
.NET프로그래밍/jQuery 1.3.2 2009. 11. 17. 13:39 |
[MyPlugInPhotoView.htm]
<!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>
<title>사진 상세 보기 플러그인 제작</title>
<link href="jquery.MyPlugIn.PhotoView.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script src="jquery.MyPlugIn.PhotoView.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
// 썸네일 이미지 개체 리스트에 상세 이미지 출력
$('#products img').photoview({
photoElement: '#photo', // 사진을 보여줄 개체
previousControl: '#prev', // 이전버튼 개체
nextControl: '#next', // 다음버튼 개체
firstControl: '#first', // 처음버튼 개체
lastControl: '#last' // 마지막버튼 개체
});
});
</script>
</head>
<body>
<h1>상품 상세 보기</h1>
<div id="products">
<img src="../ProductImages/thumbs/BOOK-01.jpg" />
<img src="../ProductImages/thumbs/COM-01.jpg" />
<img src="../ProductImages/thumbs/HARDWARE-01.jpg" />
<img src="../ProductImages/thumbs/Online-01.jpg" />
<img src="../ProductImages/thumbs/SOFTWARE-01.jpg" />
</div>
<div id="big">
<img id="photo" src="" alt="상세 이미지" />
</div>
<div id="navi">
<button type="button" id="first">처음</button>
<button type="button" id="prev">이전</button>
<button type="button" id="next">다음</button>
<button type="button" id="last">마지막</button>
</div>
</body>
</html>
-------------------------------------------------------------------------------------
[jquery.MyPlugIn.PhotoView.css]
#products {
float : left;
width : 175px;
height: 400px;
overflow: auto;
border: 1px solid red;
margin-right: 10px;
}
#navi {
clear: both;
text-align: left;
}
-------------------------------------------------------------------------------------
[jquery.MyPlugIn.PhotoView.js]
(function($) {
var settings; // 한개 이상의 매개변수를 담을 그릇 : params, 해시
// photoview라는 이름의 jQuery 플러그인 생성
$.fn.photoview = function(callerSettings) {
// extend 함수에 의해 한 개 이상의 매개변수를 동적으로 받을 수 있다.
settings = $.extend({
photoElement: '#photoviewPhoto', // 넘겨온 썸네일 포토리스트
transformer: function(name) { return name.replace(/thumbs/, 'bigs'); }, // 큰 이미지의 경로
nextControl: null, // 다음 버튼, 지정하지 않으면 설정되지 않는다.
previousControl: null, // 이전 버튼
firstControl: null, // 처음 버튼
lastControl: null // 마지막 버튼
}, callerSettings || {}); // 공식과 같은 코드(?)
settings.photoElement = $(settings.photoElement);
settings.thumbnails = this.filter('img'); // img 요소만 settings에 thumbnails 프로퍼티에 저장
settings.thumbnails.each(function(n) { this.index = n; });
settings.current = 0; // 현재 보여지는 이미지의 인덱스 저장
// 썸네일 목록을 순회하여 index 속성에 담음
settings.thumbnails.click(function() { showPhoto(this.index); });
// 나머지 연산자를 사용하여 리스트의 끝에 도달 시 인덱스를 다시 처음으로 설정
settings.photoElement.click(function() {
showPhoto((settings.current + 1) % settings.thumbnails.length);
});
// 처음
$(settings.firstControl).click(function() {
showPhoto(0);
});
// 이전
$(settings.previousControl).click(function() {
showPhoto((settings.thumbnails.length + settings.current - 1) %
settings.thumbnails.length);
});
// 다음
$(settings.nextControl).click(function() {
showPhoto((settings.current + 1) % settings.thumbnails.length);
});
// 마지막
$(settings.lastControl).click(function() {
showPhoto(settings.thumbnails.length - 1);
});
// 처음로드시 첫번째 이미지를 보여줌.
showPhoto(0);
return this;
};
// 사진 보여주기 함수
var showPhoto = function(index) {
settings.photoElement
.attr('src', // src 속성에 대입
settings.transformer( // transformer 함수를 사용하여 썸네일을 큰이미지로 변경
settings.thumbnails[index].src)); // index에 해당하는 썸네일의 src 특성을 찾는다.
settings.current = index; // 현재 인덱스를 다시 저장
};
})(jQuery);
-------------------------------------------------------------------------------------
[실행결과]
'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글
| 툴팁(Tooltip) : 풍선 도움말 (0) | 2009.11.17 |
|---|---|
| 체크박스 전체선택 및 해제 (0) | 2009.11.17 |
| jQuery PlugIn - 새로운 함수를 만들기 (0) | 2009.11.17 |
| jQuery 플러그인(PlugIn)의 정의 (0) | 2009.11.17 |
| jQuery UI - 탭(Tabs) 컨트롤 (0) | 2009.11.17 |