İBRAHİM HALİL TURAN KİŞİSEL WEB SİTESİ
jqueryslideryapimi
Günümüz sitelerininin (Hürriyet, Milliyet, Star Gazetesi gibi bir çok haber sitesinde) çoğunda bulunan ve bir gereksinim haline gelen jQuery slider yani manşet haberi sistemi yapımından bahsedeceğim. jQuery slider ‘ın kodlamasına geçmeden önce çalışma mantığına değinmek istiyorum. Çünkü algoritması bilinmeyen/hazır olmayan bir şeyi kodlamaya başlamak kodlarken birçok soruna neden olacaktır.
Çalışma Mantığı
jQuery sliderların genel olarak mantığı aynıdır. En iç kısımda jQuery sliderda görmek istediğimiz sayfaların bulunacağı slaytlar. Her slayt için bir blok element. Ve bu blok elementlere birer adet class. Class ları ise sıralarına göre “bir, iki, üç, dört, beş” şeklinde verdiğimizi varsayalım. Ardından bu 5 adet class ‘a sahip blok elementlerin hepsini bir blok element içine daha alıyoruz ve ID ‘sini “slider” veriyoruz. Slider ID ‘li blok elementimizi bir blok element içine daha alıyoruz, ID ‘sini “featured-slider” veriyoruz. Sanki “slider ID ‘li blok elementin içine almayı anladık ama niye bir blok elementin içine daha aldık bunları?” dediğinizi duyar gibiyim. Herşeyin bir nedeni olduğu gibi bunun da bir nedeni var. Çünkü slider ID ‘li blok elementimize position:absolute; değeri verip bu elementi sola, sağa kaydıracağız. featured-slider ID ‘li elementi blok elementi ise sadece bir sayfanın/slaytın gözükmesi için biçimlendireceğiz. Düşündüğünüz gibi featured-slider ID ‘li elementin stiline “overflow:hidden;” özelliğini vereceğiz.
Yukarıdaki resimde gördüğünüz gibi sliderımızın algoritmasını anlatmak için bir taslak hazırladık. Her elemente farklı renklerde kenarlıklar verdim. Sayfaların/slaytların içine class adlarını yazdım. Sarı kenarlıklı blok featured-slider ID ‘li elementimiz. Siyah kenarlıklı uzun blok ise slider ID ‘li elementimiz. Resimde üstteki şekilde hepsi bir bütün halinde ve hepsi gözüküyor. Bizim jQuery slider yani manşet haber sisteminde yapacağımız şey ise sadece featured-slider ID ‘li elementin içindekileri göstermek ve haricinde kalanları gizlemek. Sayfalar/slaytlar arası geçişleri ise slider ID ‘li elementimizi kaydırarak sağlayacağız. Alttaki şekilde ise featured-slider ‘a overflow:hidden; verdiğimizi yani harici kalan kısımları gizlediğimizi varsayalım. Class ‘ı “bir” olan elementin haricinde diğerleri gözükmüyor dimi? Çünkü diğerleri featured-slider ‘ın dışında kalıyor. Aynı şekilde #slider ‘ımızı bir sayfa sola kaydırıp kalan kısımları gizlediğimizi varsayalım. Alttaki ikinci şekilde olan görünümü elde edeceğiz. Geri kalan diğer 4 blok gözükmeyecektir. Ben resimde 5 elementinde şeklini anlayasınız diye çizdim.
İskelet Oluşturalım
Biçimlendirme ve jQuery ile sliderımıza hareket vermeden önce iskeletimizi oluşturalım. Çalışma mantığını anlatırken birçok kez kaç adet blok element kullanacağımızı ve nasıl yerleşim yapacağımızı söyledim.
|
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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="tr-TR"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery slider | Web Öğrencisi </title><link rel="stylesheet" type="text/css" href="style.css" /><script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script><script type="text/javascript" src="includes/slider.js"></script></head><body><div id="featured-slider"> <!-- jQuery slider/Manşet haber sistemimizin konumlandırmasını sağlayacak olan element --> <div id="slider"> <!-- Bu element sayesinde sola sağa kayma işlemlerini yapacağız. --> <div> <!-- Birinci slayt/sayfa için başlangıç --> <img src="images/bir.jpg" /> <!-- Slayt/sayfada çıkmasını istediğiniz resim/fotoğraf --> <h2>Birinci sayfa için başlık</h2> <!-- Gösterilecek olan yazının başlığı --> </div> <!-- Birinci slayt/sayfa için bitiş --> <div> <img src="images/iki.jpg" /> <h2>İkinci sayfa için başlık</h2> </div> <div> <img src="images/uc.jpg" /> <h2>Üçüncü sayfa için başlık</h2> </div> <div> <img src="images/dort.jpg" /> <h2>Dördüncü sayfa için başlık</h2> </div> <div> <img src="images/bes.jpg" /> <h2>Beşinci sayfa için başlık</h2> </div> </div> <div id="sayfalama"> <!-- Slayt/sayfalar arası geçişi elle sağlamak için gerekli sayfalama kısmının başlangıçı --> <a href="#"><span>bir</span></a> <!-- Birinci sayfa/slayta geçiş için gerekli link ve altta sırayla devam etmekte --> <a href="#"><span>iki</span></a> <a href="#"><span>uc</span></a> <a href="#"><span>dort</span></a> <a href="#"><span>bes</span></a> </div></div></body></html> |
Biçimlendirme
jQuery sliderımızın iskeletini oluşturduktan sonra sıra biçimlendirmede. Boyutlandırma, renklendirme, yazı şekillendirme özellikleri haricinde birkaç özellik kullandık. Bunlar konumlandırma, görünürlük özellikleri. Altta CSS kodlarını verirken yorum satırlarında bütün özellikleri açıklamadım. Çünkü yazımız CSS hakkında değil ve çoğunu bildiğinizi varsayıyorum. Sadece jQuery sliderımızın yapısına, çalışmasına etki edebilecek özellikleri yanlarında yorum satırlarıyla açıkladım.
|
1
2
3
4
5
6
7
|
*{margin:0px;padding:0px;} /* en basitinden css 'imizi sıfırlıyoruz. */#featured-slider{width:500px;height:200px;overflow:hidden;position:relative;} /* Bütün sayfaların gözükmemesi için overflow:hidden; kullandık. */#slider{width:2500px;height:200px;position:absolute;top:0px;left:0px;} /* #slider elementinde bütün sayfalarımızı/slaytlarımız bulunduğu için genişliğini 2500px belirledik ve kaydırma işlemini bu element ile yaptığımız için position:absolute; tanımladık. */#slider div{width:500px;height:200px;float:left;position:relative;} /* #slider 'ı her seferinde sola kaydırdığımız için içindeki divlerin yanyana gözükmesi gerek. Bu yüzden float:left; tanımladık */h2{background:url(images/titlebg.png);width:406px;height:27px;padding-top:3px;text-align:center;position:absolute;left:10px;top:10px;font:18px 'Trebuchet MS';color:#fff;}#sayfalama{position:absolute;left:10px;bottom:10px;}#sayfalama a{background:url(images/link.png);width:16px;height:16px;margin-right:2px;display:block;float:left;text-decoration:none;}#sayfalama a span{display:none;} /* Slider 'ın sol alt köşesindeki sayfa linklerinin içindeki "bir, iki, üç, dört, beş" yazılarını göstermemek için. */ |
Son Aşama jQuery Kısmı
jQuery sliderımızın/Manşet haber sistemimizin iskeletini oluşturduk, ardından biçimlendirdik. Şimdi ise sıra jQuery ile asıl işi yapmakta. Belli aralıklarla jQuery sliderımızın sayfalar/slaytlar arasında geçişini sağlayacağız. Bunun yanında ise sliderımızın sol alt tarafına koyduğumuz sayfalama bölümü ile sayfalar/slaytlar arası elle geçişi sağlayacağız. Gelelim jQuery kodlamamıza.
|
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
|
$(document).ready( function() { // Sayfamız hazır olduğu zaman aşağıdaki kodların uygulanacağını söylüyoruz.var i = 0; // Hangi sayfada/slaytta [0, 1, 2, 3, 4] olduğumuzu atayacağımız değişken.var tumgenislik = 0; // Bu değişkende kaçıncı sayfada/slaytta ise o ve ondan önceki slaytların genişliklerinin toplamı yer alacak. Başlangıç değeri olarak 0 atıyoruz.var genislik = $('#slider div').width(); // Ola ki slider 'ın genişliğini değiştirmek istersek hem css hem .js dosyamızda değişiklik yapmamak için '#slider div' etiketinin genişliğini bu değişkene atıyoruz.function animasyon(px){ // Slider 'ımızın geçiş animasyonu için animasyon adında fonksiyon oluşturuyoruz.$('#slider').stop(false, false).animate({ // #slider 'a animasyon tanımlıyoruz. Slider 'da gördüğümüz sayfaların hepsi #slider 'ın içinde bulunmakta.left: -px // Fonksiyona girilen px değişkeni kadar sola kaymasını sağlıyoruz.}, 300); // Buradaki değer animasyonun gerçekleşeceği milisaniyeyi belirtiyor.} $('#sayfalama a').click(function(){ // #slider 'ın sol alt köşesinde belirlediğimiz 5 adet linke tıklanınca yapılacak işlem için fonksiyon oluşturuyoruz.var index = $(this).index(); // Linke tıklanınca kaçıncı link olduğunu index() ile alıyoruz. İlk link 1 değil 0 değerini vermektedir.pozisyon = index * genislik; // #slider 'ımızı ne kadar sola kaydıracağımızı belirten değişken. Örneğin ikinci linke tıklayınca 1*500 değerini alacaktır.animasyon(pozisyon); // Bir önceki satırda belirlediğimiz pozisyon değişkeni kadar #slider 'ımızın sola gitmesi için gerekli fonksiyonu çalıştırıyoruz.if(index == 4){ // #sliderımız son sayfaya/slayta geldiğinde sayfalarımız bitmiş olacağı için #slider 'ı en başa götürmemize yarıyan şart cümleciği.i = 0; // Şart cümlediğimiz true dönerse i değişkenine 0 değerini atayıp #slider 'ımızı en başa götürüyoruz.}else{i = index + 1; // Şart cümleciğimiz false dönerse i değişkenine bir sonraki sayfanın kaçıncı sayfa olduğunu belirtiyoruz.}return false; // Fonksiyonunun daha işlem yapmasına gerek kalmadığını belirtiyoruz. });var zamanlayici = setInterval(function() { // zamanlayici adında bir zamanlayıcı/timer belirliyoruz.tumgenislik = i * genislik; // tumgenislik değişkenini 3. satırda açıklamıştık. Hangi sayfada isek o ve ondan önceki sayfaların/divlerin genişliklerinin toplamını alıyor.if(i==4){ // #slider 'ımızı son sayfaya geldiğini kontrol eden şart cümleciğii = -1; // Normalde ilk sayfamız için 0 değeri verilmesi gerek. Fakat alt satırda animasyon fonksiyonu çalışıp #slider sola doğru kayacağı için -1 değerini veriyoruz.}animasyon(tumgenislik); // #slider 'ımızın vakti gelince uygulayacağı animasyon fonksiyonu. #slider 'ı tumgenislik değişkeninin değeri kadar sola kaydırıyor.i++; // Zamanlayıcı her çalıştığında bir sonraki sayfaya/dive geçmesi için i değişkenini her seferinde 1 arttırıyoruz.}, 8000); // Buradaki değer ise zamanlayıcımızın kaç milisaniyede bir çalışması gerektiğini belirtiyor.}); |
Sonuç
Yazıyı tamamıyla uyguladıktan sonra sonuç olarak aşağıdaki jQuery slider ‘a yani manşet haber sistemini elde etmiş olacaksınız.
