Lightbox ile resim görüntüleme
Tarih : 20-03-2009 | imza : sysgeek | Kategori : Web Araçları
3
Lightbox nedir?
Lightbox, sitenizdeki resimlerin üzerine tıklandığında büyüyerek sayfanın üzerinde açılan ve arkaplanı karartan bir resim görüntüleme uygulamasıdır. Lightbox kullanarak web sitenizde ki görselliği arttırabilirsiniz. Ayrıca herhangi bir resmi görüntülediğiniz zaman ileri, geri seçenekleriyle resim galerisi olarakta kullanabilirsiniz.
Nasıl kullanılır?
Aslında kullanımı çok basittir. Öncelikle buradan lightbox dosyalarını indirin ve arşivi açın. Üç klasör ve bir tanede html dosyası göreceksiniz. Lightboxu kullanmak istediğiniz dizine sadece 3 klasörü atın.
Resimlerin olduğu sayfanızın <head></head> tagları arasına aşağıdaki kodu ekliyorsunuz.
[php]<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>[/php]
Burada gerekli olan JS kütüphanesini ve bu küçük uygulamanın css dosyasını çağırıyoruz.
Gelelim resim linkine;
[php]<a href="resimler/resimdosyasi.jpg" rel="lightbox"><img src="thumb/kucukresim.jpg" width="100" height="40"/></a>[/php]
Burada resme normal bir link verdik. Ek olarak yapmamız gereken tek şey ise link verdiğimiz tagın rel parametresine lightbox’ı atamak. Yani rel=”lightbox” kısmı. Bu durumda eğer web sitenizin css dosyasında resmin çerçevesini sıfırlamamamış iseniz resmin etrafında bir çerçeve gözükecektir. Bunu yoketmek için ise yapacağınız işlem img tagının içerisine border=”0″ ekleyerek çerçeveyi sıfırlamak.
Bu şartlarda resminize tıkladığınızda görsel bir şekilde açılacaktır.
Bugüne kadar bunu hep kullanmak istedim ama bir türlü nasip olmadı. Neden diye sorma bende gerçekten bilmiyorum. Ama çok hoşuma giden güzel bir uygulama. Sende güzel açıklayınca iş bitmiş
Teşekkür ederim Oral benimde çok kullandığım bir uygulama.
Ellerine saglik kardes.Isime yaradi.