Slider Tasarlamak

Bugün bir sitem için basit bir slider tasarladım. Nasıl tasarladığımı sizlerle paylaşıyorum. Bittiğinde şu şekilde görünecek:

Image2

ÇALIŞAN BİR ÖRNEK GÖRMEK İÇİN BURAYA TIKLAYIN

Slider, özellikle haber sitelerinde aşina olduğunuz, görsellerden oluşan bir içerik sunma aracı. Sitelerin ana sayfalarını süsleyen bu sliderların yapımı fazla da zor değil. Kendi sliderınızı tasarlamadan önce şunları bildiğinize emin olun: HTML, CSS, Java Script ve jQuery…

İlk olarak HTML ve CSS ile sliderımızın görünüşünü tasarlayalım.

Slayt 1
Bu slayt 1 için açıklama...

Slayt 2
Bu slayt 2 için açıklama...

Slayt 3
Bu slayt 3 için açıklama...

Slayt 4
Bu slayt 4 için açıklama...

HTML kodunu incelediğimizde üzerinde efekt uygulaması yapacağımız DIV elementlerine id niteliği atadığımız dikkatinizi çekmiştir. Bunların birbirinden farklı olması gereklidir. “slider” stiline sahip DIV elementinde yer verdiğimiz resimler 480×360 boyutundadır. “slider_layer” stilindeki nesnelerin aynı noktadan başlaması önemlidir. Yani aslında bu resimler üst üste binecektir. Sadece görünmesi gereken javascript yardımıyla görünür hale getirilecektir. Bunu yapmamızı sağlayan CSS kodu “position: absolute;”

HTML kodunda gÖrdüğünüz slider_layer ve nav_layer sınıflarına ait divler çoğaltılabilir. Kaç adet slayt bulunacaksa o kadar yapabilirsiniz. Ancak aynı id vermemeye dikkat edin.

Sıra geldi CSS tasarlamaya:

.slider_pad {
	float: left;
	width: 720px;
	border-bottom: 1px #EFEFEF solid;
	padding-bottom: 10px;
	margin-bottom: 10px;
}
.slider {
	float: left;
	width: 480px;
	height: 360px;
	padding-right: 10px;
	border-right: 1px #EFEFEF solid;
}
.slider_layer {
	display: none;
	position: absolute;
	width: 480px;
	height: 360px;
	overflow: hidden;
}
.slider_title {
	position: absolute;
	left: 5px;
	top: 360px;
	width: 480px;
	height: 60px;
	background-image: url('transparan_siyah.png');
}
.slider_title p {
	font-size: 10pt;
	padding: 3px 5px 3px 5px;
	color: #FFFFFF;
}
.slider_title a {
	font-size: 12pt;
	font-weight: bold;
	color: #FFCC19;
}
.navigate {
	float: left;
	width: 170px;
	height: 360px;
	margin-left: 10px;
	overflow-y: scroll;
}
.nav_layer {
	float: left;
	width: 130px;
	padding: 5px;
	margin-bottom: 10px;
	border: 1px #EFEFEF solid;
}

Kodu incelediğimizde slider_pad, tüm sliderımızı kapsayan bir çerçeve, içine “float: left;” ile divler yerleştiriyoruz. Bunların stilleri “slider” ve “navigate” olarak belirledik. “slider” stili resmin bulunduğu ana çerçeve, “navigate” stili ise büyük resmin sağındaki küçük resimler için oluşturduğumuz bir div elementi.

slider içinde iki şey bulunuyor. Biri “slider_layer”, resmin koyulacağı katman, diğeri “slider_title” yazının bulunduğu katman. Bunların başlangıç noktalarını left, top CSS kodları ile belirledik. Hareket etmesini sağlayacak güç jQuery olacak.

navigate içinde sadece “nav_layer” adında küçük resim katmanı bulunuyor. Bunlar liste şeklinde sıralanıyor, 360 pikselden büyük kısımlarının scroll oluşturmasını sağladık. Bunun için kullandığımız kod: “overflow-y: scroll;” css kodu.

HTML ve CSS işimiz bittiğine göre kodlamaya geçelim. Kodlarımız hem javascript hem jquery karışık. jQuery için mutlaka kütüphane dosyasını kullanın (ben jquery-1.10.2.min.js dosyasını kullandım).

Kodumuzu yazalım ve inceleyelim:

window.onload = slaythazirla;
var beklet;
var tiklandi = false;
var siradaki = 0;
var slaytlar = new Array();
var onceki = 0;

