Interaction matters - web development blog

Slimbox 1.7 bugfix

Slimbox is a great lightbox clone, developed by Cristophe Beyle.
The 1.7 MooTools based version has some problems in Google Chrome, that I was able to fix:
Simply change in slimbox.js lines 127 to 132 to this:

if ( center.offsetWidth != centerWidth || center.offsetHeight != centerHeight ) {
	check = fxResize.start({width: centerWidth, marginLeft: -centerWidth/2, height: centerHeight, top: top});
}

It alters the animation a little bit, but I think this is as good as the original. See a demo on my projects page.

Category: Programming - Tags: slimbox mootools bugfix Read more

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

Slimbox 1.7 bugfix

Dead simple MooTools slideshow

Briefing

Topics

Friends

Feeling so social

Tags