Merhabalar.. İkinci olarak hazırladığım slayt show pluginimi sizlerle paylaşıyorum..Bu yazımda plugini nasıl oluşturduğuma dair baştan sona başlıklara bölünmüş ders anlatımı mevcuttur.. Bilindik jQuery Slayt pluginlerden Biraz daha CSS ile şımartılmış ve jQuery Easing ile yoğurulmuş, Tayfun ÇAKIR tarafından pişirilmiş, klasiğin dışına çıkılmaya çalışıldıkça da zorlaşmış Pluginin özelliklerinden aşağıda bahsettim.

Pluginde kullanılan dış kaynaklar;

• jQuery – jquery-1.4.2.min.js
• Font – Quicksand_Book_400.font.js
• jQuery Easing – jquery.easing.1.3.js
• Cufon Font - cufon-yui.js
• 600×400 Boyutlarında 6 adet Manzara Resmi

Yapılan işler;

• Cufon include
• jQuery Script – jquery.Zingoslide.js Scripti yazıldı
• CSS Kodlama – Zingoslide.css dosyası yazıldı.
• CSS resimleri – Slayt içerisinde kullanılacak CSS resimleri

Demo – Download

Başlangıç

Plugini biraz açıklayacak olursak, CSS3 kodlama ile birlikte jQuery Easing dizinlendiği şekli ile beraber, Herbiri farklı 6 slayt geçişi hazırlandı.. CSS3 kullanılarak , hover efekti dahilinde Slayt kontrol paneli yerleştirildi.. Kodları ise aşağıda açıkladım.

CSS3′ten kastımız, CSS derslerinde bahsettiğim css Property sayesinde resimlere z-index özelliği kattım. Slayt geçişleri esnasında, farklı 6 çeşit için birbirinden farklı CSS kodlamaları girdim.Aşağıdaki resimden de anlayacağınız üzere, Tüm resim efektleri hep beraber çalışmaktadır;

2. Dosyaları oluşturalım;

Yukarıda da bahsettiğim gibi, Plugini 3 adet dosya yaratarak kullanabiliyoruz. Bunlar;

• index.html
• jquery.Zingoslide.js
• Zingoslide.css

a. HTML dosyasını oluşturma;

HTML dosyamızın içerisinde, CSS ve jQuery dosyalarının yollarını header tag’lerinin arasına gömdükten sonra, ilk önce Cufon Scriptini oluşturmak için h1, h2 ve h4 Tag’larini Cufon olarak gösteriyoruz. Bunun için aşağıdaki kodları kullanıyoruz;

Cufon.replace('h1 ,h2 ,h4');
$(function(){

 $("#bosluk").css({height:"auto" , overflow:"visible"});
 $("#test").Zingoslide();

 });

Daha sonra Cufon ayarlarımıza stil kazandırmamız gerekiyor, bunu kendinize göre belirleyebilirsiniz. Ben aşağıdaki stil kodlarını girdim;

* { margin:0; padding:0; list-style:none; }

