Resimler için FancyBox Kullanımı

  • 2 dakika
  • 4 yıl önce

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

Mert Buldur

Yaklaşık 12 senedir internet ortamında aktif olarak faaliyet göstermekteyim. 2014 yılında açmış olduğum Youtube kanalımdan , kişisel websitem üzerinden ve Udemy Üzerinden 2k+ ziyaretçime eğitimler sağlıyorum. Şu anda Freelance Yazılım geliştiricisi olarak hayatıma devam etmekteyim. Birçok firma ve müşterilerime Yazılım desteği sağlamaktayım.

Yorumlar

Generic placeholder image
mahmut yıldırım

butonları nasıl türkçe yapabiliriz

Yorum Yaz