Lightbox Nasıl Yapılır?

Bugün, ufak tefek çalışmalar sonucu Lightbox'ı bloguma uygulamayı başardım. Lightbox'ı bileniniz var, bilmeyeniniz var. Peki nedir bu Lightbox?
Lightbox, küçük resimlerin önizlemelerini sayfayı terketmeden görmenizi sağlayan basit bir JavaScript uygulamasıdır. Örnek için şurayı ziyaret ediniz.
Peki nasıl yapılır bu Lightbox denen şey?
1. Lightbox 2.0 için gerekli olan dosya buradan indiriyoruz.
2. İndirdikten sonra, zipli dosyayı bir yere çıkartıyoruz. 'images' klasörü içerisindeki; close.gif, closelabel.gif, loading.gif, nextlabel.gif, prevlabel.gif dosyalarını ImagesHack gibi yerlere upload ediyoruz.
3. Lightbox.css dosyasını açıp, önceden bir sunucuya yüklediğimiz resimlerden nextlabel.gif ve prevlabel.gif'i alıp o dosyaya yerleştiriyoruz.[Orada (...images/nextlabel.gif) şeklinde olan yerlere.]
4. Lightbox.js dosyasını açıp; loading.gif, closelabel.gif dosyalarını yerleştiriyoruz.
5. Şimdi, GooglePages gibi yerlere resimleri yerleştirdiğimiz; Lightbox.css, Lightbox.js, Prototype.js, scriptaculous.js dosyalarını yüklüyoruz.
6. Yerleşim>Html'yi düzenle yolunu izliyoruz, <head> kodundan sonra aşağıdaki kod kümesini ekliyoruz.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder">
</script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen"/>

7. Bu kod kümesine 5. adımda bir servise yüklediğimiz dosyaları yerleştiriyoruz.
8. Temamızın kodlarıyla burada işimiz bitiyor. Kaydediyoruz.
Yazı yazarken resmimize Lightbox'ı uygulamak için aşağıdaki kodu kendimize göre düzenliyoruz.
<a href="Resim adresi" rel="lightbox" title="Resim açıklaması">
<img src="Resim Adresi"/></a>

NOT: Bu yazı, Blogger Kontrol Paneli baz alınarak yazılmıştır.

0 yorum:

 
 
OrtayiPisletenV1 - Copyrgiht 2013 - Tüm haklarımı annem kaldırdı - Tema Yapımcısı: TanerC.