Zoomer Gallery – Flash’a Meydan Okuyan jQuery Eklentisi

Benzerini daha önce görmediğim bir jQuery eklentisi olan resim galerilerine örnek olacak bir çalışma; Zoomer Gallery. Açıkçası insanı, Flash’ın sonunu getiren bir çalışma olmuş diye düşündürüyor. Yoksa ben mi abartıyorum bilmiyorum ama gerçekten taktire şayan bir ürün olarak görüyorum. Çünkü galerinin bir Flash mı yoksa jQuery ürünü olduğunu anlamak için fare ile sağ tıklamak gerekiyor. İndirebileceğiniz kaynak olan galeriyi kendine göre bazı değişiklilerin nasıl yapılacağı da açıklanmış. Kullanması oldukça basit olan bu eklentinin sitenize nasıl yerleştirileceği konusunda aşağıda kısaca bilgi vereceğim.

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.

Veysel

Veysel

Sosyal Medya ve İnternetteki gelişmeleri inceleyen, Web Tasarım Araçları, CMS(İçerik Yönetim Sistemi)leri, özellikle WordPress üzerine haberleri araştıran, 2007 yılında yayın hayatına başlayan SanalDuvar.Com'un yöneticisidir. Ana Bilim Dalı Elektrik-Elektronik Mühendisliği olan bir Sistem Mühendisidir.

İlginizi çekebilir...

1 Response

  1. Avatar web tasarım dedi ki:

    google ın yeni resim arama sayfasına benziyor

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir