Linkleri görebilmek ve üye ayrıcalıklarından faydalanabilmek için ücretsiz kayıt olun.

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ıklayarakindirin.
İ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 buradanbuyrun.