pillinetwork hesabınızla giriş yapın.

Jquery, Tutmayın Beni! Slideshow'a Kadar Yolun Var...

Herkese tekrardan merhabalar, keyifleriniz yerindedir umarım. Keyifler yerindeyse bugün biraz daha bilgimizi genişleterek keyiflenme zamanımız geldi demektir :)

Burada yazdığım ilk Jquery dökümanı bu olacak. İlk başta Jquery'nin ne şekillerde kullanıldığını yazacağım. Daha sonra Jquery ile birkaç tane örnek uygulama yapacağım. Bu dökümanı daha net anlayabilmek için html ve css bilginizin de olması gerekiyor.

Elimizde bulunması gereken Jquery dosyasını Jquery Resmi Sitesi'nden temin edebilirsiniz. Her şey hazırsa başlıyoruz...

Başlangıç :
Jqueryi ana olarak 2 şekilde kullanabiliyorsunuz :

  1. jQuery( expression, context )
  2. $( expression, context )

"$" ve "jQuery" aynı anlama gelmektedir. $yi jqueryden çıkarmak ve ya farklı bir ad takmak isterseniz :

1
2
 
var j = jQuery.noConflict();

    j(document).ready( function(){  });

şeklinde de kullanabilirsiniz. Burada "jQuery.noConflict()" metodu "$" ın kullanımını kaldırıyor( Diğer frameworklerle çakışmasın diye) ve "var j =" ilede jquery'nin değerini j ye atıyoruz. Aynı zamanda

1
2
3
 
var j = jQuery.noConflict();

    j(document).ready( function(){  });

    jQuery(document).ready( function(){  });

kodları da aynı sonucu verecektir.

Kullanımı :

Jquery'nin kullanımı Javascriptten daha basit, daha hızlı ve daha geniş kapsamlıdır. Bu yüzden bu framework'ü projenize eklemeniz demek javascriptle yazılan kodlardan kâr elde etmek demek.

Üsttede bahsettiğim gibi bir kullanımla kısaca dökümanımızın içeriğine girelim :

1
2
3
4
5
6
7
8
9
10
 
// Dökümanı anlatırken $ yöntemini kullanacağım.

    /*

        $( function() {  } );    // jQuery( callback ); - [Kod 1]

        $(document).ready( function() {  } );    // jQuery( callback ); - [Kod 2]

        [Kod 1] ve [Kod 2] aynı anlama gelmektedir. Sayfa tamamen yüklendiğinde işlemlere başla anlamına gelir.

    */



    $( function() {

       $("body").append("<div style=\"position:absolute; right:40px; top:20px;\" id=\"div1\">Bu kod jquery tarafından eklenmiştir.</div>").hide().fadeIn("slow");

    });

Jquery'nin ilk çekirdek konusu sayfa yüklenmesidir. Yukarıdaki kodumuzda sayfa yüklendiğinde "body" nesnemizi seçtik ve içerisine 

1
 
<div style=\"position:absolute; right:40px; top:20px;\" id=\"div1\">Bu kod jquery tarafından eklenmiştir.</div>

kodunu ekledik.

Tam Kod olan şu kodlarla sayfamızı açtığımızda, sayfamızın sağ üst köşesinde bir yazının opacity'sinin artarak gözüktüğünü göreceksiniz :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Jquery - Başlangıç</title>

<script src="jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>

</head>



<script language="javascript" type="text/javascript">

$( function() {

       $("body").append("<div style=\"position:absolute; right:40px; top:20px;\" id=\"div1\">Bu kod jquery tarafından eklenmiştir.</div>").hide().fadeIn("slow");

    });

</script>

<body>

	

</body>

Şu anlık 3 tane metod gördük. Bunlar :

  1. $(document).ready()
  2. $(seçici).hide()
  3. $(seçici).fadeIn()

Bunlardan son 2 tanesini açıklayayım :

1
 
$(seçici).hide()

seçici ile verdiğiniz class, id ya da tag'ın görünürlüğünü kapatır.

1
 
$(seçici).fadeIn()

seçici ile verdiğiniz class, id ya da tag'ın görünürlüğünü verdiğiniz milisaniye( örn. 1500 ) ya da yazısal değere göre( "slow", "fast", "def" ) görünürlüğünü yavaş yavaş arttırır.

