Php Dersleri

Güncel Eğitimler

Resimler için FancyBox Kullanımı

Kategori: Php 3 Yıl önce yazıldı 0 Yorum

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
MERT BULDUR

Merhaba 17 Eylül 1995 Köyceğiz / Muğla Dogumluyum.Yaklaşık 10 yıldır Web Teknolojileri üzerinde Yazılım yapmaktayım.Herdaim kendimi geliştiriyorum.

SON YORUMLAR
"VadimllLiz" Php ile Verot.net Upload Class Gönderisine Yorum Yaptı
"AndreiVek" Site içi Seo E-kitabı Gönderisine Yorum Yaptı
"StewartIrres" Kullanılabilecek Php Editörler Gönderisine Yorum Yaptı
"Ozan SONAR" Php ile Link Kısaltma Yapımı Gönderisine Yorum Yaptı