JQuery FancyBox Eklentisi Kullanımı

Bu dersimizde sitelerimize renk katacak güzel bir eklenti olan FancyBox eklentisini inceledik.

Bu dersimizde JQuery FancyBox eklentisini öğrendik. Bu ders hem yazılı, hem de videolu olarak anlatılmıştır.

Eklentimizden biraz bahsedelim. Eklentiyi çalıştırdığımızda öncelikle eklenti için hedef bir nesne belirliyoruz. Örneğin bir div belirttik. Eklenti çalıştığında divimizin üstünü rengarenk kutularla kaplıyor ve istediğimiz nesneye tıkladığımızda veya sayfamız yüklendiğinde animasyonlu bir şekilde kutuları kapatıyor. Görsel açıdan gerçekten çok güzel, kullanıcının dikkatini çeken bir eklenti.

HTML KODLARI


<!DOCTYPE html>

<html lang="en">



<head>

  <meta charset="UTF-8" />

  <link rel="stylesheet" href="http://www.u-code.net/Fancybox/css/default.css" />

  <script src="http://code.jquery.com/jquery-latest.min.js"></script>

  <script src="http://www.u-code.net/Fancybox/v1.1.0.js"></script>

  <title>Jquery Fancybox Plugin</title>

</head>



<body>

  <div id="fancyDiv">

    <h1>FancyBox</h1>

    <h3>is</h3>

    <h1>Awesome</h1>

    <p>

      Creator - <a href="http://www.u-code.net" target="_blank">Uğur Oruç</a> - <a href="https://github.com/Ketcap/FancyBox" target="_blank">Github Page</a>

      <br />

      Tutorial By 

      <a href="http://www.zahidefe.com" target="_blank">Mustafa Zahid Efe</a>

    </p>

  </div>

</body>



</html>



CSS KODLARI


* {

  padding:0;

  margin:0;

}



#fancyDiv {

  width:100%;

  height:200px;

  background:#f1f1f1;

  text-align:center;

  padding-top:100px;

}



JS KODLARI


$(function() {

  $("#fancyDiv").Fancybox({

    boxWidth:48, /* Kutuların Genişliğini Ayarlıyoruz */

    boxHeight:50, /* Kutuların Yüksekliğini Ayarlıyoruz */

    anims:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], /* Kullanılacak Animasyonları Ayarlıyoruz */

    closeType:1, /* Kutularımızın Rastgele Kapanmasını Söylüyoruz */

    delay:10, /* Bir kutunun kaç milisaniyede kapanacağını belirtiyoruz */

    colorCount:13, /* Kaç farklı renk kullanılacağını belirtiyoruz */

    closeElement:"#fancyDiv" /* Tıkladığımızda kutuları kapatacak elementi belirtiyoruz */

  });

})



HTML kısmımızda zaten pek bir şey yok. Hemen Javascript kısmımıza gelelim. Burada zaten hepsinin yanına ne olduğunu yazdım. Burada anims, closeType ve colorCount özelliklerini ele almak istiyorum çünkü bunlar için özel bir açıklama gerekecek. anims değeri bir dizi halinde değer alıyor ve 1-11 arası (1 ve 11 dahil) değer verebiliyorsunuz. Bu animasyonları gösterecek olursak;

1 => Kutuları Sağdan Sola Doğru Kapatır
2 => Kutuları Aşağıdan Yukarı Doğru Kapatır
3 => Kutuları Soldan Sağa Doğru Kapatır
4 => Kutuları Yukarıdan Aşağıya Doğru Kapatır
5 => Kutuları Sağ Alttan Sol Üste Doğru Kapatır
6 => Kutuları Sol Alttan Sağ Üste Doğru Kapatır
7 => Kutuları Sağ Üstten Sol Alta Doğru Kapatır
8 => Kutuları Sol Üstten Sağ Alta Doğru Kapatır
9 => Kutuları Merkeze Doğru Küçülterek Kapatır
10 => Kutuları Soluklaşma Animasyonuyla Kapatır
11 => Kutuları Animasyonsuz Kapatır

Bunları öğrendiğimize göre anims ayarıyla ilgili bilmemiz gereken tek bir şey kaldı. İstersek birden fazla animasyon kullanabiliriz. Örneğin ben Kutuların 9 ve 10’daki gibi kapanmasını istiyorum. Bunun için sadece anims:[9, 10] yazmam yeterli, bu sayede eklenti kutuları sadece 9 ve 10 numaralı animasyonları uygulayacak. istediğiniz gibi çoğaltabilirsiniz bu örneği. İsterseniz tüm animasyonları da çalıştırabilirsiniz.

closeType özelliğine gelirsek bu da 0 ile 3 arasında bir değer alıyor (0 ve 3 dahil). Değerleri inceliycek olursak;

0 => Kutuların Hepsini aynı anda kapatmaya başlıyor.
1 => Kutuları Soldan Sağa Doğru Kapatıyor.
2 => Kutuları Yukarıdan Aşağıya Doğru Kapatıyor.
3 => Kutuları Rastgele Kapatıyor.

Bu ayarımız da bu kadar. Şimdi son olarak colorCount özelliğine bakalım. Bu özellik hakkında söylemem gereken tek bir şey var aslında. Bu da 1 ile 13 arasında değer alıyor olması. (1 ile 13 dahil). Bu ayar da kaç renk kullanılacağını belirtiyor.

Eklentiyi Yazan: Uğur Oruç
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git