Buraya kadar denemişseniz ve anlamışsanız, tebrikler sizde jQuery'i kısa sürede öğrenebilecek kabiliyet var :) Anlamayanlar ise asla üzülmesin, anlayana kadar tekrar edin, 5-6 tekrar sonrasında halen anlamamışsanız yanlış yerden başlamışsınız ya da yanlış yerden devam ediyorsunuz demektir.

Yazımıza kaldığımız yerden devam edelim :

- Tamam, sayfa yüklendiğinde bir tane divi görünür yaptık ama, bu ne işimize yarayacak ki?
- Çok haklısınız. Bu örnek bu şekilde kullanıldığında henüz herhangi bir işe yaramıyor. Fakat az sonra yapacaklarımızla ne kadar işe yaradığını sizde göreceksiniz :)

Şimdi konumuza karar verelim.
Benim canım bugün bir slideshow gösterisi hazırlamak istedi. Hazır bir kaç tane profesyonel yaptığım var fakat burda basit bir sistemden başlamamız gerekiyor. Ama bu yazıyı okumuşsanız kesinlikle o slideshowu geliştirebileceksiniz demektir.

Yavaş yavaş başlayalım öyleyse :

Projemizin ilk başta tasarımını( planlamasını ) yapalım :

Planlama
Planlama

Planlamaya bir kaç kod hatırlatma :

  • Thumblara event çalıştırıldığında ne yapılacağını gösteren kodları ekleyebilme olanağımız olsun.
  • Resmin "alt" özelliğini büyük resmin gösterileceği alanın altında opacitysi düşük bir alanda gösterebilme şansımız olsun ( kapatabilme ve açabilme olanağımızda olursa kullanıcıya daha da cezbedici olacaktır. )
  • Otomatik resim değiştirme özelliği olsun. Bunu da callback ile yapalım ki, yazılımcı otomatik değiştirme anında ileri mi gerimi, yoksa son resme mi gitmek istediğini belirleyebilsin.

O zaman hemen html ve css kodlarımızı hazır hale getirelim :

Css Kodlarımız :

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
 
div#wrap {

	width:400px;

	height:300px;

	position:relative;

	background-color:#FFF;

}

div#wrap div#buyuk_resim {

	width:inherit;

	height:inherit;

	position:relative;

	

	-moz-border-radius:5px;

	-webkit-border-radius:5px;

	

	background-color:#EEE;

	border:2px solid #666;

}

div#wrap div#buyuk_resim div#ek_bolum {

	width:inherit;

	height:20%;

	position:absolute;

	

	-moz-border-radius-bottomleft:2px;

	-moz-border-radius-bottomright:2px;

	-webkit-border-bottom-left-radius:2px;

	-webkit-border-bottom-right-radius:2px;

	

	bottom:0;

	left:0;

	

	background-color:#333;

	opacity:0.8;

	filter:Alpha(opacity=80);

}

div#wrap div#buyuk_resim div#ek_bolum span.title {

	margin-top:15px;

	margin-left:20px;

	

	font-size:16px;

	font-family:"Myriad Pro", Tahoma, Verdana;

	color:#FFF;

}

ul#kucuk_resimler {

	width:400px;

	height:60px;

	padding:2px;

	margin:0;

	margin-top:5px;

}

ul#kucuk_resimler li {

	width:70px;

	height:50px;

	padding:0px;

	margin:1px 2px;

	display:block;

	overflow:hidden;

	cursor:pointer;

	border:double 3px #999;

	float:left;

	

	-moz-border-radius:5px;

	-webkit-border-radius:5px;

}

ul#kucuk_resimler li img {

	border:none;

}

Html Kodumuz :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<div id="wrap">

    	<div id="buyuk_resim">

        	<div id="ek_bolum"></div>

        </div>

    </div>

    <ul id="kucuk_resimler">

   		<li class="aktif"><img src="jquery-1.png" alt="Bu yazımızda bulunan resim" /></li>

        <li><img src="7.png" alt="Java Yazımızdaki resim" /></li>

        <li><img src="5.png" alt="Java yazısında ne çok resim kullanmışım" /></li>

        <li><img src="5.png" alt="Java yazısında ne çok resim kullanmışım" /></li>

        <li><img src="5.png" alt="Java yazısında ne çok resim kullanmışım" /></li>

        <li><img src="jquery-1.png" alt="Bu yazımızda bulunan resim" /></li>

        <li><img src="7.png" alt="Java Yazımızdaki resim" /></li>

        <li><img src="5.png" alt="Java yazısında ne çok resim kullanmışım" /></li>

        <li><img src="5.png" alt="Java yazısında ne çok resim kullanmışım" /></li>

        <li><img src="5.png" alt="Java yazısında ne çok resim kullanmışım" /></li>

    </ul>

