-- Web Yazılım & Tasarım

Sitenize – Web Albümünüze güzel bir önizleme eklentisi: LightBox ve Kurulumu

Sıkça web sitelerinde görmeye başladığımız güzel bir önizleme eklentisinden bahsetmek istiyorum. LightBox adındaki bu eklenti isim olarak çok bilinmese de aşağıda örneklerini gördüğünüzde en az bir defa kullandığınızı hatırlayacaksınız.

Nerelerde Kullanılır : Bu önizleme eklentisi sayesinde Thumbnail resimlerin linklerini yeni bir pencerede açmak yerine aynı pencerede açıyorsunuz. Thumbnail bilmeyenler için, tıklandığımızda resmin orjinalini ( büyük halini ) görmemizi sağlayan minik grafiklerdir. En basit örneğini Google Görseller‘de bulabilirsiniz.  LightBox resmi sitesinde örnekleri denemek için şu bağlantıyı kullanabilirsiniz : Buradan

Nasıl Çalışır, Nasıl Kurulur : Önizleme gerektirecek resimlerinizi içeren web sayfalarınız var ve bu eklentiyi kullanmak istiyorsanız kısaca eklentiden ve kurulumundan bahsedelim. Bahsedeceğim versiyonu LightBox 2, eskisinden farkları şöyle. (Bu arada eklenti tamamen ücretsiz 🙂 )

Yeni versiyonunda Resim Setleri ( Albümler ) oluşturabiliyorsunuz. Bu size kullanıyorsanız Facebook’dan tanıdık gelecek. Resme tıkladığınızda bir sonraki resme otomatik olarak geçebiliyor.

Diğer yeni gelen bir özellik de açılan resmin boyutlarına göre animasyonla açılması. Son olarak yeni versiyonun geriye dönük uyumluluğu da söz konusu.

LigthBox 2 Prototype Framework ve Scriptaculous Effects Kütüphanesini kullanmakta. Bunları nasıl koda dahil edeceğimizi aşağıda anlatıyorum.

KURULUM : İlk olarak şu Sayfadan veya direkt olarak şu Bağlantıdan Kütüphaneleri ve Gerekli Görselleri indirelim.

Şimdi ilk olarak resimlerimizin bulunduğu sayfanın Header kısmına şu kodları ekliyoruz. Bu kodlar kullanılan kütüphaneleri sayfanıza dahil ( include ) edecektir.

<script type="text/javascript" src="js/prototype.js"></script>

<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>

<script type="text/javascript" src="js/lightbox.js"></script>

Ardından CSS dosyasını da sayfaya dahil ediyoruz. Veya hazır CSS dosyanız varsa , lightbox.css dosyasının içeriğini ona ekleyerek de kullanabilirsiniz.


<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Dikkat :  Prev.gif , Next.gif, Loading.gif , Close.gif görsellerinin   Lightbox.css içerisinde belirtilen yolda ( eklenecek sayfa ile aynı dizinde ) olduklarına emin olunuz.

KULLANIM:

Kurulum aşaması bu kadardı. Şimdi bu önizlemeyi kullanacağınız görseller için eklediğiniz bağlantılara  rel =”lightbox” ifadesini ekleyerek kullanabilirsiniz. Örnekler şöyle :

<a href="images/image-1.jpg" rel="lightbox" title="aciklama">Bağlantı Metni</a>

Thumbnail ile gösterim için:

<a href="<a href="view-source:http://www.huddletogether.com/projects/lightbox2/images/image-1.jpg">images/image-1.jpg</a>" rel="lightbox"><img src="<a href="view-source:http://www.huddletogether.com/projects/lightbox2/images/thumb-1.jpg">images/thumb-1.jpg</a>" width="100" height="40" alt="" /></a>

Bu örnekler tek parça resim içindi , eğer bir albüm oluşturmuş iseniz şu örneği kullanabilirsiniz. Burada albüm adı roadtrip olarak seçilmiş.

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>

<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>

<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Bu yöntemle sınırsız sayıda görsel içeren albümler oluşturabilirsiniz.

Bu yaptıklarımız işin arkaplanını bilenler veya o tarafta çalışmayı tercih edenler içindi. Ama JavaScript ve HTML ile pek aram yok diyorsanız tam size göre ücretsiz bir program da yok değil. Aşağıda bağlantısını bulabileceğiniz program sizin için sayfayı oluşturuyor. Sizin tek yapmanız gereken fotoğrafları seçip efektleri belirlemek. Buradan inceleyebilir ve indirebilirsiniz. İyi çalışmalar dilerim.

Bu yazı Ersin YILDIZ tarafından hazırlanmıştır. Kullandığınız takdirde lütfen en azından kaynak belirtin.

Teşekkürler

Yorumla

Yorum

  1. bunu kullanmayan site yok :)) arkadas herkez mi hazır alır ..kimse oturupta javascriptle bunu yazmak için uğrasmıyor ersin.. 😀 hazır yapılmış zaten

  2. Evet, wordpress eklentisinin yanında buna yönelik albümler oluşturan çok sayıda yardımcı program da mevcut 🙂 Bilmek isteyene arkaplanını da anlatmış olalım diye yazdım.

  3. Müthiş bilgiler…teşekkürler.

    Bir çok lightbox uygulaması inceledim…yeni öğreinyorum.

    Derdimi anlatabilecek miyim bilmiyorum ama…

    …bir çok örnek kod/script indirdim.

    İçinden çıkamadığım konu, hepsinin index sayfasında bir yere CLICK ediyorsun, kod çalışıyor. Bu scriptleri ONLICK yerine ONLOAD haline getirmenin bir yolu yok mudur.

    Yani index sayfasını açınca kod çalışsın…

    …bunu pratik olarak yapmak mumkun mu…nasıl yapabilirim.

    Selamlar, teşekkürler.