================================================ js ========================================================
(function ($) {
(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);
====================================================== plugin 쓰기 ==============================================
====================================================== plugin 쓰기 ==============================================
<script type="text/javascript">
$(document).ready(function () {
// 썸네일 이미지 개체 리스트에 상세 이미지 출력
$('#products img').photoview({
photoElement: '#photo', // 사진을 보여줄 개체
previousControl: '#prev', // 이전버튼 개체
nextControl: '#next', // 다음버튼 개체
firstControl: '#first', // 처음버튼 개체
lastControl: '#last' // 마지막버튼 개체
});
});
</script>
'Jquery' 카테고리의 다른 글
not(), filter() (0) | 2011.11.25 |
---|---|
라디오버튼의 체크된 value (0) | 2011.11.25 |
다중 속성 지정 (0) | 2011.11.25 |
params (0) | 2011.11.25 |
플러긴 만들기 (0) | 2011.11.25 |