Bilgi vermeden önce size bu çalışmanın demosunu görmenizi tavsiye edeceğim, o zaman neden bahsettiğimi anlayacaksınız.

Zoomer Gallery Demo

Zoomer Gallery İndir

Evet, şimdi kaynağımızı indirmiş arkadaşlar için kurulumu anlatmaya başlayalım.

İndirdiğimiz dosyada resimler ve bunlarında yanında 3 adet dosya var. Bunlar zoomer.html , zoomer.css ve zoomer.js dosyaları.

Zoomer.HTML

Bu dosyadaki kodların açıklamaları şu şekildedir.

$.fn.Zoomer=function(b){

var c=$.extend({

speedView:200,    //Resimlerim büyüme zamanı

speedRemove:400,  //Üzerine gelip büyüttüğünüz resmin küçülme zamanı

altAnim:false,  //Başlığın gösterilip gösterilmeyeceği (false:göstermez, true: gösterir)

speedTitle:400, //Başlığın kayma süresi

debug:false},b);  //Yapılan ayarları onaylama seçeneği(gibi birşey)

var d=$.extend(c,b);

Zoomer.CSS

Stil dosyası ile resimlerin çerçevesini ve arka planında değişiklik yapabilirsiniz.

ul.thumb li img {

width: 100px;

height: 100px;

border: 1px solid #ddd;

padding: 5px;

background: #f0f0f0;

position: absolute;left: 0; top: 0;

-ms-interpolation-mode: bicubic;

}

ul.thumb li img.hover

{

margin-top:15px;

background:url(thumb_bg.png) no-repeat center center;

border: none;

}

Şimdi gelelim sayfamızda çalışmayı çağırmaya geldi.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="zoomer.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     $(’ul.thumb li’).Zoomer({speedView:200,speedRemove:400,altAnim:true,speedTitle:400,debug:false});
});
</script>

Resimlerimizi sayfaya yerleştirmek için aşağıdaki kodları kullanmamız gerekiyor.

<ul class="thumb">
                <li><a href="#"><img src="image1.jpg" alt="Title 1" /></a></li>
                <li><a href="#"><img src="image2.jpg" alt="Title 2/></a></li>
                <li><a href="#"><img src="image3.jpg" alt="Title 3" /></a></li>

</ul>

Kısaca anlatmaya çalıştım. İngilizce kaynak için burayı ziyaret edebilirsiniz.

Hemen anlatmaya başlayayım! Öncelikle Google Arama Motoru’nun işleyişi şöyle oluyor; kullanmış olduğum javascript kodları ile blogda yapılan google aramasında sayfa yeniden yüklenmeden, mevcut sonuçlar hemen aynı sayfada gösteriliyor. Bu sayede daha aktif bir sayfa yapısına kavuşulmuş olunuyor ve sonuçlara tıklandığında ilgili konuya hemen gidilebiliyor. Şimdi gelelim bu güzel çalışmanın temaya uygulanmasına;

<div id='cse' style='width:100%;'>Yükleniyor...</div>
<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1');
google.setOnLoadCallback(function(){
var cse = new google.search.CustomSearchControl();
cse.enableAds('pub-XXXXXXXXXXXXXXX');
cse.draw('cse');
cse.setLinkTarget(google.search.Search.LINK_TARGET_SELF);
}, true);
</script>

Yukarıda XXXXXXXXXXXXXXX olarak görmüş olduğunuz yere google hesabınızın numarasını yapıştırmanız ile kazançlarınız sizin hesabınıza aktarılacaktır.

Gelelim şimdi Twitter için oluşturacağınız bölüme bunu için de aşağıdaki kodları temanız da twitter güncellemeleriniz görüntülemek istediğiniz yere yapıştırın.

<style type='text/css'>

#twitter_update_list li {
padding-bottom:6px;
border-bottom:solid 1px #DEDEDE;
margin-bottom:6px;
}

