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.
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.
4 Yorum var | Etiketler: CSS, Foto Galerisi, Fotoğraf, Javascript, Resim, Stil, jQuery
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.
31 Oca 2008 - 10:27
Burda resimlere link verebiliyor muyuz ?
02 Haz 2008 - 17:53
ya kardeş yaptım olmadı dağa dorusu yapaadım galiba:s
01 Ara 2008 - 11:17
Hocam, peki bu galeriye önceki ve sonraki buttonlari nasil koyabiliriz?