JQuery kütüphanesi “jquery.mb.bgndGallery” ye DeliPenguen güncellemesi

18 Şubat 2012
Bu yazıyı beğendiysen paylaşmayı unutma :)
Pin It

jquery.mb.bgndGallery

Pek çok kullanışlı ve başarılı JQuery kütüphanesine imza atmış olan Matteo Bicocchi tarafından yazılmış olan mb.bgndGallery eklentisini bir arkadaşımın ricası üzerinde onun istekleri doğrultusunda güncelledim. Bu kütüphaneyi kullanan ve aynı ihtiyacı duyanlar, kütüphane içerisinde yaptığım değişiklikleri yazının içerisinde okuyabilir ve indirebilirler.

JQuery.mb.bgndGallery kütüphanesi, sitenizin arkaplanında ya da Div gibi bir elementin içerisinde foto galeri oluşturma imkanı sağlıyor. Üstelik ekran ölçülerinine göre de bunu otomatik olarak ayarlayıp gerçekleştiriyor. Aynı zamanda hem üzerinde bulunan kontrol butonlarıyla hem de bilgisayarınızın yön tuşları aracılığıyla da geleriyi kontrol edebiliyorsunuz. Bu tarz bir uygulamaya ihtiyaç duyanlar için oldukça kullanışlı bir kütüphane.

Eklentinin çalışmasını görmek için yapımcının web sitesini ziyaret edebilirsiniz.

Ancak bu kütüphanede gösterilen resimlerde maalesef link bulunmuyor. Arkadaşımın da talebi, gösterimi yapılan resimlere link verilmesi ve ilgili sayfaya gitmesini sağlamaktı.

Şimdi gelelim bunu nasıl gerçekleştireceğimize.. Öncelikle bu yapılacak değişikliklerin JQuery.mb.bgndGallery kütüphanesinin 1.1 sürümü için yapılacağını belirtelim.

Gelelim ilk işlemimize..

İstiyorum ki kütüphanenin sayfam içerisindeki tanımlama bölümünde kullanacağım imajları listelediğim gibi linklerini de aynı şekilde tanımlayıp kullanabileyim.

images:[
“zeminGaleri/1.jpg”,
“zeminGaleri/2.jpg”,
“zeminGaleri/3.jpg”,
“zeminGaleri/4.jpg”,
“zeminGaleri/5.jpg”,
“zeminGaleri/6.jpg”
],

imageLink:[
“test1.htm”,
“test2.htm”,
“test3.htm”,
“test4.htm”,
“test5.htm”,
“test6.htm”
],

Burayı “imageLink” adıyla tanımladıktan sonra şimdi asıl değişikliği yapacağımız kütüphaneye göz atalım.

Adım-1: Yapacağımız ilk değişiklik, sayfa içerisinde gönderdiğimiz değerleri kullanabilmesi için kütüphanenin varsayılan değerlerinin tanımlandığı alana aynı isimde bir dizi tanımlamak olacak. Bunun için kod içerisine aşağıdaki tanımı yapıyorum.

imageLink:[]

Artık sayfa içerisinde tanımladığım linklerime bu değişken sayesinde kolaylıkla ulaşabilirim.

Adım-2: Bu adımda resminin bulunduğu alanın kapsayıcısının içerisine boş bir link etiketi eklemem gerekiyor. Bunun için de kütüphanenin kullanmış olduğu ve galerinin genel ayarlarının tanımlandığı “buildGallery” fonksiyonunun içerisine aşağıdaki kodu ekliyorum.

if (el.opt.imageLink)
{
var test = “<a href=\”\”></a>”;
opt.gallery.append(test);
}
$(opt.gallery).find(“a”).attr({href:el.opt.imageLink[0]})

Tabi bunu yaparken galerinin ilk resminin linkini de vermeyi unutmuyoruz.

Adım-3: Bu adıma kadar yaptığımız işlemler tanımlamalar, galerinin ilk açılışı ve başlangıç linkinin verilmesinden ibaretti. Bu adımla birlikte resmimiz her değiştiğinde ilgili linki alıp yeni gelen resme vermemiz gerekiyor. Bunun için kütüphanenin resim değişim işlemlerini kontrol eden “changePhoto” fonksiyonu içerisine aşağıdaki kodu ekliyoruz.

$(“#bgndGallery_”+el.opt.galleryID).find(“a”).attr({href:el.opt.imageLink[el.opt.imageCounter]})
$(“#bgndGallery_”+el.opt.galleryID).find(“a”).append(image);

Buradaki işlemimiz de oldukça basit. İlk satırda önce galeri içerisindeki ilgili linki “find” metoduyla bulup, linkin “href” parametresine yeni linki veriyoruz. İkinci satırda ise yeni resmi bu linkin içerisine “append” metoduyla ekliyoruz.

İşlemlerimizi burada tamamladıktan sonra kontrol ettiğimizde linklerimizin çalışmadığını görüyoruz. Bunun içinde son bir adımı uygulamamız gerekiyor.

Adım-4: İkinci adımda kullandığımız “buildGallery” fonksiyonuna geridönüyoruz ve sarmalayıcının (wrapper) CSS’inin tanımlandığı kodu,

var wrapper=$(“<div/>”).css({“position”:”absolute”,minHeight:”100%”, minWidth:”100%”, zIndex:3});

aşağıdaki kod ile değiştiriyoruz.

var wrapper=$(“<div/>”).css({“position”:”absolute”,minHeight:”100%”, minWidth:”100%”, zIndex:3});

Böylece sarmalayıcı yalnızca kontrol butonlarını kapsayacak ve resimlerimizdeki linki kolaylıkla kullanmamızı sağlayacak.

Kütüphanenin resim linkli sürümünü aşağıdaki linkten indirebilirsiniz.

Benzer Yazılar


DeliPenguen'i Google+'da bulun



Henüz yorum yok.