Kısaca Lightbox yani Işık Kutusu budur.

Tabiki gördüğünüz resimdeki Ferrari’yi kastetmiyorum :D Resmin nasıl açıldığı önemli. Ekran kararıyor, resim tam olarak yüklenene kadar bir bekleme resimi (loading image) çıkıyor sahneye. Resim tam yüklendiğinde boyutuna göre beyaz zemin genişliyor ve resim gösteriliyor. Sanırım ne demek istediğimi anladınız. Şimdi bunu sitelerimize, dikkat edin sitelerimize diyorum sadece wordpresse değil, nasıl kurulduğunu göstereceğim. İnanın düşündüğünüzden daha basit ;)

KURULUM

İnternette bir kaç farklı ışık kutusu bulmanız mümkün. Ben sitemde kullandığımı ve en meşhur olanını anlatacağım.

• Lightbox JS v2.0 için gerekli dosyaları buradan indirin.
• İndireceğiniz paketin içinden css, images, js olmak üzere üç adet klasör çıkacak.
• css: Bu klasörde bir adet css dosyası bulunuyor. O dosyanın içini kopyalayıp temanızın style.css dosyasını açtıktan sonra en sonuna yapıştırın ve kaydedip çıkın.
• images: Bu klasördeki resimleri temanızın resimlerinin bulunduğu klasöre (genelde tamnızın içindeki images klasörüdür) kopyalayın.
• js : Bu klasörü olduğu gibi temanızın içine kopyalayın. Dosyaları değil direk klasörü kopyalayın. Yani dizin şöyle olmalı
  “siteniz/wp-content/themes/temanız/js”
• Dosyaları yerleştirdikten sonra ışık kutusunu temamıza entegre etmek kaldı.

Temanızın header.php dosyasını açın ve şu kodları ekleyin

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prototype.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/lightbox.js"></script>

Not: src’lerin başındaki x’leri silerek kullanınız.

Daha sonra js klasöründeki lightbox.js adlı dosyayı bir editör ile açın ve 62, 63′ncü satırlara temanızın resimler klasörünün adresini yazın. Yani satırlar böyleyken

62 - var fileLoadingImage = "images/loading.gif";
63 - var fileBottomNavCloseImage = "images/closelabel.gif"; 

böyle yapın

62 - var fileLoadingImage = "http://www.siteniz.com/wp-content/themes/temanız/images/loading.gif";
63 - var fileBottomNavCloseImage = "http://www.siteniz.com/wp-content/themes/temanız/images/closelabel.gif"; 

Kurulum tamamlanmıştır.

NASIL KULLANILIR?

Bundan sonra linklerinizin içine rel=”lightbox” yazarsanız resim örnekte gösterdiğim gibi açılacaktır.
Örnek:

<a xhref="resim.jpg" rel="lightbox" title="ferrari">Ferrari</a>

Not: xhref’in başındaki x’i silerek kullanın.

Eğer birkaç resmi gruplayarak(slayt gibi) görünmesini istiyorsanız şöyle bir kod kullanabilirsiniz

<a xhref="resim1.jpg" rel="lightbox[araba]">Ferrari 1</a>
<a xhref="resim2.jpg" rel="lightbox[araba]">Ferrari 2</a>
<a xhref="resim3.jpg" rel="lightbox[araba]">Ferrari 3</a>

Eğer kurulumu hatasız yaparsanız inanın sorun çıkmayacak ve çalışacaktır. Daha fazla bilgiyi resmi sitesinde bulabilirsiniz.