MooTools ile Slideshow Yapmak

Bu yazı 2 ay 20 gün önce yayınlanmış olduğundan güncelliğini yitirmiş veya içeriğindeki bilgilerin geçerliliği kaybolmuş olabilir. Herhangi bir yanlış anlaşılmadan bu blog sorumlu değildir.

Bu yazıda MooTools kullanarak çok basit bir slideshow yapmayı göstereceğim. Açıkçası zaten gösterilmiş olan bu yazıyı Türkçeleştireceğim.

Hemen başlayalım:

1. MooTool’u edinelim:
Yazının başında da MooTools’a link vermiştim ama farketmeyenler için, hemen şuradan indirebilirsiniz.

2. HTML Kısmı:
HTML kısmıyla, slideshowda göstereceğimiz resimleri ayarlıyoruz:

<div id="slideshow-container">
	<img src="slideshow/resim1.jpg" alt="Resim 1" />
	<img src="slideshow/resim2.jpg" alt="Resim 2" />
	<img src="slideshow/resim3.jpg" alt="Resim 3" />
	<img src="slideshow/resim4.jpg" alt="Resim 4" />
	<img src="slideshow/resim5.jpg" alt="Resim 5" />
</div>

3. CSS Kısmı:
HTML kısmı bittiğine göre CSS ile slideshowumuza ayar verelim:

#slideshow-container	{ width:512px; height:384px; position:relative; }
#slideshow-container img { display:block; position:absolute; top:0; left:0; z-index:1; }

3. MooTools Entegrasyonu:

window.addEvent('domready',function() {
	/* settings */
	var showDuration = 3000;
	var container = $('slideshow-container');
	var images = container.getElements('img');
	var currentIndex = 0;
	var interval;
	/* opacity and fade */
	images.each(function(img,i){ 
		if(i > 0) {
			img.set('opacity',0);
		}
	});
	/* worker */
	var show = function() {
		images[currentIndex].fade('out');
		images[currentIndex = currentIndex < images.length - 1 ? currentIndex+1 : 0].fade('in');
	};
	/* start once the page is finished loading */
	window.addEvent('load',function(){
		interval = show.periodical(showDuration);
	});
});