Kullanışlı bir jQuery Slide Eklentisi

Merhaba arkadaşlar daha önceki yazı dizimize devam ediyoruz bu gün sizlere geçenlerde karşılaştığm innerfade{} isimli harika ve bi o kadar da kolay bir kullanıma sahip slide eklentisinden bahsetmek istiyorum zaman zaman jQuery sitesine girip orda kendime çalıştığım projeye uygun eklenti bulup kullanıyorum o yüzden sizde arada bir jQuery sitesine uğramayı unutmayın.Biz konumuza devam edelim. innerfade eklentisi ile istediğiniz her objeyi slide olarak gösterebilirsiniz. Yani sadece resimleri değil aynı şekilde yazıları da slide olarak gösterebilirsiniz. Bununla ilgili bir yazıyı daha önce blogumda yazmıştım. Farklı bir örnek olması açısından onuda burdan okuyabilirsiniz.

Şimdi ilk olarak innerfade eklentisini indiriyoruz adresi vereyim size gerçi tüm dosyaları hazır bir şkeilde indirme fırsatı vereceğim ama aşama aşama yapıp öğrenmek istiyorsanız ilk önce indirmelisiniz. Burdan eklentiyi indirebilirsiniz.

Bundan sonraki aşamamız jQuery dosyalarını html dosyamıza bağlamak. İki dosya bağlayacağız. Bunlardan biri jQuery dosyası diğeri de eklenti dosyası. Aşağıdaki şekilde bağlayabilirsiniz.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>

İkinci aşamamız Html kodunu gireceğiz klasik liste oluşturur gibi yapacağız bunu

<ul id="resim">
   <li>
	<a href="#"><img src="resimler/resim1.gif" alt="" /></a>
   </li>
   <li>
	<a href="#"><img src="resimler/resim2.gif" alt="" /></a>
   </li>
   <li>
	<a href="#"><img src="resimler/resim3.jpg" alt="" /></a>
   </li>
   <li>
	<a href="#"><img src="resimler/resim4.jpg" alt="" /></a>
    </li>
    <li>
	<a href="#"><img src="resimler/resim5.jpg" alt="" /></a>
    </li>
</ul>

Üçüncü aşamamız css dosyamız olacak burda eklemeyi unutmamanız gereken kod ol,ul {list-style:none;} olacak eğer ol, ul tagına hayır demezsek resimlerin kenarına liste önlerine gelen işaretler gelecektir.

ol,ul {list-style:none;}

img {
	border: none;
}

div.alan {
	text-align: left;
	width: 80%;
	max-width: 69.23em;
	padding: 1.2em 1.5em;

	margin-left: auto;
	margin-right: auto;
}

ul#yeni {
	border: 4px solid #333;
	padding: 0em;
	background:  #333333;
}

ul#resim li img{
	border: 3px solid #333333;
	padding: 0px;
}

Son aşamamız css ile düzenlediğimiz slide resimleri ile ilgili seçiciyi innerfade koduna ekleyeceğiz ve düzenlemeler yapacağız.

$(document).ready(
				function(){
					$('ul#resim').innerfade({
						speed: 1000,
						timeout: 3000,
						type: 'random',
						containerheight: '220px'
					});
			});

Şimdi yukarıdaki kodu biraz açalım daha doğrusu zaten tüm fonksiyonlar anlaşılı ancak değinmek istediğim bir nokta var o da slide tipi yukarıdaki fonksiyonda type komutunun karşısına “random” eklenmiş eğer resimleri karışık değil de sıra ile almak istiyor iseniz “sequence” komutu ile değiştirmeniz yeterli olacaktır.
Slide resmimiz bu kadar test etmek ve indirmek için aşağıdaki bağlantıları kullanın. Eğer sorunuz varsa sorabilirsiniz.

Demo | İndir

Şifre: sorbize.com

6 Yorum

  1. admin 08 Eylül 2010
  2. Serkan 08 Eylül 2010
  3. Fırat Göksel 09 Eylül 2010
  4. edurup 09 Eylül 2010
  5. Seo 14 Eylül 2010
  6. Eskişehir 18 Kasım 2010

Yorum Yaz