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

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.

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

yorumlar

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.