Slider Tasarlamak

AJAX, Javascript, jQuery Yorum yapılmamış »

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="slider_pad">
<div class="slider">
   <div class="slider_layer" id="s0"><a href="#">
      <a href="#"><img src="galeri/sayfalar/1.jpg" alt="" /></a>
      <div class="slider_title" id="t0"><p><a href="#">Slayt 1</a><br />Bu slayt 1 için açıklama...</p></div>
   </div>
   <div class="slider_layer" id="s1">
      <a href="#"><img src="galeri/sayfalar/2.jpg" alt="" /></a>
      <div class="slider_title" id="t1"><p><a href="#">Slayt 2</a><br />Bu slayt 2 için açıklama...</p></div>
   </div>
   <div class="slider_layer" id="s2">
      <a href="#"><img src="galeri/sayfalar/3.jpg" alt="" /></a>
      <div class="slider_title" id="t2"><p><a href="#">Slayt 3</a><br />Bu slayt 3 için açıklama...</p></div>
   </div>
   <div class="slider_layer" id="s3">
      <a href="#"><img src="galeri/sayfalar/4.jpg" alt="" /></a>
      <div class="slider_title" id="t3"><p><a href="#">Slayt 4</a><br />Bu slayt 4 için açıklama...</p></div>
   </div>
</div>
<div class="navigate">
   <div class="nav_layer" id="n0"><img src="galeri/sayfalar/1.jpg" width="120" alt="" /></div>
   <div class="nav_layer" id="n1"><img src="galeri/sayfalar/2.jpg" width="120" alt="" /></div>
   <div class="nav_layer" id="n2"><img src="galeri/sayfalar/3.jpg" width="120" alt="" /></div>
   <div class="nav_layer" id="n3"><img src="galeri/sayfalar/4.jpg" width="120" alt="" /></div>
</div>
</div>

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
.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:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
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!


AJAX Kullanarak Veri Almak

AJAX, MySQL, PHP 6 yorum »

Bu makalemizde HTML, PHP, AJAX ve MySQL ortak çalışması sonucu anlık yanıt veren bir sayfa tasarlamayı öğrenelim. Bunun için verdiğimiz harf ya da kelime ile başlayan veritabanında kayıtlı isimleri bize listeleyen bir öneri kutusu yapmaya ne dersiniz? Böylelikle Ajax’ı yakından inceleme fırsatı bulacağız.

Öncelikle verilerimizi alacağımız bir veritabanı ve çeşitli kayıtlar oluşturuyoruz:

