kod, wordpress, eklenti, web, teknoloji,
programlama, tasarım, ajax, linux, Pardus, blog
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
<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
63 - var fileBottomNavCloseImage = "images/closelabel.gif";
böyle yapın
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:
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="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.
“Işık Kutusu (Lightbox) Nedir?” için 10 Yorum
Yorum Yapın
yakuter.com © 2006-2008 Erhan Yakut. Site tasarım fallendesign.
Site içerisindeki içerikler izinsiz kopyalanamaz, alıntı yapılamaz.
1 henster
04 Eylül 2007, 11:26
merhaba, Söylediklerini aynen uygulamaya çalıştım ama,resimleri ekliyip üzerine tıkladığımda ekran kararıyor ve Loading resmi sürekli dönüyor ama resmi bir türlü açılmıyor.
Nasıl kullanılır kısmını biraz daha detaylı olarak anlatırmısın. Sanırım orda karıştırıyorum.
2 yakuter
04 Eylül 2007, 12:11
Bununla hiç uğraşma, bunun yerine wordpress için lightbox eklentisi yayınladılar, bence onu kullan :) Adresini bilmiyorum ama google saolsun, bulabilirsin ;)
3 Ersin ÖLMEZ
21 Ekim 2007, 03:04
eklenti güzel çalışıyor peki merak ettiğim bir soru var bu eklentide istediğimiz imajlara add=rel ekliyoruz hiç bunlarla uğraşmasak direk her eklenen resim rel tagını alsa olurmu hatta buna yönelik hangi yolu izlemeliyim ?
4 eburhan.com » LightBox JS ile web galerileri hazırlamak
18 Kasım 2007, 12:46
[...] açıkça anlatılmıştır. Bu işlemleri Türkçe olarak anlatan bir yazıya ise Erhan YAKUT’un Işık Kutusu (Lightbox) Nedir? başlıklı yazısından ulaşabilirsiniz. Bir LightBox JS [...]
5 LightBox JS ile web galerileri hazırlamak » By admin » galeri, javascript, js, lightbox, resim, web » Doomsday Offical Webpage
19 Kasım 2007, 04:37
[...] Bu işlemleri Türkçe olarak anlatan bir yazıya ise Erhan YAKUT’un Işık Kutusu (Lightbox) Nedir? başlıklı yazısından [...]
6 Erkan Karanfil
20 Kasım 2007, 01:49
Ben yaptığım denemede ne kadar doğru bilemiyorum ama resme tıkladığımda siyah ekran ortada resimde en altda çıkıyor..
7 LightBox JS, resimlerin büyük hallerini görüntülemek için oldukça pratik ve şık bir javaScript uygulamasıdır. - Etixet
09 Aralık 2007, 17:42
[...] anlatılmıştır. Bu işlemleri Türkçe olarak anlatan bir yazıya ise Erhan YAKUT’un Işık Kutusu (Lightbox) Nedir? başlıklı yazısından ulaşabilirsiniz. Bir LightBox JS [...]
8 Web Tasarım Hakkında Herşey…. » Blog Archive » LightBox JS ile web galerileri hazırlamak
11 Mart 2008, 10:07
[...] açıkça anlatılmıştır. Bu işlemleri Türkçe olarak anlatan bir yazıya ise Erhan YAKUT’un Işık Kutusu (Lightbox) Nedir? başlıklı yazısından [...]
9 sinan
12 Mayıs 2008, 22:00
eklentiyi indiremiyoruz
Not Found
Sorry, but the page you requested cannot be found.
Search
10 azmiii
16 Haziran 2008, 10:05
teşekkürler beğendiğim bir uygulamaydı öğrendim sayenizde =)
link çalışmıyor diyen arkadaş konu içinde verilmiş uygulamanın resmi sitesinden indirebilir
http://www.huddletogether.com/projects/lightbox2/