Lightbox 2'yi bedava-sitem'e Uyarlama
Sayfa Ekleme Tarihi: 01.03.2014Herkese merhaba, bu gün sizlere Lightbox 2'yi bedava-sitem'de nasıl kullanabileceğinizi anlatacağım. Öncelikle bilmeyenler için Lightbox'un nasıl bir şey olduğuna değineceğim.
Lightbox kısaca, resimleri büyütmeye yarayan ve birçok site tarafından kullanılan Java yazılım dili ile yazılmış bir sistemdir. Resmi web adresine giderek nasıl bir şey olduğuna bakabilirsiniz: lokeshdhakar.com/projects/lightbox2/
Öncelikle Lightbox 2'yi indiriyoruz.
Ardından zaten resmi sitede anlatıldığı gibi adımları yapmaya başlıyoruz.
Adım 1: JavaScriptleri (JS'leri) ayarlayacağız. Sitede anlatıldığı gibi "script" taglı kodları sitemizin head kısmına yapıştırmamızı istiyor. Kodda " src="js/jquery-1.10.2.min.js" kısımlı bir yer var. Bu kod "js" klasörü altında "query-1.10.2.min.js" dosyasını açmayı sağlıyor fakat bedava-sitem hizmeti bize javascript yüklemeyi sağlamıyor. Bunun için de biz zaten "lokeshdakar.com"da bulunan bu js dosyalarının linklerini bulacağız. (Sitede lightbox örneği olduğu için bir js dosyası olduğu gerçeği bizi yanıltmaz) Ben kendim sitede linkleri bularak şu kodu elde ettim:
Fakat bu kodu sitenin head kısmına yapıştırmamız söyleniyor. Biz de bu durum için bedava-sitem'in "kendi head içeriği" ekstrasıyla hallediyoruz. Extrayı aktif edip içine kodu yapıştırıyoruz. İlk adım tamam!
Adım 2: Css kodlarını aktif edeceğiz. Burada indirdiğimiz zip devreye giriyor. zip dosyasının içinde css adlı klasörün içinde lightbox.css adlı dosyayı yeni metin belgesiyle açıyoruz. Açtıktan sonra içindeki herşeyi alıp sitenin tasarım ayarlarındaki css kodu kısmına yapıştırıyoruz. Bu adım daha bitmedi, tekrar buraya döneceğiz.
Adım 3: Resimleri yükleyeceğiz. zip dosyasının içinde img adlı klasördeki tüm resimleri yüklüyoruz. Resimleri olduğu gibi bedava-sitem'e yükledikten sonra 2. adıma devam ediyoruz.
Adım 2 (devam): Şimdi css kodunda ne kadar "../img/" kısmı varsa hepsinin yerini "https://img.webme.com/pic/o/**kullanıcı adınız (yıldızlar yok!)**/" şeklinde değiştiriyoruz. Böylece resimler görevlerini almış oluyor ve 2. ve 3. adımları bitiriyoruz.
Adım 4: Şimdi bu kadar şeyi nasıl kullanacağımıza geldi sıra. Resmi sitedeki kodlar işe yarayacaktır ben onlar üzerinden anlatımıma devam edeyim. "<a href="img/image-1.jpg" data-lightbox="image-1" title="My caption">image #1</a>" kodu link üzerinden resmi açmaktadır. Bunun yerine "image #1" yazan yere resim kodu koyara büyütüyormuş efekti verebilirsiniz.