.twitter-follow{
background:url(http://lh4.ggpht.com/_TqPdHmAEwTM/SgxdH2E0JsI/AAAAAAAAEDE/HTXaxE7_KaU/twitter.png) right  no-repeat;
font-size:11px;
float:right;
margin-top:7px;
margin-right:4px;
padding-right:20px;
height:16px;
font-weight:bold;
}

</style>

<h2><span class='twitter-follow'><a href='http://www.twitter.com/sanalduvar'>Twitter Takip! </a></span>Tweetlerim</h2>
<div id='twitter_div'>
<ul id='twitter_update_list'>Tweetler Yükleniyor...</ul>
</div> 

<script src='http://twitter.com/javascripts/blogger.js' type='text/javascript'></script>
<script src='http://twitter.com/statuses/user_timeline/sanalduvar.json?callback=twitterCallback2&count=5' type='text/javascript'></script> 

Yukarıda görmüş olduğunuz http://www.twitter.com/sanalduvar adresini kendi twitter adresiniz ile değiştirin. <style> ve </style> bölümleri arasından bu bölüm için görsel değişikliği yapabilirsiniz.

Kodlama konusunda fazla bilgi olmayan arkadaşlar dahi bunları yapması sonucu sayfalarında bahsettiğim bu uygulamaları kullanabilirler. Teşekkürler!..

Şimdi geçelim beğendiğim ve kullanılmasını tavsiye edebileceğim eklentilere. Aşağıda kısa bilgisini vermiş olduğum eklentilerin ayrıntılarını sayfalarından edinebilirtsiniz.

FancyBox

Faklı bir ThickBox çeşididir. Hoş efekler içermektedir. Eklentinin sayfasına buradan ulaşabilirsiniz.

Unobtrusive Slider Control V2

Websayfanızda dinamik bir sayfa değiştirme paneli oluştumanıza yarar. Eklentinin sayfasına buradan ulaşabilirsiniz.

jQZoom

Sayfanızıda gösterilen resimlerin üzerine gelince mercek altına almanıza yarar. Özellikle alış-veriş sitelerinde kullanılabilir. Eklentinin sayfasına buradan ulaşabilirsiniz.

MooTools SlideShow – 1

Çeşitli seçeneklerle sunulan bu slideshow benzerlerinden çok farklı duruyor. Eklentinin sayfasına buradan ulaşabilirsiniz.

jQuery ScrollTo

Özel sayfalar oluşturmak için kullanılabilecek bir eklenti. Hedeflenen kutuya anahtar kelimeye tıklanınca otomatik yönlendiliyorsunuz. Eklentinin sayfasına buradan ulaşabilirsiniz.

FancyForm – MooTools

Web sayfanızda dinamik bir form oluşturmak için benzersiz bir çalışma. Eklentinin sayfasına buradan ulaşabilirsiniz.

iCarousel – MooTools

Yine açık kaynak new ticker/scroller diye adlandırılan, yani haber kaydıran ya da resim kaydıran eklenti diyebilceğimiz bir çalışma. Hem yazılar hemde resimlerle kullanılabilecek bir eklenti. Eklentinin sayfasına buradan ulaşabilirsiniz.

jQuery Validate

Özellike iletişim forumlarında kullanılacak bir çalışma. Anında uyarıyı veriyor. Eklentinin sayfasına buradan ulaşabilirsiniz.

PrettyCheckBoxes – Jquery

Diğer checkboxlardan daha farklı ve dinamik bir görüntü sağlayan bir çalışma. Sayfasında daha şık bir görüntü isteyenlere. Eklentinin sayfasına buradan ulaşabilirsiniz.

jQuery Coda Slider

Birçok sitede de kullanılan bir sistem. Özellikle değişken olmayan şirketsel sayfalarda sık rastlanır türden. Eklentinin sayfasına buradan ulaşabilirsiniz.