21 Ekim 2007 - 2:30 jQuery: jqGalScroll 2.0 ile kullanışlı bir Foto Galerisi yapmak

Demo jQuery: jqGalScroll 2.0

Bir jQuery çılgınlığıdır devam ediyor. Bugün uzun zamandır takip edemediğim Xyberneticos sitesinde karşılaştığım bu jQuery ile geliştirilmiş jqGalScroll 2.0 galeri eklentisi, benzerine Haber sitelerinde rastlayabileceğimiz türden birşey. Eklenti, Resim üzerine açıklama ekleyip Resim altında Resimleri sayfalama ile listelemeye yarıyor. Ve tüm bunları yaparken sayfa yenilenmiyor yani ayni sayfada bir çok resimi açıklamalı görüntüleyebiliyorsunuz. Eklentinin öne çıkan diğer bir özelliği ise kullanımının son derece basit olması. Aşağıda kullanımını detaylı bir şekilde anlatmaya çalışacağım.

Demo

Kullanım Aşamaları:

1- Şuradan galeri dosyalarını indirin.

2- “<head>” kodu üstüne aşağıdaki Javascript ve Stil kodlarını çalıştıracak kod yapısını ekleyin.

<script type="text/javascript" src="ds/jquery-latest.pack.js"></script>
<script type="text/javascript" src="ds/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="ds/jqGalScroll.js"></script>
<style type="text/css" media="screen">
@import url(ds/stil.css);
</style>
<script type="text/javascript">
$(document).ready(function(){
$("ul.jqGalScroll").jqGalScroll({height:334,width:500,ease:’easeInOutCubic’,speed:1000});
});
</script>

3. Aşağıdaki kodları Galeriyi çalışır hale getirmek için kullanacaksınız. Yani liste fonksiyonlarını kullanacaksınız. “img” kodu içindeki “alt” kısmına ise Resim/Fotoğraf için ilgili açıklamayı ekleyebilirsiniz. Eğer açıklama (”alt”) kısmını boş bırakırsanız, İlgili resim üzerinde açıklama arkaplanı görünmez ve kirli görünmez.

<ul class="jqGalScroll">
<li><img src="resimler/resim1.jpg" alt="Ankara’dan bir manzara" /></li>
<li><img src="resimler/resim2.jpg" alt="Mutlu Güvercinler" /></li>
<li><img src="resimler/resim3.jpg" alt="Bir okul" /></li>
</ul>

Gerekli olabilecek bilgiler:

- Galeride Kullanacağınız Resimler aynı çözünürlüklerde olmalı. Yoksa taşmalara sebep olabilir.
- “$("ul.jqGalScroll").jqGalScroll({height:334,width:500,ease:’easeInOutCubic’,speed:1000});” kodu içerisindeki height resimlerin yüksekliğini, width ise uzunluğunu belirler.


3 Yorum var | Etiketler: CSS, Foto Galerisi, Fotoğraf, Javascript, Resim, Stil, jQuery

yorumlar

  1. Baris Unver
    21 Eki 2007 - 12:07

    Muhtelif Tecrübeler Silsilesi bölümümdeki yazılarıma, tecrübeler sırasında çektiğim fotoğrafları da koyacaktım, çok iyi oldu bu :) Çok teşekkürler.

  2. Yaşar Kara
    31 Oca 2008 - 10:27

    Burda resimlere link verebiliyor muyuz ?

  3. ali
    02 Haz 2008 - 17:53

    ya kardeş yaptım olmadı dağa dorusu yapaadım galiba:s

Bu yazıyı yorumsuz bırakma, haydi Sen de görüşlerini yaz




yorum

Yorum yazmadan önce lütfen okuyun (kaynak: phpBB Türkiye - Simuzer)

  • 1- N-ok...tala,!!ma +işar:etlerine "dik"(kat ed?in.
  • 2- BüYük hARf kÜçüK haRf OlayıNI atlAMAyın.
  • 3- Bu "Dolar" i$areti de size i$ çıkarmasın artık.
  • 4- Veenönemlisisözcükler arasındaboşlukbırakın.
  • 5- A ma g erek siz bo şluk lar d an k açının.
  • 6- Gösterin özen cümleleri kullanmamaya devrik.
  • 7- Sözcüklari anlaşılur vea dorğu yazen.
  • 8- Bu güzelim Türkçemize foreign wordlar katmayın.
  • 9- In keys yu rayt Ingilis vords, it hez to bi andirsitendibil.
  • 10- Türkçe’deki spesifik kelimeleri İRDELEMEYİN.
  • 11- Narin maillerinizi naciz kibarlığınızla süslemeyiniz efenim.
  • 12- Benim Türkçem mükemmeldir, NARSIST şeyler yazarsanız hemen anlarım.
  • 13- Yazılarınızda kibar olun, meydan okumayın, yoksa sizi harcarım.
  • 14- DiĞer yandan, TÜrkÇe karakter iŞinize geliyorsa yazIp gÖnderin.
  • 15- Yazdığınızı yarım bırakmamaya lütfen özen gös...

ilgili yazılar