Kodlarımız hazır olduğuna göre sonuca bir gözatalım :

Slideshow - Gözatma 1
Slideshow - Gözatma 1

Slideshow - Gözatma 2
Slideshow - Gözatma 2

Sonuçlar gördüğünüze benzer sonuçlarda, bu kısmımızı başarıyla gerçekleştirdik demektir. Yazının başında da dediğim gibi sizi html ve css biliyor farz ediyorum. Şimdi sıra geldi kodlama kısmına :

Kodlamada kullanacağımız bazı olayları kısaca açıklamam gerekiyor :

  1. Javascriptte class nedir?
  2. Callback nedir? Nasıl yapılır?
  3. setTimeout nedir? Nerelerde ve Nasıl Kullanılır?

Hemen kısaca başlıyoruz :

1. Javascriptte class nedir?
Javascriptin içsel yapısı genel olarak fonksiyon ve variable( değer )'lerden ibarettir. Php, asp dillerindeki gibi javascriptte class tanımlaması "class ClassName" şeklinde yapılmaz. Aşağıdaki şekil bir classtır ve kullanımı da kodun alt kısmındadır. Dikkatli inceleyiniz :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
function class(a,b)

	{

		this.isim = a;

		this.govde = b;

	}

	class.prototype.Icerik = function()

	{

		return this.isim   " :-: "   this.govde;

	}

	

	var c = new class("deneme", "içerik");

	var sonuc = c.Icerik();

	document.write(sonuc);

	

	var d = new class("deneme2", "kireçi");

	sonuc = d.Icerik();

	document.write("<br/>" sonuc);

Sonucumuz "deneme :-: içerik" ve alt satırda "deneme2 :-: kireçi" şeklinde oluyorsa, bu örneğimizi doğru yaptınız demektir.

Kısaca classlar bu şekilde oluşur. Javascriptte class fonksiyondur.

2. Callback nedir? Nasıl yapılır?

Callback : fonksiyona gönderilen argüman adını fonksiyon olarak çalıştırmaya denir.

Örnek :

1
2
3
4
5
 
function callback( a )

{

	 a("deneme");

}

callback( function(b) { document.write(b); });

şeklinde işler. callback fonksiyonunun argümanına bir fonksiyon yolladınız. Bu fonksiyonun içine gönderilen "b" adlı argümanı aldınız ve yazdırdınız. Çıktısı : "deneme" olacaktır.

Örnek 2 :

1
2
3
4
5
6
7
8
9
 
function callback( a )

{

	 a("deneme");

}

function deneme( yazi )

{

     document.write(yazi);

}

callback( deneme );

İşleyişi diğer örnekle tamamen aynıdır. callback'in içine gönderilirken fonksiyonunun isminin sonuna () işaretlerinin konulmadığına dikkat edin. () konulduğu anda o kod çalıştırılmak istenir ve argüman olduğu için hata ortaya çıkarır. Bunun da sonucu "deneme" olacaktır.

3. setTimeout nedir? Nerelerde ve Nasıl Kullanılır?

İlk başta setInterval ile setTimeout arasındaki farkı söyleyelim.( Çok karıştırılıyor. )

setTimeout a verdiğiniz kod süre sonunda sadece 1 kere tekrarlanır.
Fakat setInterval e verdiğiniz kod süre sonunda tekrarlanır ve tekrardan süre işlemeye başlar. Yani durdurmadığınız sürece sonsuza dek tekrar eder. Bunun için slideshow gibi işlerde kontrolü setTimeoutla daha rahat sağlarız.

Peki bu setTimeout ne işe yarıyor?
Diyelim ki "fonksy" adında bir fonksiyonumuz var. Bu fonksiyonu biz sayfa açıldıktan 5 saniye sonra çalıştırmak istiyoruz. Bu fonksiyon çalıştığında bir ekran oluşturuyor ve bu ekranın içerisinde "Merhaba Dünya" yazıyor.

Hemen koda dökelim :

1
2
3
4
5
 
window.onload = function() { setTimeout("fonksy()", 5000); };

function fonksy()

{

      alert("Merhaba Dünya");

}

şeklinde olacaktır.

setTimeout 2 adet parametre alıyor. Bunların ilkinde süre sonunda çalıştırılmasını istediğiniz kodları yazıyorsunuz. İkincisinde ise kaç milisaniye sonra bu işlemin gerçekleşeceğini yazıyorsunuz.

