DincerDegre » resim galeri eklenti http://www.dincerdegre.com/weblog Bir başka WordPress blogu. Sun, 29 Aug 2010 15:53:03 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Galleria – JQuery Resim Galerisi http://www.dincerdegre.com/weblog/yazi/galleria-jquery-resim-galerisi/ http://www.dincerdegre.com/weblog/yazi/galleria-jquery-resim-galerisi/#comments Sun, 19 Jul 2009 23:25:16 +0000 Dincer http://www.dincerdegre.com/weblog/?p=152 Internet üzerinden çektiğiniz veya kendi fotoğraflarınızı yayınlamak istiyorsanız ve galerinizinde güzel görünmesini istiyorsanız iki seçeneğiniz var. Bunlardan biri Flash Galeri Script’i bulmak.

Diğer seçenek ise AJAX yardımıyla bir Resim Galerisi Script’i bulmak. Bu devrede karşımıza JQuery ile oluşturulmuş Galleria resim galerisi Plugin’i çıkıyor.

JQuery, AJAX diye bilinen Javascript Framework’leri içinde adını duyurmuş iyi bir Framework, Galleria’da bu Framework ile yazılmış iyi ve sade bir eklenti. Galleria’yı kullanarak oldukça esnek ve istediğimiz şekilde bir resim galerisine sahip olabiliriz. Gerekli ayarları yaptığımızda ve eklentiyi tanıdıkça nasıl çalıştığını da daha iyi anlayacağız.

jquery-gallery

Eklenti, Büyük resim yüklendiğinde küçük halini bize gösteriyor. Preload yapısı ile oldukça hızlı yükleniyor. Galleria’da her küçük resme tıkladığımızda ilgili fotoğrafın büyük halini görüyoruz. Galleria eklentisini daha iyi anlamak için ilk önce özelliklerine bir gözatmakta fayda var.

Galleria’nın Özellikleri

  • Sade olarak yazılmış Javascript
  • Tarayıcı özelliklerine göre ayarlanan yapı
  • Dosya boyutu ufaklığı
  • Gerçek imaj yüklendiğinde gösterilen küçük imaj kopyası
  • CSS’le oynayarak Galeriyi kendine göre düzenleme
  • Hızlı resim yükleme
  • Resme bir isim ve açıklama atayabilme
  • Tarayıcı uyumluluğu

Galleria neye benzer?

Eklentiyi hazırlayanlar sistemin nasıl işlediğini şeklen görmemiz için iki demosunu vermişler. Bunlardan ilki siyah zemin üstüne bir yapıda bulunuyor. Demo 01′i görmek için tıklayınız. Diğeri ise beyaz zemin üzerine ve alt yerine solda küçük resimlerin bulunduğu bir yapıda bulunuyor. Demo 02′yi görmek için tıklayınız. Bunlar eklentinin yapabildiklerini gösteren demolar, CSS dosyaları ile oynayarak kendi yapımızı da oluşturabiliriz. Bu eklenti üzerindeki amatörlüğümüzü attıktan sonra yapacağımız iş olacak.

galleria

Kurulum

<link href="galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.galleria.js"></script>
<script type="text/javascript">
jQuery(function($) { $('ul.gallery').galleria(); });
</script>
  • Sırasız şekilde bir resim listesi oluşturun ve buna bir tanımlayıcı atayın (Ben class=’gallery’ kullandım)
  • CSS dosyası ile oynayarak galerinizin şeklini oluşturun.

Bu şekilde baktığınızda çok karışık gelebilir. Bence Demo’ların kod yapısını inceleyerek bu olayı çözmek en iyi ve en kolay yol olacaktır. Genelde benim yaptığımda bu oluyor. Böylece eklentiye daha hakim olunuyor.

Bu kadar mı? Başka kaynak yok mu?

Galleria ile ilgili daha fazla bilgiyi elbetteki eklentiyi oluşturan verecektir. Bunun için bir parça ingilizce gerekiyor olsa da, ben size güveniyorum ve biliyorum ki kodu ve sistemi orjinal kaynaktanda çözebilirsiniz. Galleria hakkında daha fazla bilgi almak için http://devkick.com/lab/galleria/ a gitmeniz gerekiyor. Sağlıcakla Kalın.

]]> http://www.dincerdegre.com/weblog/yazi/galleria-jquery-resim-galerisi/feed/ 0