"Çalışmadan, öğrenmeden, yorulmadan rahat yaşamanın yollarını aramayı alışkanlık haline getirmiş milletler, evvela haysiyetlerini, sonra hürriyetlerini ve daha sonra da istikballerini kaybetmeye mahkumdurlar."

Mustafa Kemal ATATÜRK

yakuter


09 Eylül 2006

Işık Kutusu (Lightbox) Nedir?

Kategori Ajax, Web |

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

Duz Metin
<script type="text/javascript" xsrc="<?php bloginfo('template_directory'); ?>/js/prototype.js"></script>
<script type="text/javascript" xsrc="<?php bloginfo('template_directory'); ?>/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" xsrc="<?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

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

böyle yapın

Duz Metin
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:

Duz Metin
<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

Duz Metin
<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.


Benzer Yazılar

“Işık Kutusu (Lightbox) Nedir?” için 8 Yorum


Yorum Yapın

yakuter.com © 2006-2008 Erhan Yakut. Tasarım Fallendesign.
Site içerisindeki içerikler izinsiz veya kaynak gösterilmeksizin kopyalanamaz, alıntı yapılamaz.

Wordpress Valid XHTML 1.0 Valid CSS