Kendi hazırladığını web sitelerinde resimleri Lightbox şeklinde göstermek ister misiniz? Bence herkes bu Lighbox nimetinden faydalanmalı ve faydalanacaktırda. Önceden sizlerle paylaştığım buradaki yazı ile sadece WordPress içerisindeki bütün resimlerinizin gösterilmesi için sorunsuz çalışan bir Lightbox’dan bahsetmiştim. Şimdi ise tamamen kendi hazırladığımı web siteleri için Lighbox’u nasıl kullanabiliriz bundan bahsedeceğim.

Buradaki arkadaş yapmış bu Lighbox’ı. Lighbox ve Lighbox 2 olmak üzere 2 farklı versiyonu var. Ben sizlere 2. ve yeni versiyonu olan Lighbox’dan bahsedeceğim. İlk önce gerekli bütün dosyaları buraya tıklayarak indirin.

İndiriğiniz dosyayı .rar dan çıkartın. Klasör içi aşağıdaki resimdeki gibi olacak.

index.html sayfası içerisinde ingilizce olarak yapmanız gereken herşey anlatılıyor. Bende size Türkçe olarak anlatacağım nasıl yapıldığını.

images klasörü içerisine bütün resimlerimizi ekliyoruz. Yeni bir html sayfası oluşturun. Adı deneme.html olsun. deneme.html içerisinde göstereceğimiz bütün resimler images klasörü içerisinde olmalı. Resimlerimizin büyük hallerini ekledik varsayıyorum. Şimdi deneme.html sayfasını Drewmweaver ya da bir not defteri yardımı ile açalım.

deneme.html sayfasındaki </title> (tam buraya) </head> tagları arasındaki tam buraya yazdığım yere;

<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />
<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>

kodlarını ekleyin. Bu kodlar sizin Lighbox’ınızın çalışması için gerekli CSS ve JS dosyalarını deneme.html içerisine çekmenizi sağlıyor.

Sayfamıza resimlerimizi eklemeye başlayalım. Aşağıdaki kod satırları ile resimlerinizi ekleyin.

1-   <a href=”images/image-1.jpg” rel=”lightbox” title=”my caption”>image #1</a>

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

Yukarı kodsatırları ile resimlerinizi ekleyebilirsiniz. Tek bir resim için 1. kod satırını kullanın. Eğer 1 den fazla resim ile Lighbox yapcam diyorsanız 2. kod satırı sizin için uygun.  2. kod satırını çoğaltarak resimlerinizi ekleyin. Lichbox çalıştırıldığında ileri geri şeklinde görüntülecek resimleriniz.

Yapmanız gerekenler sadece bunlar. Lighbox’ın kendi orjinal sitesi burası. Önizleme isterseniz buradan buyrun.

RenkliTeneke.Com blogundaki yeni yazılardan haberdar olmak için RSS Abonesi olabilirsiniz. İsterseniz Twitter'dan ya da FriendFeed'den takip edebilirsiniz. Ya da "Yeni yazılar e-mail adresime gelsin" diyorsanız e-mail abonesi olabilirsiniz.

Merhaba sevgili ziyaretçi. Şuanda renkliteneke.com bloguna " Ahmet" tarafından " 8 Ekim 2008" tarihinde yazılmış olan "Web Siteniz İçin Lightbox Uygulaması" başlıklı bu yazıyı okuyorsun. Bu yazının başka bir yerde yayınlaması yasaktır. Her yazı ayrı bir özen içerisinde hazırlanıyor ve bu emeğin iki tık ile heba edilmesi pek hoşuma gitmez. Bu açıklama ise bilgilenmeniz için yazılmıştır.