WEB DİZAYN
Fancy Box
Bu yazımızda jQuery'nin uygulamaları nasıl kullanacağınızı nasıl entegre edeceiğinizi ve size neler yapabildiğini göstermek için açıklamalar yazacağım. Klasik anlatımdan biraz uzak kalarak daha çok "DEMO" üzerinden anlatım yapacığım.Biz "jquery-1.4.3.min" kütüphanesinden yararlanarak bu uygulamayı yapacağız.
Gerekli kütüphane dosyalarını gerekli css dosyasını ve gerekli olan javascript kodlarını BURADAN indirerek kodumuzun head kısmına yapıştırmamız yeterli olacaktır.
Farklı Animasyonlar
Burada var olan resimleri id kısmına farklı id lerle farklı animasyonlar ekleyebilmekteyiz.
< a id="example1" href="./example/1_b.jpg">< img alt="example1" src="./example/1_s.jpg" />< /a>
< a id="example2" href="./example/2_b.jpg">< img alt="example2" src="./example/2_s.jpg" />< /a>
< a id="example3" href="./example/3_b.jpg">< img alt="example3" src="./example/3_s.jpg" />< /a>
< a id="example4" href="./example/4_b.jpg">< img class="last" alt="example4" src="./example/4_s.jpg" />
Farklı Başlık Konumları
Burada var olan resimleri id kısmına farklı id lerle farklı yerlerde başlıklar ekleyebilmekteyiz.
< a id="example5" href="./example/5_b.jpg" tiTLe="Farklı bir başlık şekli ile resmi göstermeyi sağlar">< img alt="example4" src="./example/5_s.jpg" />
< a id="example6" href="./example/6_b.jpg" tiTLe="Farklı bir başlık şekli ile resmi göstermeyi sağlar">< img alt="example5" src="./example/6_s.jpg" />
< a id="example7" href="./example/7_b.jpg" tiTLe="Farklı bir başlık şekli ile resmi göstermeyi sağlar">< img alt="example6" src="./example/7_s.jpg" />
< a id="example8" href="./example/8_b.jpg" tiTLe="Farklı bir başlık şekli ile resmi göstermeyi sağlar">< img class="last" alt="example7" src="./example/8_s.jpg" />
Kullanıcı İlerlemeli Olarak Resim Galerisi Oluşturmak
Burada var olan resimleri id kısmına farklı id lerle farklı yerlerde başlıklar ekleyebilmekteyiz.
< a rel="example_group" href="./example/9_b.jpg" tiTLe="Başlıkta ekleyebiliriz....">< img alt="" src="./example/9_s.jpg" />
< a rel="example_group" href="./example/10_b.jpg" tiTLe="">< img alt="" src="./example/10_s.jpg" />
< a rel="example_group" href="./example/11_b.jpg" tiTLe="">< img alt="" src="./example/11_s.jpg" />
< a rel="example_group" href="./example/12_b.jpg" tiTLe="">< img class="last" alt="" src="./example/12_s.jpg" />
Farklı Uygulamalar
Yazının orjinali http://fancybox.net/ sayfasından daha detaylı faydalanabilirsiniz.
