cypher’s notepad » Blog Archive » 자바스크립트로 작성된 간단한 웹 갤러리

자바스크립트로 작성된 간단한 웹 갤러리Aug 14, 2007

by cypher - Computing | Tags: JavaScript, 웹 갤러리, 자바스크립트

역시 심심해서 딩굴거리다가 깨작깨작..
아래와 같이 사용하면 됨. (Prototype 이 반드시 필요함)

JAVASCRIPT:

var Slide = new SimpleJsGallery('thumbnail', 124, {
orient:'horizontal',
display:7,
margin:5,
border:3,
speed:3
});
Slide.behavior = function() {
Effect.Fade('image', { duration:0.3, afterFinish:function() { //script.aculo.us
$('image').src = this.filename;
Effect.Appear('image', { duration:0.3 });
}.bind(this) });
$('desc').update(this.desc + ' ('+(this.current+1).toString()+'/'+this.totalThumbnails.toString()+')');
}

첫 번째 인자는 thumbnail list 를 포함하고 있는 컨테이너 엘리먼트의 id,
두 번째 인자는 thumbnail 의 가로 폭(모든 썸네일 의 가로 크기는 고정되어 있어야 함),
세 번째 인자는 옵션 값이다.

behavior 가 지정되면 슬라이드가 끝난 뒤 해당 함수가 실행되며,
썸네일이 선택되면 이미지를 포함하고 있는 li 태그에 selected 클래스가 설정된다.

적용 예제

소스 보기

PLAIN TEXT

JAVASCRIPT:

var SimpleJsGallery = Class.create();
SimpleJsGallery.prototype = {
current: 0,
behavior: null,
slide_is_running: false,
initialize: function(thumbnailElementId, thumbnailWidth) {
this.thumbnailElementId = thumbnailElementId;
this.thumbnailList = $$('#'+this.thumbnailElementId+' ul')[0];
this.thumbnailItems = $$('#'+this.thumbnailElementId+' ul li');
this.totalThumbnails = this.thumbnailItems.length;
this.thumbnailWidth = thumbnailWidth;
this.isHorizontal = (arguments[2]) ? ((arguments[2].orient=='vertical')?false:true) : true;
this.borderWidth = (arguments[2] && arguments[2].border != null) ? arguments[2].border : 0;
this.margin = (arguments[2] && arguments[2].margin != null) ? arguments[2].margin : 0;
this.numberOfDisplay = (arguments[2] && arguments[2].display> 2 && arguments[2].display%2) ? arguments[2].display : 5;
this.speed = (arguments[2] && arguments[2].speed) ? arguments[2].speed : 4;
this.elementWidth = this.thumbnailWidth + this.borderWidth*2 + this.margin;
var _width, _height;
if (this.isHorizontal) {
_width = ((this.elementWidth-this.margin)*this.numberOfDisplay + (this.numberOfDisplay-1)*this.margin).toString()+'px';
_height = (this.elementWidth-this.margin).toString()+'px';
}
else {
_width = (this.elementWidth-this.margin).toString()+'px';
_height = ((this.elementWidth-this.margin)*this.numberOfDisplay + (this.numberOfDisplay-1)*this.margin).toString()+'px';
}
$(this.thumbnailElementId).setStyle({ width: _width, height: _height, overflow:'hidden' });
if (this.isHorizontal) {
_width = ((this.elementWidth-this.margin)*this.totalThumbnails + this.totalThumbnails*this.margin).toString()+'px';
_height = (this.elementWidth-this.margin).toString()+'px';
}
else {
_width = (this.elementWidth-this.margin).toString()+'px';
_height = ((this.elementWidth-this.margin)*this.totalThumbnails + this.totalThumbnails*this.margin).toString()+'px';
}
$$('#'+this.thumbnailElementId+' ul')[0].setStyle({ width: _width, height: _height, listStyle: 'none', margin: 0, padding: 0 });
this.thumbnailItems.each(function(el) {
if (this.isHorizontal)
el.setStyle({ marginRight:this.margin.toString()+'px', float:'left' });
else
el.setStyle({ marginBottom:this.margin.toString()+'px' });
}.bind(this));
$$('#'+this.thumbnailElementId+' ul li a').each(function(el, i) {
el.setStyle({
display: 'block',
width: this.thumbnailWidth.toString()+'px',
height: this.thumbnailWidth.toString()+'px',
borderWidth: this.borderWidth.toString()+'px',
borderStyle: 'solid'
});
el.immediateDescendants()[0].setStyle({ display:'block', margin:'auto' });
el.onclick = function() { this.MoveTo(i); return false; }.bind(this);
}.bind(this));
},
MoveTo: function(pos) {
this.thumbnailItems[this.current].removeClassName('selected');
clearTimeout(this.slide_is_running);
if ( pos <= (this.numberOfDisplay-1)/2 ) { //앞쪽
this.slideTo(0);
}
else if ( pos>= this.totalThumbnails - (this.numberOfDisplay-1)/2 - 1 ) { //뒤쪽
var offsetLeft = (this.totalThumbnails - this.numberOfDisplay)*this.elementWidth;
this.slideTo(offsetLeft);
}
else { //중간
var offsetLeft = (pos-(this.numberOfDisplay-1)/2)*this.elementWidth;
this.slideTo(offsetLeft);
}
this.current = pos;
this.thumbnailItems[this.current].addClassName('selected'); //li 의 classname 에 selected 추가
this.filename = this.thumbnailItems[this.current].getElementsByTagName('a').item(0).href;
this.desc = this.thumbnailItems[this.current].getElementsByTagName('img').item(0).getAttribute('alt');
if (this.behavior)
setTimeout(this.behavior.bind(this), 0);
return false;
},
slideTo: function(to) {
if (this.isHorizontal)
var currentOffset = (this.thumbnailList.getStyle('marginLeft')) ? parseInt(this.thumbnailList.getStyle('marginLeft')) : 0;
else
var currentOffset = (this.thumbnailList.getStyle('marginTop')) ? parseInt(this.thumbnailList.getStyle('marginTop')) : 0;
var inc = parseInt((Math.abs(Math.abs(currentOffset)-Math.abs(to)))/this.speed);
inc = (inc <1) ? 1 : inc;
if (currentOffset> -to) { //offset 감소
currentOffset = currentOffset - inc;
currentOffset = (currentOffset <-to) ? to : currentOffset;
}
else { //offset 증가
currentOffset = currentOffset + inc;
currentOffset = (currentOffset> -to) ? to : currentOffset;
}
if (currentOffset == to) { //종료
if (this.isHorizontal)
this.thumbnailList.setStyle({ marginLeft:(-to).toString()+'px' });
else
this.thumbnailList.setStyle({ marginTop:(-to).toString()+'px' });
return;
}
if (this.isHorizontal)
this.thumbnailList.setStyle({ marginLeft:currentOffset.toString()+'px' });
else
this.thumbnailList.setStyle({ marginTop:currentOffset.toString()+'px' });
this.slide_is_running = setTimeout( function() { this.slideTo(to) }.bind(this), 50);
}
}