Beni Takip Edebilirsin
Resimler için FancyBox Kullanımı
Merhaba arkadaşlar,
Bir çoğumuz aslında bilmedende olsa fancybox u görmüşüzdür.Fancybox sayesinde resimlere tıklayınca büyük hallerini göstermeyi yapabiliriz.
Sitesindende İnceleyebilirsiniz http://fancybox.net/
Peki Nasıl Kullanılır Bu Arkadaş :) öncelikle
<head> bölümüne
<link href="files/fancy.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="files/jquery-1.2.3.pack.js"></script> <script type="text/javascript" src="files/jquery.fancybox-1.0.0.js"></script> <script type="text/javascript" src="files/jquery.pngFix.pack.js"></script>
Bunları Atıyoruz tabiki indirdiğimiz dosyaya göre adres değişebilir.
Daha sonra JS olarak
<script type="text/javascript"> $(document).ready(function() { $("#test a").fancybox({hideOnContentClick: true}); $("#test2 a").fancybox({ overlayShow: true, zoomSpeedIn: 0, zoomSpeedOut: 0, }); $("#test3 a").fancybox({ overlayShow:true }); }); </script>
Bunlarıda Ekliyoruz.Sonuna geldik sabırsızlanmayın. :)
<p id="test"> <a href="images/1.jpg"> <img src="images/thumbs/1.jpg" alt=""/> </a> </p> <p id="test2"> <a rel="test2" href="images/2.jpg"> <img src="images/thumbs/2.jpg" alt=""/> </a> <a rel="test2" href="images/3.jpg"> <img src="images/thumbs/3.jpg" alt=""/> </a> <a rel="test2" href="images/4.jpg"> <img src="images/thumbs/4.jpg" alt=""/> </a> </p> <p id="test3"> <a rel="test3" href="images/5.jpg"> <img src="images/thumbs/5.jpg" alt=""/> </a> <a rel="test3" href="images/1.jpg"> <img src="images/thumbs/1.jpg" alt=""/> </a> <a rel="test3" href="images/2.jpg"> <img src="images/thumbs/2.jpg" alt=""/> </a> </p>
Ekliyoruz ve Bitmiştir. "a" tagına resmin büyük halini yani tıklayınca acılan yerini yazıyoruz.
Saygılar :)
Paylaş:
Yorumlar: