prototype & scriptaculous 이용한 간단한 slide show

준비물

• prototype.js
• scriptaculous.js
• slideshow.js (제일 아래 소스 있음)

사용예제 1)

HTML:

설명 1
설명 2
설명 3
설명 4
		

Javascript:

document.observe('dom:loaded', function(){	
	oMySlides = new iSlideShow({
		autostart 	: true		// optional, boolean (default:true)
		start		: 0,	 	// optional, slides[start] (default:0)
		wait 		: 4000, 	// optional, milliseconds (default:4s)
		slides 		: [
			'image-div-a',
			'image-div-b',
			'image-div-c',
			'image-div-d'
		],
		counter		: 'counter-div-id', // optional...
		caption 	: 'caption-div-id', // optional...		
		playButton	: 'PlayButton', 	// optional (default:playButton)
		pauseButton	: 'PauseButton', 	// optional (default:PauseButton)
	});
});

사용예제 2)

HTML:

	

	

		
설명 1
		
설명 2
		
설명 3
		
설명 4
		
설명 5
		
설명 6
		
설명 7
	
	

	

Javascript:

document.observe('dom:loaded', function(){
	$('photo').down('ul').hide();	// container 사용시...
	oMySlides = new iSlideShow({
		autostart 	: true		// optional, boolean (default:true)
		start		: 0,	 	// optional, slides[start] (default:0)
		wait 		: 4000, 	// optional, milliseconds (default:4s)
		slides 		: $('photo').down('ul').select('li'),
		counter		: 'counter-div-id', // optional...
		caption 	: 'caption-div-id', // optional...
		container	: 'slideshow',		// container 에 통째로 변경하여 보여줄때 (CSS와 크기제한에서 자유롭다.)
		playButton	: 'PlayButton', 	// optional (default:playButton)
		pauseButton	: 'PauseButton', 	// optional (default:PauseButton)
	});
});

slideshow.js 소스

/**
 *	Basic Slideshow App
 *
 *	Plagerised from Tom Doyle by Isotope Communications Ltd, Dec 2008
 *	http://www.tomdoyletalk.com/2008/10/28/simple-image-gallery-slideshow-with-scriptaculous-and-prototype/
 *
 *	Published [16/12/08]:
 *	http://www.icommunicate.co.uk/articles/all/simple_slide_show_for_prototype_scriptaculous_38/
 *
 *  Patched [07/05/09]:
 *  container 추가
 *
 *	Changes: Basically made it an object so that you can run multiple instances and so that
 *			 it doesn't get interfered with by other scripts on the page.
 *
 *			 Have also added a few things, like "Captions" and the option of changing the
 *			 effects..
 *
 *	To start the slideshow:
 *		oMySlides.startSlideShow();
 *
 *	To skip forward, back, stop:
 *		oMySlides.goNext();
 *		oMySlides.goPrevious();
 *		oMySlides.stop();
**/

var iSlideShow = new Class.create();

iSlideShow.prototype = {

	initialize : function (oArgs){
		this.wait 			= oArgs.wait ? oArgs.wait : 4000;
		this.start 			= oArgs.start ? oArgs.start : 0;
		this.duration		= oArgs.duration ? oArgs.duration : 0.5;
		this.autostart		= (typeof(oArgs.autostart)=='undefined') ? true : oArgs.autostart;
		this.slides 		= oArgs.slides;
		this.counter		= oArgs.counter;
		this.caption		= oArgs.caption;
		this.container		= oArgs.container;	// 통째로 변경
		this.playButton		= oArgs.playButton ? oArgs.playButton : 'PlayButton';
		this.pauseButton	= oArgs.pauseButton ? oArgs.pauseButton : 'PauseButton';
		this.iImageId		= this.start;
		if ( this.slides ) {
			this.numOfImages	= this.slides.length;
			if ( !this.numOfImages ) {
				alert('No slides?');
			}
			this.textIn = '1 / ' + this.numOfImages;
			this.updatecounter();
			if(this.container) this.swapImage(0,0);
		}
		if ( this.autostart ) {
			this.startSlideShow();
		}
	},

	// The Fade Function
	swapImage: function (x,y) {
		if(this.container) {
			$(this.container).update($(this.slides[x]).innerHTML).appear({ duration: this.duration, from:0.0, to:1.0 });
		} else {
			$(this.slides[x]) && $(this.slides[x]).appear({ duration: this.duration });
			$(this.slides[y]) && $(this.slides[y]).fade({ duration: this.duration });
		}
	},

	play: function () {

		var imageShow, imageHide;

		imageShow = this.iImageId+1;
		imageHide = this.iImageId;

		if (imageShow == this.numOfImages) {
			this.swapImage(0,imageHide);
			this.iImageId = 0;
		} else {
			this.swapImage(imageShow,imageHide);
			this.iImageId++;
		}

		this.textIn = this.iImageId+1 + ' / ' + this.numOfImages;
		this.updatecounter();
	},

	stop: function() {
		clearInterval(this.play);
		$(this.playButton) && $(this.playButton).appear({ duration: 0 });
		$(this.pauseButton) && $(this.pauseButton).hide();
	},

	goNext: function () {
		clearInterval(this.play);
		$(this.playButton) && $(this.playButton).appear({ duration: 0 });
		$(this.pauseButton) && $(this.pauseButton).hide();

		var imageShow, imageHide;

		imageShow = this.iImageId+1;
		imageHide = this.iImageId;

		if (imageShow == this.numOfImages) {
			this.swapImage(0,imageHide);
			this.iImageId = 0;
		} else {
			this.swapImage(imageShow,imageHide);
			this.iImageId++;
		}

		this.updatecounter();
	},

	goPrevious: function () {
		clearInterval(this.play);
		$(this.playButton) && $(this.playButton).appear({ duration: 0 });
		$(this.pauseButton) && $(this.pauseButton).hide();

		var imageShow, imageHide;

		imageShow = this.iImageId-1;
		imageHide = this.iImageId;

		if (this.iImageId == 0) {
			this.swapImage(this.numOfImages-1,imageHide);
			this.iImageId = this.numOfImages-1;

			//alert(NumOfImages-1 + ' and ' + imageHide + ' i=' + i)

		} else {
			this.swapImage(imageShow,imageHide);
			this.iImageId--;

			//alert(imageShow + ' and ' + imageHide)
		}

		this.updatecounter();
	},

	updatecounter: function () {
		var textIn = this.iImageId+1 + ' / ' + this.numOfImages;
		$(this.counter) && ( $(this.counter).update(textIn) );
		if ( !$(this.container) && $(this.caption) && ( oNewCaption = $(this.slides[this.iImageId]).down('.image-caption') ) ) {
			$(this.caption).update(oNewCaption.innerHTML);
		}
	},

	// the onload event handler that starts the fading.
	startSlideShow: function () {
		this.play = setInterval(this.play.bind(this),this.wait);
		$(this.playButton) && $(this.playButton).hide();
		$(this.pauseButton) && $(this.pauseButton).appear({ duration: 0 });

		this.updatecounter();
	}
}