sliderShowTR

bitlimakina tarafından 18 Nisan 2009 | 4 Yorum | JQuery

JQuery çalışmalarıma bir yenisini daha ekledim “slideShowTr”. SlideShow adında JQuery ile yapılmış bir benzeri kod yazarken çok işime yaradı. Peki farkı ne resimleri yalnızca bir div tagı içine yazmanız yeterli oluyor gerisini kendisi hallediyor. Başka resimleri ve slayt alanını isteğe bağlı olarak boyutlandırabiliyorsunuz. Daha ne olsun
Örnek uygulama için buraya tıkla..

Öncelikle HTML dosyamıza bakalım.

Html dosyamız içersinde slideShowTR sınıfına sahip bir div içersinde resimleri tanımladık. rel etiketine dikkat edin bu bölümde resimle ilgili bir başlık ve resimin açıklaması yapılmış durumda. WordPress kullananlar bunu resim yüklerken yazabilirler.

Şimdi slideShowTR css dosyasına göz gezdirelim.

.slideShowTR img {border:none;}
.slideShowTR ul,.slideShowTR  li {
	list-style-type:none;
	text-decoration:none;
}
.slideShowTR{
	position:relative;
	width:448px;
	height:336px;
	overflow:hidden;
	background-color:#CCC;
	border: #000 10px solid;
}
.slideShowTR  ul.imageList {
	position:relative;
}
.slideShowTR  ul.imageList li {
	position:absolute;
	float:left;
}
.slideShowTR .show {
	z-index:999;
}
.slideShowTR div.baslik{
	position:absolute;
	background-color: #000;
	width:448px;
	height:1px;
	display:block;
	z-index:1000;
	bottom:0px;
	color:#FFF;
	text-indent:10px;
}
.slideShowTR div.baslik h3{
	color:#dfdf0a;
}

Son olarak JQUERY kodları burda

/*
 * JavaScript slideShowTR
 * Copyright (c) 2009 Yücel YILMAZ (bitlimakina.com)
 * Licensed GNU General Public License.
 */
$(document).ready(function(){
	//Slide alınının büyüklük değerlerini girerek slideShowTR fonkisyonunu çağırdık.
	slideShowTR(640,480);

});
 function slideShowTR(WSize,HSize) {
	//Çerçeve boyutlarnı yeni değerlere göre değiştirdik.
	$(".slideShowTR").css({width:WSize,height:HSize});
	// Tüm resim dosyalarını li etiketleri arasına aldık.
	$(".slideShowTR img").wrap(document.createElement("li"));
	// Resimlerin genişlik değerini Slide genişliğine göre güncelledik.
       ......
       ......
}

Uzun olduğu için yukarıda bütün JS kodunu vermedim.İsteyenler indirdikten sonra inceler. Her satırın üstünde açıklamasına dilim döndüğünce yer vermeye çalıştım. Umarım olmuştur.
İlgilenenler kodları satır satır inceleyebilir ancak şimdi ben kodlarla ilgilenmeden nasıl kullanacağız onu anlatayım.

İlk olarak buradan slideshowtr gerekli dosyaları indirin.
Hem WordPress kullanıcıları hemde HTML sayfalarında kullanacak olanlar öncelikle aşağıdaki tanımlama satırlarını kendi sayfalarına eklemeli ve stil dosyası ile slideShowTr.js dosyalarının konumunu doğru olarak yazdığından emin olmalılar.

Sayfanın başında verdiğim HTML sayfasında da görüleceği gibi slide şeklinde göstermek isteğiniz resimleri class=”slideShowTR” olan bir div etiketi içersinde yazmalılar. rel etiketi wordpress kullananlar için problem olmuyacaktır. Eğer resim yüklerken yazarsanız büyük rahatlık olucaktır.

Yapacak başkada bir şey yok. Örnek uygulama için buraya tıkla..

Eğer slideShowTR boyutlarını değiştirmek isterseniz. JS dosyasında slideShowTR(640,480) satırındaki rakamları değiştirmeniz yeterli.

Umarım beğenenler olur, yorum yazarsanız sevinirim.