Kullanışlı bir jQuery Slide Eklentisi

Tarih: 8 Eylül 2010   Yazar: SO  |  2.867 kez okundu
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


    Bu yazı için 6 yorum yapılmış.
  1. Burak Dülgar dedi ki:

    Güzel bir derleme olmuş, teşekkürler Said :)

  2. Serkan dedi ki:

    Çok işime yarayacak bu teşekkürler…

  3. Fırat Göksel dedi ki:

    Hoş bir derleme olmuş teşekkür ederim

  4. edurup dedi ki:

    bu kadar kodu nasıl ezberliyosunuz valla anlamış değilim bende öğrenmek istiyorum ama bu kodları görünce ödüm kopuyor

  5. Seo dedi ki:

    Çok teşekkür ederim.

  6. Eskişehir dedi ki:

    çok teşekkürler hocam


Yorum yazmak istermisiniz?

Sorbize RSS Beslemesi    Sorbize E-Posta Aboneliği    Sorbize'yi Facebooktan Takip Edin    Sorbize'yi Twitter'dan Takip Edin    Abone

Yazılar E-Posta'na Gelsin:

Lazım Olabilir
  • Webmaster Portalı
  • Url Kısaltma Servisi
  • Sorbize.com bir çok kategoride güzel ve özgün makaleler okuyabileceğiniz güncel web 2.0 bir blogdur.
    © Tüm Hakları Saklıdır.
    Bu websitesi DMCA Protection ile lisanslanmıştır. Yazılar kaynak belirtilmeden kullanılamaz.