cummolog

colorbox, sayfada bulunan görsellerin, web adreslerinin, ajax ve flash dosyalarının özel bir efektle görüntülenmesini sağlayan lightbox benzeri bir uygulamadır. resmi web sitesi colorpowered.com'dur. aşağıda uygulanışı açıklanan colorbox örneğini görmek için tıklayın : colorbox - 1

açık anlatımını ilk olarak teknomobi.net'te gördüğüm bu efektin uygulanışına bakalım:

yerleşim>html'yi düzenle bölümü açılır ve </head> etiketinin öncesine aşağıdaki kod eklenir:

<link href='http://www.hotlinkfiles.com/files/2689386_odgnx/colorbox.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='http://www.hotlinkfiles.com/files/2689383_6dsxx/colorbox-custom.css' media='screen' rel='stylesheet' type='text/css'/>
<!--[if IE]>
<link type='text/css' media='screen' rel='stylesheet' href='http://www.hotlinkfiles.com/files/2689385_wuxpu/colorbox-custom-ie.css' title='example' />
<![endif]-->
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>google.load(&#39;jquery&#39;, &#39;1.3.2&#39;);</script>
<script src='http://www.hotlinkfiles.com/files/2689384_ydsp0/jquery.colorbox.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$.fn.colorbox.settings.transition = 'elastic';
$.fn.colorbox.settings.bgOpacity = '0.9';
$.fn.colorbox.settings.contentCurrent = 'Görsel {current} / {total}';
$('.rsm').colorbox();
$('#ajax').colorbox({contentWidth:'300px', contentHeight:'195px'});
$('#flash').colorbox({contentAjax:'../content/flash.html'});
$('#web').colorbox({contentWidth:'800px', contentHeight:'600px', contentIframe:true});
$('#inline').colorbox({contentWidth:'500px', contentInline:'#inline-content'});
});
</script>

şablon kaydedilir.

sıradaki işlem eklenen görsele efektin verilmesidir, bunun için görselin kodlarına kırmızı renkli kodlar eklenmelidir:

<a class="rsm" title="Açıklama Bölümü" onblur="try {parent.deselectBloggerImageGracefully();}
catch(e) {}" href="http://i31.tinypic.com/2hdz28z.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;
cursor:pointer; cursor:hand;width: 200px; height: 130px;" src="http://i31.tinypic.com/2hdz28z.jpg" border="0" alt="" /></a>


class="rsm" ile görsele colorbox efekti atanır.
title="Açıklama Bölümü" ile tercihen görselin altına açıklama eklenebilir.

eğer bir albüm oluşturmak istiyorsanız, albümde yer alacak görsellere aşağıdaki gibi bir "rel" etiketi eklenir:

<a class="rsm" rel="album" title="Açıklama Bölümü" onblur="try {parent.deselectBloggerImageGracefully();}
catch(e) {}" href="http://i31.tinypic.com/2hdz28z.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;
cursor:pointer; cursor:hand;width: 200px; height: 130px;" src="http://i31.tinypic.com/2hdz28z.jpg" border="0" alt="" /></a>


web site görüntüleme için gereken kod şu şekilde:

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


diğer kullanım alanları ise id="flash", id="ajax", id="inline" etiketleriyle aktif hale getirilebilir.

not:

1. "rel" etiketine verilen "album" ismini değiştirebilirsiniz ancak bu değişikliği albümde yer almasını istediğiniz tüm görsellerin kodlarına uygulamalısınız.

2. "rsm" ve "web" gibi sınıf isimlerini değiştirmek istiyorsanız, javascript kodunda kırmızı renkle belirtilmiş isimleri değiştirmeniz yeterlidir.

diğer colorbox türleri: colorbox efekti - 2