Lightbox Yapımı

20 Mayıs 2013 Pazartesi yazildi.

  Merhaba arkadaşlar bir Bedava-Sitem altyapılı sitede gördüğüm lightbox yapımı uygulaması çok hoşuma gitti. Ben de size sunayım dedim. (Size söyleyeyim bunu Blogger'da kullanmayın.Sebebi açık!)
İlk önce koyacağımız yere şu kodu yerleştiriyoruz:
<script type="text/javascript" src="http://HypeRxX.opendrive.com/files/NV8xNjY1NjA1X0p0eEhM/jquery-1.4.4.min.js"></script> <link rel="stylesheet" href="http://HypeRxX.opendrive.com/files/NV85NzM4MjQwX2piZERz/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /> <script src="http://HypeRxX.opendrive.com/files/NV8xNjY1NjA2X3hpTG9O/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'facebook'}); });</script>

Bunun birde çeşitleri var. Birincisi resimleri göstermek için:


Kod aşağıda:
<a rel="prettyPhoto" href="Tıklanınca Gösterilcek Büyük Resim Url"><img src="Tıklanması İçin Gösterilcek Küçük Resim" alt="" width="60" height="60" border="0" /></a>

İkincisi ise resimleri gösteriyor ama kapat aç yapmamak için altta slayder veriyor. Bunun için önizleme vermeyeceğim kod aşağıdadır. ( üçlü verdim kodu!)
<a rel="prettyPhoto[wordpressci]" href="Tıklanınca Gösterilcek Büyük Resim Url"><img src="Tıklanması İçin Gösterilcek Küçük Resim" alt="" width="60" height="60" border="0" /></a> <a rel="prettyPhoto[mansger-grafik]" href="Tıklanınca Gösterilcek Büyük Resim Url"><img src="Tıklanması İçin Gösterilcek Küçük Resim" alt="" width="60" height="60" border="0" /></a> <a rel="prettyPhoto[mansger-grafik]" href="Tıklanınca Gösterilcek Büyük Resim Url"><img src="Tıklanması İçin Gösterilcek Küçük Resim" alt="" width="60" height="60" border="0" /></a>

Üçüncüsü ise bir site göstereceğiz iframe yapacağımıza iframeyi lightbox'a sığdıralım diyenlere...
Mansger-Grafik

<a href="Göstereceginiz Site Url?iframe=true&width=100%&height=100%" rel="prettyPhoto">Site İsmi İsterseniz Resim Url </a>

Dördüncüsü ise lightbox oyun göstermek için. örnek olarak:
 
Kod aşağıdadır:
<a rel="prettyPhoto" href="Flash Url'si Buraya?width=600&height=450"><img src="Resim Buraya" alt="" width="85" height="55" border="0" />