Php Dersleri

Güncel Eğitimler

Resimler için FancyBox Kullanımı

Kategori: Php 2 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
"Mahmut kaya" Meta Tag Listesi ve Açıklamaları Gönderisine Yorum Yaptı
"Ahmet" Sql il ilçe Listesi Gönderisine Yorum Yaptı
"mert buldur" Php ile Dosyaya Veri Yazımı Gönderisine Yorum Yaptı