JQuery mi öğrenmek istiyorsunuz?
Evet tam yerine geldiniz. Siteyi takip ederek JQuery hakkında bilgi sahibi olacak ve örneklerle bilginizi pekiştirerek sizde çok rahat bir şekilde JQuery\'yi kullanabileceksiniz.
-
JQuery Fancy Box Eklentisi
02 Ağustos 2009 Yorum yokMerhaba, bu günkü yazımda sizlere bir JQurey eklentisi olan Fancy Box‘tan bahsedeceğim. Fancy Box nedir diye soracak olursanız, Fancy Box içerikleri slide show olarak gösterebilen bir JQuey Eklentisidir. En önemli özelliği ise sayfa değiştirmeden içerik gösterir ve ajax desteklidir. Kullanımı çok basit olan Fancy Box’ı şimdi tanımaya başlayalım.
Öncelikle Fancy Box’ı buradan indirerek işe başlayalım. Ben bu yazıyı yazarken güncel sürümü 1.2.1 versiyonu bulunmakta. Ben deneme projemde bunu kullanacağım.
Şimdi .zip olarak indirdiğimiz dosyamızı herhangi bir yere açalım. Gödüğünüz gibi içinde Example ve JQuery.FancyBox olarak 2 klasör bulunmakta. Dilerseniz Example klasörünün içindeki örnekleri de inceleyebilirsiniz. Bizim asıl klasörümüz ve eklentinin (plugin) olduğu klasör JQuery.FancyBox klasörüdür.
Ben deneme projemi yapmak için Fancy adında bir klasör oluşturdum. Bu klasör içine JQuery.FancyBox klasörünü kopyalayarak işe başladım. Ayrıca Fancy klasörünün içine de index.html diye bir html dosyası ve imajlar diye klasör oluşturdum. Şimdi kodlamaya geçebiliriz.
Öncelikle javascript dosyalarımızı <head></head> tagları arasına çağırmamız gerekiyor. Aynı zamanda Fancy Box bir JQuery eklentisi olduğuna göre JQuery’yi de kullanmamız gerekecek.
<script type="text/javascript" src="jquery.fancybox/jquery-1.3.2.min.js"></script><script type=”text/javascript” src=”jquery.fancybox/jquery.easing.1.3.js”></script>
<script type=”text/javascript” src=”jquery.fancybox/jquery.fancybox-1.2.1.pack.js”></script>
<link href=”jquery.fancybox/jquery.fancybox.css” rel=”stylesheet” type=”text/css” media=”screen” />
Dosyalarımızı başarı ile çağırdıktan sonra deneme yapacağımız içerik dosyalarını oluşturmamız gerekecek. Ben bunun için iki adet resim kullandım. Birincisi istanbul.jpg, ikincisi de izmir.jpg .(İki, dünya harikası şehrimizden görüntüler.) Şimdi bunlara index.html dosyamızdan link verelim.
<p><a href="imajlar/istanbul.jpg" title="istanbul" rel="img">İstanbul Resmi</a></p><p><a href=”imajlar/izmir.jpg” title=”izmir” rel=”img”>İzmir Resmi</a></p>
Şimdi sayfaya önizleme yaptığınızda iki adet link görünür ve bastığınızda resimleri gösterir. Bu standart olan bir şeydir. Şimdi ise biz resimlerimizi FancyBox ile nasıl göstericez ona bakalım Yine <head></head> tagları arasına şunu yazalım..
<script type="text/javascript">$(document).ready(function(){
$(”a[rel^=img]“).fancybox(); //$([rel^=img]) rel’i img ile başlayanları seç demek. Geniş bilgi için JQuery ve Seçiciler
});
</script>
Yorum yap
Son Yorumlar