Ajax teknolojisi çoğu sitede yerini alırken efekt dolu websiteler gelişmekte-artmakta ve son kullanıcıya görsel bir ziyafet sunmakta. İşte bunlardan biri de Lightview. Nick Stakenburg adlı developer arkadaşımızın yazdığı scriptler sayesinde bir medyaya tıklattığımızda ekranımız kararıyor ve o medya (resim,form,video,flash vs.) ekranımızın ortasına odaklanıyor.Yuvarlak köşeleriyle ekran ortasına açılan pencerede ne istersek onu gösterebiliyoruz. “Temiz, hızlı, kolay, yuvarlak ve şık” olarak nitelendirilen bu çalışma örneklerini aşağıda bulabilirsiniz.
1- Kurulum
Öncelikle http://www.nickstakenburg.com/projects/download/?project=lightview adresinden ilgili script dökümanını indiriyoruz.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
kodumuzu html dosyamızın tepesine ekliyoruz. Lightview ile ilgili tüm dökümanları bunlara css,resim ve js dosyaları dahil, sunucumuza atıyoruz. Lightview çalışmak için Prototype 1.6.0.3 ve Scriptaculous 1.8.1 kütüphanelerine ihtiyaç duyar. Bunları da dökümanımızın kod kısmına ekliyoruz :
<script type=’text/javascript’
src=’http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js’></script>
<script type=’text/javascript’
src=’http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js’></script>
<script type=’text/javascript’ src=’js/lightview.js’></script>
2 -Kullanım
Kurulumu tamamladıktan sonra kullanmaya başlıyoruz. Örneğin “resim1″ isimli bir dosyamız var ve bu resmin lightview efektini kullanarak açılmasını şu şekilde sağlayabiliriz :
<a href=’resim1.jpg’ class=’lightview’>Resmim</a>
Foto galerisi için :
<a href=’resim1.jpg’ class=’lightview’ rel=’gallery[myset]‘>Resim 1</a>
<a href=’resim2.jpg’ class=’lightview’ rel=’gallery[myset]‘>Resim 2</a>
Ziyaretçi google ‘ı ve yahoo ‘yu siteden ayrılmadan bir iframe üzerinden görüntüleyecekse :
<a href=’http://www.google.com.tr’ rel=’iframe’ title=’Google Anasayfası :: :: fullscreen: true’ class=’lightview’ >Google ‘a Gider</a>
<a href=’http://www.yahoo.com’ rel=’iframe’ title=’Yahoo Anasayfası :: A caption :: width: 800, height: 600′class=’lightview’ >Yahoo ‘ya Gider</a>
Ekranda ziyaretçiye form göstermek veya mesaj vermek için :
<a href=’#hiddenform’ class=’lightview’ title=’ :: :: topclose: true, autosize: true’ >Formu Görüntüle</a>
<a href=’/ajax/’ rel=’ajax’ title=’ :: :: ajax: { onComplete: callback }’ >Ajax Formu Görüntüle</a>
<a href=’#anotherElement’ class=’lightview’ title=’ :: :: menubar: false’ >Menubarsız Bir Form Görüntüle</a>
Bu şekilde dilediğiniz gibi efektleri sitemize yükleyebiliriz. Demolara http://www.nickstakenburg.com/projects/lightview adresinden ulaşabilirsiniz