79.jQuery - 사진 상세보기 플러그인 만들기 (12.PlugIn )
해당 프로젝트에 새항목 추가 합니다.
- JScript.js 추가 (godffs.photoview.js)
- StyleSheet.css 추가 (godffs.photoview.css)
| godffs.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); |
| godffs.photoview.css |
|
#products { float: left; width:175px; height:400px; overflow:auto; border:1px solid red; margin-right:10px; } #navi{clear: both; text-align:left } |
| 02.GodffsPhotoView.htm |
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>사진 상세 보기 플로그인 제작</title> <!--순서중요-->
<link href="godffs.photoview.css" rel="stylesheet" type="text/css" />
<script src="../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script src="godffs.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" style="width:110px;
height:310px;" align="center">
<img src="../images/jc3.jpg" width="100px";
height="100px"/>
<img src="../images/jc5.jpg" width="100px";
height="100px"/>
<img src="../images/jc6.jpg" width="100px";
height="100px"/>
</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> |
| 결과화면 |
| |
02.GodffsPhotoView.htm
godffs.photoview.css