Colorbox Jquery Lightbox 1.3.6 Blogger Entegrasyonu

| |

Daha önce Colorbox uygulamasının bir kaç versiyonunun anlatımı Blogger altyapısı kullananlar için yapmıştım. Colorbox uygulaması sürekli güncellenen ve bünyesine yeni özellikler katan bir jquery uygulamasıdır. Ayrıca Blogger altyapıssında sorunsuz ve blogunuzu kasmadan çalışmaktadır.

Colorbox Jquery, Lightbox uygulamalarından bir tanesidir. Benim en sevdiğim uygulamadır. Jquery ile hazırlandığı için çok kullanışlı ve çok hızlı... en yeni versiyonu olan 1.3.6 sürümünde de bazı yenilikler yapılmış. Bunlar genelde kod yapısında yapılan iyileştirmeler diyebilirim.

Daha önceki anlatımlarımı inceleyenler bu eklentiyi kurmakta fazla zorlanmayacaklar. Colorbox uygulamasının 5 adet demosu var. Ben sizlere demo 1 den başlayarak sırasıyla anlatımları yapacağım.



Colorbox Example 1 Uygulanış Biçimi Anlatımı

Demo1 Önizleme

  • İlk olarak Temamızda Yerleşim - HTML'yi Düzenle diyoruz. Tam şablonu yükle diyerek temamızın bir yedeğiniz alıyoruz. Ardından Widget Şablonlarını Genişlet diyoruz.
  • Şimdi temamızda </head> kodunu aratıyoruz ve bu kodun hemen üstüne aşağıdaki kodu yerleştiriyoruz.

<link href='http://jsdepo.weebly.com/uploads/4/1/2/0/4120467/colorbox-ex1.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://jsdepo.weebly.com/uploads/4/1/2/0/4120467/jquery.colorbox-min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(&quot;a[rel=&#39;example1&#39;]&quot;).colorbox();
$(&quot;a[rel=&#39;example2&#39;]&quot;).colorbox({transition:&quot;fade&quot;});
$(&quot;a[rel=&#39;example3&#39;]&quot;).colorbox({transition:&quot;none&quot;, width:&quot;75%&quot;, height:&quot;75%&quot;});
$(&quot;a[rel=&#39;example4&#39;]&quot;).colorbox({slideshow:true});
$(&quot;.example5&quot;).colorbox();
$(&quot;.example6&quot;).colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(&quot;.example7&quot;).colorbox({width:&quot;80%&quot;, height:&quot;80%&quot;, iframe:true});
$(&quot;.example8&quot;).colorbox({width:&quot;50%&quot;, inline:true, href:&quot;#inline_example1&quot;});
$(&quot;.example9&quot;).colorbox({
onOpen:function(){ alert(&#39;onOpen: colorbox is about to open&#39;); },
onLoad:function(){ alert(&#39;onLoad: colorbox has started to load the targeted content&#39;); },
onComplete:function(){ alert(&#39;onComplete: colorbox has displayed the loaded content&#39;); },
onCleanup:function(){ alert(&#39;onCleanup: colorbox has begun the close process&#39;); },
onClosed:function(){ alert(&#39;onClosed: colorbox has completely closed&#39;); }
});

//Example of preserving a JavaScript event for inline calls.
$(&quot;#click&quot;).click(function(){
$(&#39;#click&#39;).css({&quot;background-color&quot;:&quot;#f00&quot;, &quot;color&quot;:&quot;#fff&quot;, &quot;cursor&quot;:&quot;inherit&quot;}).text(&quot;Open this window again and this message will still be here.&quot;);
return false;
});
});
</script>


Üstteki kodu yerleştirdikten sonra şablonumuzu kaydediyoruz. Tema ile ilgili işlem bu kadar artık yazılarımız üzerinde düzenleme yapacağız.

Blogunuza resim eklediğiniz zaman colorbox uygulaması ile açılmasını sağlamak için, yazının html düzenle kısmına giriyoruz. Yazının Html Düzenle kısmında eklemiş olduğunuz resimin kodu aşağıdaki gibi görünecektir.

<a href="http://i42.tinypic.com/mvqkh0.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="217" src="http://i42.tinypic.com/mvqkh0.jpg" width="320" /></a>

Draft Blogger kullanmayanlarda farklı görünebilir. Fakat uygulama mantığı şimdi anlatacağım gibidir. Yukarıdaki gibii bir kod elde ettikten sonra bu koda aşağıdaki kırmızı renkli kodları ekleyeceğiz.

<a href="http://i42.tinypic.com/mvqkh0.jpg" imageanchor="1" rel="example1" title="Resim Başlığı" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="217" src="http://i42.tinypic.com/mvqkh0.jpg" width="320" /></a>

Yukarıda kırmızı renkle ekledklerimiz colorbox uygulamasının bu resmi tanımasını sağlıyor. Bu sayede resim colorbox uygulaması ile açılıyor. Yukarıda eklediğim rel bölümündeki example1'i isterseniz example2 veya example3 yapabilirsiniz. Bunlar resimlerin farklı efektler ile açılmasını sağlar.

Artık resimlerimize yukarıda anlattığı şeklide kod ekleyerek colorbox uygulaması ile açılmasını sağladık. Peki colorbox sadece resimlerde mi işe yarar? Tabi ki hayır. Colorbox uygulaması ile blogunuzda verdiğniz harici bağlantıları ziyaretçi blogunuzdan ayrılmadan gösterebilirsiniz. Bunun için aşağıdaki yazınıza herhangi bir bağlantı eklediğinizde yazının html düzenle bölümüne giriş yapıp bağlantının kodunu buluyoruz. Aşağıdaki gibi bir kod olamsı gerekiyor.

<a href="http://www.google.com.tr/">Google</a>

Üstteki koda yine bir ekleme yapacağız. Aşağıda kırmızı renkle gördüğünüz kodu ekliyoruz ve Google'a verdiğimiz bağlantı bizim blogumuzun içerisinde görülecek.

<a class="example7" href="http://www.google.com.tr/">Google</a>

Colorbox uygulaması ile Youtube, Google Video, Vimeo vb. online video servislerinin videolarınıda blogumuzda açılır pencere şeklinde açtırabiliyoruz. Benim blogumda yayımladığım yazılarda bunun örneğini görebilirsiniz. Hadise ve Manga ile ilgili yazılarda Colorbox eklentisinin nasıl çalıştığını birebir görebilirsiniz. Blogunuza Flash içerik eklediğinizde colorbox uygulaması ile nasıl açtırabileceğinizi demoların tamamını anlattıktan sonra yapacağım. Devamını bekleyin...