Neredeyim ?

Muğla / Ortaca

Hızlı İletişim

buldurmert@gmail.com

Beni Takip Edebilirsin

Yazılarım

Resimler için FancyBox Kullanımı

Resimler için FancyBox Kullanımı

  • 2 dakika
  • 9 year ago
Blog Images

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 :)

Yorumlar: