mehmetduran.com - Paylaşmak Güzeldir...
FancyBox Kullanımı
Bu yazımda internette gezinirken gördüğüm FancyBox uygulamasını anlatacağım. Bu uygulama jquery kullanılarak hazırlanmış fotoğraf / resim gösterimi veya slaytı yapabildiğimiz oldukça güzel bir uygulama. Oldukça hoşuma gitti ve sizlerle paylaşma gereği duydum. Yapacağımız uygulamalarda böyle görsel uygulamalara yer vererek uygulamamızın değerini artırabiliriz. Şimdi bu uyglamayı nasıl yapabileceğimize bakalım.

Öncelikle gerekli dosyaları (yaptığım örnekte dahil) indiriyoruz.

Daha sonra örneği hazırladığımız sayfaya gerekli olan javascript dosyalarımızı ve css dosyalarımızı bildiriyoruz.

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

Dosyalarımızı bildirdikten sonra fotoğraflarımızı / resimlerimizi veya internet sayfası gibi özellikleri fancybox ile görüntüleyebiliyoruz. Yaptığım örnekte resimleri kullandım. Bu örneğe göre script kodlarımız ve html kodlarımız şöyle olacak:

<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>
 
<p id="test">
  <a href="images/kelebek.jpg">
    <img src="images/thumbs/kelebek.jpg" alt=""/>
  </a>
</p>
<p id="test2">
  <a rel="test2" href="images/semih.jpg">
    <img src="images/thumbs/semih.jpg" alt=""/>
  </a>
  <a rel="test2" href="images/hoca_efendi.jpg">
    <img src="images/thumbs/hoca_efendi.jpg" alt=""/>
  </a>
  <a rel="test2" href="images/fatih.jpg">
    <img src="images/thumbs/fatih.jpg" alt=""/>
  </a>
</p>
<p id="test3">
  <a rel="test3" href="images/semih.jpg">
    <img src="images/thumbs/semih.jpg" alt=""/>
  </a>
  <a rel="test3" href="images/hoca_efendi.jpg">
    <img src="images/thumbs/hoca_efendi.jpg" alt=""/>
  </a>
  <a rel="test3" href="images/fatih.jpg">
    <img src="images/thumbs/fatih.jpg" alt=""/>
  </a>
</p>

Görüldüğü gibi kodlarımız anlaşılır ve açık. Kodlarımız üzerinde oynamalar yaparak daha çeşitli, daha efektif slaytlar veya gösterimler hazırlayabiliriz.

Bu örnek için buradan daha fazla bilgi alabilirsiniz.
Buradan hazırladığım demoyu görebilirsiniz.
Buradan da örneği ve tüm dosyaları indirebilirsiniz.

İyi Çalışmalar!
Mehmet Duran 18 Ekim Cumartesi 2008 4 51852 4,1
Web Tasarım Javascript jQuery Jquery Tasarım-Görsellik Fotoğraf Resim
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Jquery ile Slide View Javascript ile Mouse Pozisyonunu Bulma Sudoku Uygulamam (MDSudoku v1.0) Javascript ile Linkleri Renklendirme Jquery ile Typing Uygulaması (Harf Harf Yazdırma)
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Fuat Yılmaz 16 Ağustos Pazar 2009 11:28 #1
katkılarınız için saolun sayenizde bilgimi daha iyi kutlanıp yazdığım kodlardan zevk alıyorum.teşekkürler herşey için
Hasan 16 Eylül Perşembe 2010 19:14 #2
Hocam bu tür örnekleri veritabanlı ve Datalist kullanarak ta yapabilseniz çok makbule geçecek,bu tür sade ve düz olunca dataliste uyarlamakta çok zorlanıyoruz.Lütfen o türden de bir örnek yaparsanız ii olur.
Mehmet Duran 17 Eylül Cuma 2010 09:20 #3
@Hasan, öyle bir örneği buradaki yazımda paylaşmıştım. Ancak kullandığım eklenti farklı. Örneği inceleyerek, istediüin şekle uyarlayabilirsin diye düşünüyorum.
hakan 28 Şubat Pazartesi 2011 14:26 #4
Kardeş çok teşekkür ederim gerçekten çok işine yaradı.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Ne edersen kendine, edersin kendi kendine.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009