Galleria – JQuery Resim Galerisi

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

En son Jquery dağıtımını indirin.
Galleria Plugin‘i ve CSS dosyasını indirin.
Aşağıdaki kodları html dökümanınızdaki <head> in altına yazınız.

<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.