body { background:#f7f7f7 url('i/arka-1.jpg') repeat-x; }
#slide-alan { width:960px; margin-left:auto; margin-right:auto; }

#baslik {  background:#111111; text-align:center; padding:10px; }
h1 { color:#00baff; font-size:32px; padding-bottom:5px; }
h4 { color:#008bbe; font-size:18px;padding-bottom:15px;  }
h2 { border-bottom:1px solid #cccccc; margin-bottom:10px; }
#bosluk {  width:600px; margin-left:auto; margin-right:auto; margin-top:50px; border:1px solid #3a3a3a; padding:10px; background:#292929 url('i/slayt-bg.jpg') repeat-x;  -moz-border-radius: 10px; -webkit-border-radius: 10px; position:relative; z-index:10;   }
.zingocan {   width:730px; margin-left:auto; margin-right:auto; display:block; margin-top:-30px; }

a { text-decoration:none;  padding:7px; margin:20px; color:#fff; font-family:Tahoma,Arial;}

Sonrasında ise, slide-alan katmanının içerisine bir liste oluşturuyoruz. Her listenin içine de birer resim koyabiliriz. Bu liste içerisinde resimden sonra gelen bölüm bizim alt tarafta bulanacak açıklama metinlerimizden oluşur. Bu metin alanına isterseniz bir form alanı bile girebilirsiniz. Bu tamamen sizin HTML kodlama mantığınız ile çalışmaktadır. Ben bir kaç örnek oluşturdum, sizler devam ettirebilirsiniz;

<ul id="test">
<li><img src="resimler/1.gif"  /><span><h4>Cufon Baslik</h4><p>Burası da yazı alanı</p> </span></li>
<li><img src="resimler/resim2.jpg"  /><span>Yazı Alanı 2 <a href="#">Link Gelebilir </a> ya da <input type="button" value='Buton =)' /></span></li>
<li><img src="resimler/resim3.jpg"  /><span>Yazı alanı 3</span></li>
<li><img src="resimler/resim4.jpg"  /><span>Yazı alanı 4</span></li>
<li><img src="resimler/resim5.jpg"  /><span>Yazı alanı 5 </span></li>
<li><img src="resimler/resim6.jpg"  /><span>Yazı alanı 6 </span></li>

</ul>

jQuery Dosyası – jquery.Zingoslide.js

Slayt içerisinde kullanabileceğimiz alan farklılıklarından dolayı, işi uzatmak istemedim. Kullanabileceğim bir slayt scriptini alarak biraz güzellik kattım. Daha sonra Zingoslide adında bir fonksiyona kendi değerlerimi atadım. Bu atama sırası işleminde, jQuery anonim fonksiyonlardan yararlandım. Tekrar açıklamam gerekirse, jQuery Dosyasının içerisindeki tüm kodlar bana ait değildir. Başka slayt kodlarını alarak değiştirdim.

Bunu jquery.Zingoslide.js dosyasına bakarak inceleyebilirsiniz.

CSS dosyası – Zingoslide.css

CSS dosyasını eğer incelediyseniz farketmiş olmalısınız ki Zingoslide adında bir sınıfı sürekli kullanmışız. Fakat index.html dosyasında böyle bir sınıf bulunmamakta.Bunun sebebi ise jQuery dosyasında oluşturmuş olduğumuz fonksiyonlara etki etmek istediğim için.

ilk olarak padding ayarları, liste şeklini ve resimlerin pozisyonlarını belirlemek için varsayılan , basic kodları kullandım;

.Zingoslide { padding:0px;  position:relative; z-index:100; overflow:hidden;}
.Zingoslide ul{ list-style:none;padding:0px;margin:0px; position:relative;   }
.Zingoslide ul li { position:absolute; display:block; width:100%;}
.Zingoslide ul li  img { position:relative; z-index:1; }

Bunun dışında bir de, index.html içerisinde yer alan, kontrol paneline css özellikleri kattım;

.kontrols { margin-top:45px;  position:absolute; background: url('i/kontrol.png') no-repeat; display:block; width:202px; height:42px; padding-left:5px; }
.kontrols li {   position:relative; float:left; margin:12px 5px 5px 5px; display:block; width:17px; height:15px;  background: url('i/normal.png') no-repeat; text-indent:-9999px; cursor:pointer;}
.kontrol_active {   background: url('i/aktif.png') no-repeat!important;height:20px!important; margin-top:9px!important;  }
.kontrol_hover {  background: url('i/aktif.png') top no-repeat!important; height:20px!important;margin-top:9px!important; }

En çok sıkıntı çektiğim konu, CSS dosyasını ayarlamakta oldu. Ne kadar ders vermeye çalışıp, çok bilir gibi göründüğümü düşüneneler olsa da, CSS konusunda henüz öğrenmem gereken çok şey olduğuna inanıyorum. Benim burada verdiğim dersler ya da açtığım konular sadece bildiklerimi paylaşarak ve öğreterek hem daha çok aklımda kalmasını sağlamak hem de türk tasarımcılara yardımım dokunmasından başka hiçbir şey değildir.