Daha önce Colorbox, Multibox , Lightbox ve Fullsize eklentilerinin anlatımını yapmıştım. Şimdi ise Fancybox eklentisinin Blogger bloglarında nasıl kullanılabileceğini ve gerekli olan dosyaları optimize ettim.
Fancybox uygulaması Lightbox uygulamasının bir alternatifidir. Lightbox uygulamasının aksine Jquery ile çalışmaktadır. Buda Fancybox uygulamasının performansını Lightbox uygulamasına göre bir adım öne çıkartıyor.
Fancybox uygulamasının en güzel yanı ise blogumuza eklediğimiz resimlerin üzerinde ekstra bir düzenlemeye ihtiyaç duymamasıdır. Böylelikle resimleri blogumuza ekledikten sonra yazının html düzenle bölümünden rel veya class sınıfı girmemize gerek bırakmıyor. Tabi eğer eklediğiniz resime başlık eklemek istiyorsanız yine html düzenle bölümünden title sınıfı eklemelisiniz.
Fancybox uygulamasının Blogger'e entegre etme aşamalarını sırayla anlatayım.
1. Öncelikle blogumuzun şablon kodlarının yedeğini alıyoruz.
2. Şablon kodları arasında aşağıdaki kodu aratıyoruz.
</head>Bu kodun hemen üstüne aşağıdaki kodu ekliyoruz.
<link href='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.fancybox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.fancybox-1.2.1.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$("a").fancybox();
});
</script>3. Şablonumuzu kaydediyoruz.
4. Artık bloglarınıza eklediğiniz resimler fancybox uygulamsı ile açılacaktır. Ekstra düzenleme kodları ise aşağıdaki gibidir.
Resimleri grup halinde göstermek için yani sırayla göstermek için resimlerinizi ekledikten sonra yazının html düzenle bölümünden resim kodlarına aşağıdaki rel sınıfını atamalısınız.
rel="group" title="Başlık"Blogunuza eklediğiniz linklerin sayfanızdan ayrılmadan görüntülenmesini istiyorsanız linke aşağıdaki class etiketini eklemelisiniz.
class="iframe"Bu etiket sınıfını linke eklemeden önceki görünüm
<a href="http://www.bloggergallery.com/" title="Blogger Templates Gallery">This goes to iframe link preview</a> sonraki görünüm
<a class="iframe" href="http://www.bloggergallery.com/" title="Blogger Templates Gallery">This goes to iframe link preview</a>bu şekilde olacaktır.
Fancybox uygulamasının blogger bloglarında nasıl çalıştığını görmek için hazırlamış olduğum Fancybox Demo sayfasına göz atabilirsiniz.
Js dosyaları benim özel alanımda barındırılmaktadır. İleride sorun yaşamamak için buradan dosyaları indirip kendi alanınıza yükleyip temada bulunan js dosyalarının bağlantı linklerini değiştirin lütfen!..