function slaythazirla()
{
	for ( var i = 0; i < 10; i++ )
	{
		slayt = document.getElementById( 's' + i );

		if ( slayt != null )
		{
			if ( i == 0 )
			{
				slayt.style.display = 'inline';
				$("#n" + siradaki).css({"border":"1px #9B0909 solid"});
			}

			slaytlar[siradaki] = slayt;

			var slaytRes = document.getElementById( 'n' + i );
			slaytRes.onclick = (function(k) {return function() { slaytsec(k); }; })(siradaki);

			siradaki++;
		}
	}

	siradaki = 0;
	if ( slaytlar.length > 0 )
		beklet = setTimeout( 'slaytgoster();', 500 );
}
function slaytgoster()
{
	if ( tiklandi )
		return;

	onceki = siradaki;
	siradaki = siradaki + 1;
	if ( siradaki >= slaytlar.length )
		siradaki = 0;

	$("#n" + onceki).css({"border":"1px #EFEFEF solid"});
	$("#t" + onceki).animate({top:'360px'},"slow");
	$("#s" + onceki).fadeOut(500);
	$("#s" + siradaki).fadeIn(500);
	$("#t" + siradaki).animate({top:'300px'},"slow");
	$("#n" + siradaki).css({"border":"1px #9B0909 solid"});

	var beklet = setTimeout( 'slaytgoster();', 5000 );
}
function slaytsec( sec )
{
	onceki = siradaki;
	siradaki = sec;

	$("#n" + onceki).css({"border":"1px #EFEFEF solid"});
	$("#t" + onceki).animate({top:'360px'},"slow");
	$("#s" + onceki).fadeOut(500);
	$("#s" + siradaki).fadeIn(500);
	$("#t" + siradaki).animate({top:'300px'},"slow");
	$("#n" + siradaki).css({"border":"1px #9B0909 solid"});

	tiklandi = true;
}

Başlangıçta değişkenlerimizin değerlerini girdik. Burada yer alan:

– beklet, belirli sürelerle resmin değişmesini sağlayan fonksiyon
– tiklandi, eğer sağdaki resimlerden birine tıklanırsa otomatik resim geçişini kapayan sistem için kullanacağımız değişken. Tıklandıysa true olacak, tıklanmazsa false.
– siradaki, otomatik geçişte kaçıncı slaytta olduğuna burada yer vereceğiz.
– slaytlar, bizim için html belgemizdeki tüm slaytları barındıran bir dize.
– önceki, slayt geçişlerinde bir önceki slaytın sönmesi (fadeOut) için gerekli.

“window.onload” ile HTML belgemizin yüklendiği zaman slaythazirla fonksiyonunun çağırılmasını sağladık. Ardından en fazla 10 olmak üzere slaytlarımızı (s0, s1, s2 şeklinde idleri olan divler) dize haline getirdik. Ayrıca aynı fonksiyon içinde sağ taraftaki küçük resimlere tıklandığında slaytsec() fonksiyonunun çalışmasını sağladık.

Slaytları belirledikten sonra beklet = setTimeout( ‘slaytgoster();’, 500 ); ile bir sonraki slayt geçişini ayarladık. Buradaki 500 milisaniye olup resmin daha uzun görünmesi için bunu değiştirebilirsiniz.

Belirtilen sürenin sonunda slaytgoster() devreye girdi. Tıklandıysa bu fonksiyonun görülmemesini return; ile sağladık. Sırasıyla 6 adet jQuery efekti uyguladık.

