Bu yazımda resimleri lightbox ile nasıl daha güzel gösteririz onu öğreneceğiz.Bu uygulama da resimler başka bir pencerede açılmaz aynı sayfada açılır fakat bulunduğumuz sayfadan hiç bir şekilde ayrılmayız.Örneğini aşağıdaki resme tıklayarak görebilirsniz.

Şimdi ilk önce kutumdan(Diger>light.rar) gerekli dosyaları çekiyoruz.Sonrasında ;

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

bu kodları <head></head> arasına yerleştiyirouz.İndirdiğiniz arşivdeki dosyaların hepsini anadizine (index.html,index.php,default.asp,v.s. olduğu yer)atıyoruz.Ever bu kadat bitti şimdi tek yapmamız gereken linklere rel=”lightbox” kodunuda eklemek yani şöyle oluyor ki ;

<a href="images/image-1.jpg" title="my caption">image #1</a>
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Üstteki yanlış olan , alttaki doğru olan.Sonuçta yapacağamız işlem 3 adet.

  1. Head tagları arasına gerekli kodları yerleştirmek,
  2. Dosyaları upload etmek,
  3. Linklere rel=”lightbox” eklemek.

Bu işlemlerden sonra bendeki gibi resimleriniz janjanlı olacak :D

Yerimi Eklemetör:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Faves
  • Spurl
  • StumbleUpon
  • Live
  • Ma.gnolia
  • MySpace
  • Pownce
  • Slashdot
  • Technorati

Bunları oku daha güzel bak