Yukarıdaki kodda Sayfa yüklendikten 5 saniye sonra "fonksy()" kodunu çalıştırdık.

Her şey tamamsa geldik Jquery'le alakalı olan slideshow kısmına. Keyifler yerindedir umarım. İsterseniz 5 dakikalık bir molaya gidip gelin. Çünkü işin sürükleyici kısmı başlamak üzere =)

Slideshowu adım adım nasıl yapacağız :
1. Sınıfımız oluşturulacak. Büyük resim ve küçük resimlerin bulunduğu yerleri alacak.
2. Bunlar alındıktan sonra küçük resimler gözüksün mü?, Otomatik çalışsın mı, kaç sn aralıklı olsun gibi soruların cevapları alınacak.
3. Butonlar tanıtılacak( İleri, Geri, İlk, Son vs. )
4. Butonlara eventler tanıtılacak( onclick, onmouseover vs. )
5. Her ayar yapıldıktan sonra kodumuz çalıştırılacak.

Planlamamızı yapığımıza göre artık kodlamamıza geçebiliriz.

İlk olarak SlideShow adındaki classımızı oluşturalım :

1
2
3
4
 
function SlideShow()

{



}

Daha sonra gerekli içerikleri ekleyelim :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
function SlideShow()

{

     this.div_buyuk_resim = " ";

     this.ul_resim_listesi = " ";

     this.div_title = " ";



     this.otomatik = false;

     this.oto_sure = 2500;

     this.thumb_id_oneki = "thumb"; // Thumblara özel id verilirken önek almasını sağlar. Örneğin 3 adet resim varsa thumbların idleri sırayla : thumb1, thumb2, thumb3 olacaktır.

     

     this.liste_resimler = Array();

     

     this.acik_id = 0;



     this.thumblari_goster = true;

     this.title_goster = true;

     this.thumb_event = "onclick";

     this.zaman = null;



     this.Resim_Degisti = null; // Resim değiştiğinde ateşlenir. Parametreleri : id, resim, div_thumb



}

Gerekli içerikleri girdik. Şimdi bir "resim" adında bir sınıf oluşturalım. Bu sınıf liste_resimler içerisinde 2. bir array dizini oluşturmamızı engelleyecek.

1
2
3
4
5
6
 
function resim( id, resim, thumb )

{

     this.id = id;

     this.resim = resim;

     this.thumb = thumb;

}

Buna Olculendir adında bir metod ekleyelim( Daha sonra dive göre width/height oranını koruyarak, div içerisine yerleştirmemize olanak sağlayacak. )

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
 
function resim( img, tmb, alt ) // resimlerimizi array yerine class içerisinde tutmamızı sağlayacak.

{

     this.resim = img;

     this.thumb = tmb;

     this.title = alt;

}

resim.prototype.Olculendir = function( element, callback ) // Resimlerimizi kutumuza göre boyutlandırmamıza yarayacak.

{

    	var img = new Image();

    	img.onload = function() {



    	div_width = $(element).attr("clientWidth"); // clientWidth özelliği her tarayıcıda desteklenmektedir. Seçili elemanın görünen width'ini verir.

    	div_height = $(element).attr("clientHeight"); // clientHeight özelliği her tarayıcıda desteklenmektedir. Seçili elemanın görünen height'ini verir.



    	rsm_width = img.width; // Resmimizin width'i

    	rsm_height = img.height; // Resmimizin height'i



    	var div_olcu = (div_width/div_height); // Div'i oranlıyoruz

    	var rsm_olcu = (rsm_width/rsm_height); // Resmi oranlıyoruz



    	if( div_olcu > rsm_olcu ) // div'in width/height oranı resiminkinden büyükse.

    	{

            var katsayi = (div_width / rsm_width);

            $(img).attr("width",  div_width);

            $(img).attr("height", (rsm_height*katsayi) );

          

    	}

    	else // div'in width/height oranı resiminkinden küçükse.

    	{

            var katsayi = (div_height / rsm_height);

            $(img).attr("height",  div_height);

            $(img).attr("width", (rsm_width*katsayi) );

    	}

	callback( img ); // Callback fonksiyonumuzu çağarıyoruz( Resim yüklendiğinde dediğimiz için "return img;" çalışmayacaktır. 

    };

    img.src = this.resim.src; // load metodumuzdan sonra resmin yolunu belirttik ve yükleme işlemi başladı...

}

