C U N K
İçindekiler
  Light Box, Üzerine Gelince Açılan Resim Galeri Kodu
 
etiketler: tr.gg bedava sitem javascript kodlar kod sitene light box üzerine gelince açılan büyüyen resim kodu ekle örnekli anlatım gösterim

Light Box, Üzerine Gelince Açılan Resim Galeri Kodu 



 
Şimdi yukarıda gördüğünüz resmi LightBox uygulamasında açacağız. Yani resim aşağıdaki gibi gösterilecek:

Resmi yukarıdaki hale getirmek için bazı kodlar gerekmekte.

Öncelikle resmi yayınlayacağınız sayfaya aşağıdaki kodu ekleyin.
<script type="text/javascript" src="http://catlaksite55.iwoly.com/js/jquery-1.4.4.min.js"></script>
 <link rel="stylesheet" href="http://catlaksite55.iwoly.com/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /> 
<script src="http://catlaksite55.iwoly.com/js/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> 


Daha sonra yukrarıdaki kodun devamına aşağıdaki kodu ekleyin.
<a rel="prettyPhoto" href="Tıklanınca Gösterilcek Büyük Resim Url"><img height="60" width="60" alt="" src="Tıklanması İçin Gösterilcek Küçük Resim URL" /></a> 

Kalın olarak yazılan yerlere istediğiniz resmin URLsini ekleyin. (Örneğin istenilen resmin URLsi şu olsun: http://www.nazlimcafe.com/wp-content/uploads/2009/10/manzara-resimleri2.jpg)
<a rel="prettyPhoto" href="http://www.nazlimcafe.com/wp-content/uploads/2009/10/manzara-resimleri2.jpg"><img height="60" width="60" alt="" src="http://www.nazlimcafe.com/wp-
content/uploads/2009/10/manzara-resimleri2.jpg" /></a> 

İşte resmimiz hazır:
Diyelim elimizde birçok resim var ve siz resimleri arda arda gösterebileceğiniz bir butonun olmasını istiyorsunuz. Yani aşağıdaki gibi:

 


Bunun için de:

<a rel="prettyPhoto[cunk]" href="Tıklanınca Gösterilcek Büyük Resim URL"><img height="60" width="60" alt="" src="Tıklanması İçin Gösterilcek Küçük Resim URL" /></a> 
 
<a rel="prettyPhoto[cunk]" href="Tıklanınca Gösterilcek Büyük Resim URL"><img height="60" width="60" alt="" src="Tıklanması İçin Gösterilcek Küçük Resim URL" /></a>
 
<a rel="prettyPhoto[cunk]" href="Tıklanınca Gösterilcek Büyük Resim URL"><img height="60" width="60" alt="" src="Tıklanması İçin Gösterilcek Küçük Resim URL" /></a> 
Yukarıdaki kodlarda kalın olarak gösterilen yerlere belirlediğiniz resimlerin URL adreslerini yapıştırın. Kodun başına ilk gösterilen kodu ekleyin. Ve istediğiniz yere yapıştırın.

Resimleriniz hazır!
  
  Bugün 19 ziyaretçi (173 klik) kişi burdaydı!  
 










ETİKETLER: tr.gg , bedava sitem , cunk.tr.gg , forum , cunk , html , jacascript , kod , kodlar , css , iceblue , tasarım , tasarımlar , sitene , web yöneticisi , webmaster , yardımları , yardım , bs , facebook , türkçe , ingilizce , korece , müzik , arka plan , duvar kağıdı , resimleri , komik videolar , hikayeler , şiirler , blog , bedava site , blog , aç , kur , hazır , free , css , tema , kod , kodlar , tasarımlar , php , java , ekle , sitene ekle , şablonlar , bilgiler , mobil siteler , mobil , atatürk resimleri , atatürkün sözleri , istiklal marşı Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol