Interaction matters - web development blog

Dead simple MooTools slideshow

Szükségem volt egy kis slideshowra egy projecthez és ez lett a vége:
(1.2-es verzióhoz készült)

function slideShow( Obj ){
	// Version 0.2; Created by Kow, 2008; http://skyweb.hu/kow
	var pass = this;
	// initializing
	this.curImg = 0;
	this.slides = Obj;
	this.slides.each( function( img, index ){ 
		if( index > 0 ) img.fade(); 
		img.set('morph', { duration: 'long' });
	}, this);
	this.next = function(){
		pass.curImg++;
		this.slides.each( function( img, index ){ 
			img.morph({ opacity: 0 });
		}, this);
		if( pass.curImg == this.slides.length ) pass.curImg = 0;
		this.slides[ pass.curImg ].morph({ opacity: 1 });
	}
	this.prev = function(){
		pass.curImg--;
		this.slides.each( function( img, index ){ 
			img.morph({ opacity: 0 });
		}, this);
		if( pass.curImg < 0 ) pass.curImg = this.slides.length - 1;
		this.slides[ pass.curImg ].morph({ opacity: 1 });
	}
}

// Így kell bekapcsolni:
sshow = new slideShow( $$('div#gallery_image img') );

// 3 másodpercenként fog így képet váltani
sshow.next.periodical( 3000, sshow );

Ez a kis CSS még kell hozzá:

#gallery_image img{
	position: absolute;
	left: 0px;
	top: 0px;
}

Category: Programming - Tags: mootools javascript slideshow Read more

Tibor SzászInteraction matters

Dead simple MooTools slideshow

Briefing

Topics

Friends

Feeling so social

Tags