$(“#n” + onceki).css({“border”:”1px #EFEFEF solid”});
Önceki slaytın kenarlığını kırmızıdan griye çevirdi.

$(“#t” + onceki).animate({top:’360px’},”slow”);
Yazı (slider_title) kutusunun 60 piksel aşağı inmesini sağladı.

$(“#s” + onceki).fadeOut(500);
Eski resmin sönmesini sağladı (500 ms)

$(“#s” + siradaki).fadeIn(500);
Yeni slaytın görünmesini sağladı.

$(“#t” + siradaki).animate({top:’300px’},”slow”);
Yeni slayt yazısının 60 piksel yukarı çıkmasını sağladı.

$(“#n” + siradaki).css({“border”:”1px #9B0909 solid”});
Yeni slaytın küçük resminin kenarlığını kırmızı yaptı.

Ardından yine bir beklet ile belirtilen sürede sonraki slayta geçmesini sağladık.

Ve işte sliderımızın son hali: ÇALIŞAN BİR ÖRNEK GÖRMEK İÇİN BURAYA TIKLAYIN

– Ücretsiz 30 slidera göz atmak için buraya tıklayın.
– Ücretsiz farklı 15 slidera göz atmak için buraya tıklayın.
– Ücretsiz farklı 15 slidera göz atmak için buraya tıklayın.

İnternette daha yüzlerce ücretsiz slider ve nasıl yapıldığı ile ilgili doküman bulabilirsiniz.

Hepinize iyi kodlamalar!

Javascript String İşlemleri

Uzun bir aradan sonra tekrar merhaba. Bugün sizlerle Java Script dilinde kullandığımız alfasayısal (string) değerler ile ilgili fonksiyonlar ve işlemler hakkında bilgi vereceğim. Öncelikle script dilinde nasıl bir string (harfler ve sayılar) değişken oluştururuz buna bakalım:

var a = 'Merhaba Dünya';
var b = 'İstanbul un en güzel mekanları burada.';

Burada “var degiskenadi = tırnak veya çift tırnak arasına değişken değeri” şeklinde bir ayarlama yaparak değişkenlerimizi belirledik. Eğer üst ayraç kullanacaksak kaçış işareti olan (\) unutulmamalıdır. Aksi takdirde java script hata verecektir.

var b = 'İstanbul'un en güzel mekanları burada.'; // yanlış
var c = 'İstanbul\'un en güzel mekanları burada.'; // doğru
var d = "İstanbul'un en güzel mekanları burada."; // ayıraç yerine çift tırnak, diğer bir yol

Bir string değişkenin karakter sayısını .length komutu vermektedir.

var a = 'Merhaba Dünya!';
var b = a.length; // değişken 14 sayısını içerir

Alfasayısal değişkenleri birleştirirken + (artı) işareti kullanılır.

var a = 'Murat';
var b = 'Eliçalışkan';
var c = a + ' ' + b; // değişken Murat Eliçalışkan olmuştur

Eğer bir string değer ile integer (sayısal) değer toplanırsa değer otomatik olarak alfasayısala dönüşecektir. Alfasayısallarda 4 işlem yapılamaz. Fakat string bir değer integere dönüştürülmek istenirse toString() fonksiyonundan yararlanabiliriz:

var a = 1 + 2;
var b = a.toString(); // b string bir değişken olup değeri '3' dür.

Bir alfasayısal değişken sadece sayısal değerler içeriyorsa sayısal değere dönüştürülebilir. Bunun için toplama haricindeki matematiksel bir işlem yapmak yeterlidir (Toplama yani + işareti javascriptin kuralı gereği değişkenin sonuna ekler ve alfasayısal değer verir). Örneğin:

var a = '100';
var b = a * 10; // değişken 1000 olur

Çeşitli Alfasayısal Fonksiyonlar

indexOf() Fonksiyonu

İlk olarak indexOf() fonksiyonundan bahsedelim. Bu fonksiyon bize alfasayısal bir değer içerisinde yer alan karakter ya da karakter grubunun konumu hakkında bilgi verir. Eğer sonuç -1 ise öyle bir karakter yoktur, 0 ve daha büyükse ise karakterin bulunduğu yeri bize bildirir.

var a = 'Merhaba Dünya!';
var b = a.indexOf('a'); // 4 verir

Sonuç 4 olarak çıkacaktır. Çünkü aranılan ilk değer 5. sıradadır, ilk değer 0 ile başlayacağı için bu bir eksiği olacaktır. Eğer a.indexOf(‘w’) deseydik, sonuç bulamayacağı için -1 olarak görünecekti.

charAt() Fonksiyonu

Verilen numarada geçen karakteri bize veren fonksiyondur.

var a = 'Merhaba Dünya!';
document.write(a.charAt(5)); // b harfini gösterir.

split() Fonksiyonu

Bu fonksiyon değişkendeki bir karaktere göre kelimeleri dize değeri haline getirmemize yarar. Örneğin bir cümledeki tüm kelimeleri tek tek ele almamız gerekirse:

var a = 'Bugün hava güzel!';
var dize = new Array();
dize = a.split(' '); // boşluk karakterini ayıraç olarak alır

Bu durumda dize[0] Bugün, dize[1] hava, dize[2] ise güzel! kelimelerini barındıracaktı.

substring() Fonksiyonu

Değişken içerisinde belirtilen karakterleri almamızı sağlar. Örneğin bir kelimenin içerisindeki 4. karakter ile 8. karakter arasındaki kelimeleri alacaksak. substring( baslangic, bitis ) şeklinde kullanılır:

var a = 'Venus Programlama';
document.write( a.substring(0, 5) ); // Venus verir

substr() Fonksiyonu

Diğerinden farklı olarak ikinci yazılan değer, ne kadar karakter ilerleneceğidir. Örneğin substr( 4, 8 ) dersek 4. karakterden 8 ileri gidip bu kısmı alacağı anlamına gelir.

toUpperCase() ve toLowerCase() Fonksiyonu

Bir alfasayısal değerdeki tüm harfleri küçültür ya da büyütür. Örneğin:

var a = 'Merhaba Dünya!';
var b = a.toUpperCase(); // MERHABA DÜNYA!
var c = a.toLowerCase(); // merhaba dünya!

Bir sonraki yazıda görüşmek dileklerimizle…