1
2
3
4
5
6
7
8
9
10
11
CREATE TABLE `ajax_veri` (
`id` int(5) unsigned NOT NULL auto_increment,
`isim` varchar(45) NOT NULL default '',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
 
INSERT INTO `ajax_veri` VALUES("1", "Ali");
INSERT INTO `ajax_veri` VALUES("2", "Veli");
INSERT INTO `ajax_veri` VALUES("3", "Cavit");
INSERT INTO `ajax_veri` VALUES("4", "Cavidan");
INSERT INTO `ajax_veri` VALUES("5", "Alara");

ajax_veri adını taşıyan bu tabloya ilk etapta 5 isim yükledik. Şimdi verilerimizi almamıza yarayacak bir PHP dosyası yazmalıyız. Bunu yaparken verilerin GET metoduyla alınmasını sağlamalıyız. Bu dosyamızın ismini ornek.php yapalım. İçerisinde ise ornek.php?kelime=A şeklinde eklendiğinde o harfle ilgili verileri bize listelemesini sağlayalım:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
if ( isset( $_GET['kelime'] ) &amp;&amp; strlen( $_GET['kelime'] ) > 0 ) {
   $kelime = strtolower( str_replace( "'", "\'", $_GET['kelime'] ) );
   mysql_connect('localhost', 'user', 'pass');
   mysql_select_db('ajax_veri');
   $sorgu = mysql_query( "SELECT * FROM ajax_veri WHERE isim LIKE '" . $kelime . "%';" );
   if ( !$sorgu || mysql_num_rows( $sorgu ) == 0 )
      echo '---';
   else
   {
      while( $kayit = mysql_fetch_array( $sorgu ) )
      echo $kayit['isim'] . ',';
   }
   mysql_close();
}
else
   echo '---';
?>

Buradaki veritabanı bağlantı için gerekli host, kullanıcı ve şifreyi değiştirmeyi unutmayın. Kullandığımız strlen() en az 1 karakter için sorgu yapılmasını sağlamak için. strtolower() ise gelen veriyi tamamen küçük harfe çevirip sorgulamamızı sağlar. str_replace ile üst ayraçlara güvenlik önlemi olarak taksim ekledik. Diğer kısımlar daha önceki yazımda MySQL bağlantısı kısmında anlatılanlardan farklı değil.

PHP dosyamızı yarattıktan sonra sıra HTML dosyamızı ve JavaScript’imizi oluşturmaya geliyor.

1
2
3
4
5
6
7
8
9
10
<html><head>
<title>Ajax Ornek</title>
<script type="text/javascript" src="ornek.js"></script>
</head>
<body></code>
 
<form><input type="text" id="txt1" onkeyup="ipucuGoster(this.value)"></form>
<p>Oneriler: <span id="ipucu"></span></p> </body>
 
</html>

Bu şekil hazırladığımız HTML belgemizde txt1 ismini taşıyan kutucuğumuzda herhangi bir karakter yazıldığında ipucuGoster() fonksiyonunun çalışmasını sağlarız. Üst tarafta ornek.js ye link verdik. Böylelikle son işlem olarak javascript dosyamızı hazırlamaya geldik. “ornek.js” olarak adlandıracağımız bu dosyaya şunlar yazılmalı: 1. Bölüm XMLHTTP objemizi seçmek.

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
function GetXmlHttpObject()
{
   var xmlHttp=null;
   try { xmlHttp=new XMLHttpRequest(); }
   catch (e) {
      try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }
      catch (e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }
   }
   return xmlHttp;
}

Bu fonksiyon bize tarayıcının uyumluluğunu denetleme şansı verir. Dönen değer null ise Ajax desteği yok demektir. 2. Kısım ise İşlevselliği sağlayacaktır:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var xmlHttp
function ipucuGoster( str )
{
   if ( str.length == 0 )
   {
      document.getElementById("ipucu").innerHTML="";
      return;
   }
   xmlHttp = GetXmlHttpObject();
   if ( xmlHttp == null )
   {
      alert ("Tarayiciniz AJAX destekli degil!");
      return;
   }
 
   var url="ornek.php";
   url = url + "?kelime=" + str;
   url = url + "&amp;sid=" + Math.random();
 
   xmlHttp.onreadystatechange=stateChanged;
   xmlHttp.open("GET", url, true);
   xmlHttp.send( null );
}
function stateChanged()
{
   if ( xmlHttp.readyState == 4 )
      document.getElementById("ipucu").innerHTML=xmlHttp.responseText;
}

Burada “xmlHttp” bir değişken olup 1. kısımdaki fonksiyonun bize verdiği cevaptır. Cevap olumluysa belirtilen url açılarak (belirtilen kriterlerle) veri alınır ve “id” özelliği “ipucu” olan yere yazılır. Bu işlem her kelime eklendiğinde yazılır. “readyState == 4″ bize işlem tamamlandıktan sonra yapılacakları bildirir. Dikkatinizi çektiyse ornek.php’nin sonuna bir SID= eklemesi yaptık. Bunun nedeni bize hep aynı bilgiyi göndermemesini sağlamak yani sürekli güncel olarak veriyi almak. Bunu header() de dosyanın sürekli eski tarihli olmasını sağlayarak da yapabiliriz.

Farklı örnekleri yine yorumlamak dileklerimizle…


Wordpress'in katkılarıyla hazırlandı ve ndesign teması kullanıldı.
Venus © 2008
Konular RSS Yorumlar RSS Giriş