Evet, artık resmimizi divimizin boyutlarına göre oranlayabiliyoruz. Bu sayede yerleştirme de bir sorunumuz kalmıyor. Şimdi Slideshow'un "Calis" metodunu yazmaya başlayalım.

Not : Bu metod bütün ilk yükleme işlemlerini yapıp slideshow gösterisini çalışır hale getirecektir.

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
 
function SlideShow()

{

     this.div_buyuk_resim = " ";

     this.ul_resim_listesi = " ";

     this.div_title = " ";



     this.otomatik = false;

     this.oto_sure = 2500;

     this.thumb_id_oneki = "thumb"; // Thumblara özel id verilirken önek almasını sağlar. Örneğin 3 adet resim varsa thumbların idleri sırayla : thumb1, thumb2, thumb3 olacaktır.

     

     this.liste_resimler = Array();

     

     this.acik_id = 0;



     this.thumblari_goster = true;

     this.title_goster = true;

     this.thumb_event = "onclick";

     this.zaman = null;



     this.Resim_Degisti = null; // Resim değiştiğinde ateşlenir. Parametreleri : id, resim, div_thumb



}

// ------- Calis metodumuzu ekledik. ------- //

SlideShow.prototype.Calis = function()

{



}

/* Etiketler: , , , , , , , , , , , , , , , , , , , , , */
/* centrual yazdı. 23 Temmuz 2009 10:13. 10 yorum var */

Yorumlar

süper makale olmuş slideshow'a kadar bekleriz :)

/* KİWİ! */
/* loverz | 12 Temmuz 2009 08:34 */

Ya kusra bakmayın arkadaşlar, yanlışlıkla göndere bastım. Sonunu getiremeden onay bekliyor haline geldi, düzenleyemedim. Şimdi düzenleyip son halini yayınlayacağım.

/* / oguzozcan.com / */
/* centrual | 12 Temmuz 2009 10:36 */

@centrual örnek bir uygulama da eklersin artık :)

/* Short steps don’t work for major targets..! */
/* ezoryak | 13 Temmuz 2009 10:02 */

Kendisi örnek olacaktı da, yanlışlıkla kodu düzenledim, tarayıcıyı kapatacak ve sonra devam edecektim. Bi anda bi hışımla gönder'e tıklayınca geri dönüşü olmadı :)

/* / oguzozcan.com / */
/* centrual | 13 Temmuz 2009 10:42 */

makale icin tesekurler, tuttum :)

/* www.flashcentury.net */
/* Flashcentury | 13 Temmuz 2009 13:15 */

Ben teşekkür ederim. Arkadaşlar işlerden dolayı güncelleme fırsatı bulamıyorum. 2 gün sonra slideshow kısmını da tamamlayıp atacağım. Bu durum için herkesten tekrar tekrar özür diliyorum.

/* / oguzozcan.com / */
/* centrual | 13 Temmuz 2009 16:44 */

hocam güzel makele jquery'i bu şekilde tanımlayabileceğimizi bilmiyordum.emek vermişsin eline sağlık bir de çalışır uygulama halini link olarka verseydin daha güzel olurdu.

/* daily news | Logmania | RockLies */
/* vectro | 14 Temmuz 2009 18:04 */

çok faydalı bir bildiri, paylaşım için teşekkürler..

/* joyologo tasarım market 2.0 Joyolog Web 2.0 Hizmetleri joyoge tasarımcılar sosyal im ciobox yazılım kutusu 2.0 online çeviri aracı KargomNerede.com */
/* eofis | 31 Ekim 2009 02:06 */

Hocam süper bir makale olmuş.Jquerry ile ilgili daha önce bir araştırma yapmıştım ama bu tür konularda Türkçe kaynak sıkıntısı had safhada malesef. Teşekkürler tekrar.

/* Çırak ustayı geçmezse sanat ölür... */
/* Wisam | 07 Ocak 2010 11:36 */

üye olunpillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.

Bu yazıyı rapor et. Kural dışı içeriğe rastladığınızda editörlerimize rapor ederek müdahale edilmesini sağlayabilirsiniz. (Hangi durumlarda rapor edebilirim?)

Bu site

Nokta ve pilli ortak yapımı olan kodaman.org hep birlikte içerik üretip gelirini yazarları ile paylaştığımız kolektif bir kod yazarları blogudur. Siz de katılabilirsiniz.

pilliilan

Bu siteye ilan vermek 7ytl/gün'den başlayan fiyatlarla

son yorumlar

devamı »

arama

pillinetwork