JQuery javascript fonksiyonları kütüphanesidir. Javascript'te çok karmaşık olan kodlar JQuery çerçeve sistemi(framework) sayesinde daha basit bir şekilde yazılabilir. Minimum kodla maksimum verim almamızı sağlayan bir kütüphanedir. Biz bu yazımızda JQuery Cycle eklentisini kullanarak basit bir fotoğraf galerisi nasıl yapılır bunu göreceğiz.
İlk olarak yapmamız gereken JQuery kütüphanesini kodumuza eklemek.
Bu kütüphaneye http://docs.jquery.com/Downloading_jQuery adresinden ulaşabilirsiniz. İki farklı indirme seçeneği bulunmaktadır. Biri küçültülmüş olarak yayınlanmaktadır, diğeri de normal olarak yayınlanmaktadır. Normal olan kütüphane daha çok geliştiricler tarafından kullanılır. Ayrıca küçültülmüş kaynak normal kaynağa göre sayfaya daha hızlı yüklenir. Bu nedenlerden ötürü biz küçültülmüş olanı tercih edeceğiz. Bu bilgiyi de verdikten sonra artık kütüphaneyi kodumuza ekleyelim.
Daha sonra JQuery Cycle eklentisini indirmemiz gerekli. Bu eklentiye de http://jquery.malsup.com/cycle/download.html adresinden ulaşabiliriz. Aynı şekilde bu eklentiyi de kodumuza ekliyoruz.
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
*kırmızı olan kısım dosyayı indirirken bizim verdiğimiz isimdir.Tüm bu işlemleri bu şekilde yapabileceğimiz gibi aşağıda gösterilen şekilde de yapabiliriz:
<head>
<script type="text/javascript" src="[http://code.jquery.com/jquery-latest.min.js](http://code.jquery.com/jquery-latest.min.js)">
</script>
<script type="text/javascript" src="[http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js](http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js)">
</script>
</head>
*Bu sayede kütüphaneleri bilgisayarımıza indirmemize gerek kalmaz.Bu aşamadan sonra artık fotoğraf galerimizi oluşturmamız için resimleri ekleme ve fonksiyonları yazma kısmı kaldı.
Resimleri id'si galeri olan bir div etiketi içine ekliyoruz. Yazacağımız fonksiyonlarda bu id'yi kullanarak div etiketine ulaşıp içinden resimleri alacağız. Resimleri eklerken galerinin daha güzel gözükmesi için tüm resimlerin aynı boyutta olmasına dikkat etmeliyiz. Bu yüzden isterseniz image etiketinin içinde isterseniz de resimleri eklemeden önce herhangi bir resim düzenleme programında resimlerinizin boyutlarını ayarlayabilirsiniz; ama eklemeden önce ayarlarmak daha kaliteli bir görüntü sağlar. Resim eklemenin yanında bir de sonradan kullanacağımız bir menü yaratalım. Şimdi bu işlemlerin kodlarını görelim:
<center>
<body>
<div id="galeri">
<image src="[http://www.cclub.metu.edu.tr/dosyalar/113.jpg](http://www.cclub.metu.edu.tr/dosyalar/113.jpg)" width=800 height=500>
<image src="[http://www.cclub.metu.edu.tr/dosyalar/124.jpg](http://www.cclub.metu.edu.tr/dosyalar/124.jpg)" width=800 height=500>
<image src="[http://www.cclub.metu.edu.tr/dosyalar/114.jpg](http://www.cclub.metu.edu.tr/dosyalar/114.jpg)" width=800 height=500>
</div>
<table>
<td id="ileri">
<<
</td>
<td id="numara"> </td>
<td id="geri">
>>
</td>
</table>
</body>
</center>Bu şekilde isteiğimiz kadar resim ekleyebiliriz. Id'si numara olan td etiketinin içine hiçbir şey yazmıyoruz; çünkü JQuery Cycle eklentisi bizim için bunu yapacak. Artık galeriyi oluşturmak için bir tek fonksiyonları yazmak kaldı. Onları da yine head tagleri arasına yazacağız.
<head>
<script type="text/javascript" src="[http://code.jquery.com/jquery-latest.min.js](http://code.jquery.com/jquery-latest.min.js)">
</script>
<script type="text/javascript" src="[http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js](http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js)">
</script>
<script type="text/javascript">
$(function( )
{
$('#galeri')
.cycle(
{
fx: 'fade',
speed: 400,
timeout: 4000,
pager : '#numara',
next: '#geri',
prev:'#ileri',
});
});
</script>
</head>Evet bu kodu yazdık ama hangi satırın ne işe yaradığını hiç bilmiyoruz. Haklısınız. :) Şimdi hangi ifadelerin ne işe yaradığından bahsedeceğim:
'#id' : id yazan kısma etiketler verdiğimiz id'leri yazarak etiketlere ulaşabiliyoruz.
fx : resimlerimize hangi efektin uygulanacağını burada belirliyoruz. Efektler konusunda seçeneğimiz baya bir geniş. Seçeneklerinizi http://jquery.malsup.com/cycle/ sayfasını ziyaret ederek görebilirsiniz.
speed : efektin hangi hızla uygulanacağını belirliyor. Bu ayarla oynayarak kendinize en uygun hızı ayarlayabilirsiniz.
timeout : efektin kaç milisaniyede bir ayarlanacağını belirliyor.
pager, next ve prev resimler arasında geçiş yapmamızı sağlıyor.
Şu anda bir fotoğraf galerimiz var; fakat her alanda olduğu gibi yapılan işlerin göze hitap etmesi çok önemli. Bu yüzden oluşturduğumuz menüyü biraz güzelleştirelim.
İlk olarak istediğimiz resme atlamamızı sağlayan numaraların olduğu bölümü deiştirelim. Bir arkaplan oluşturacağız, rakamların aralarını biraz açacağız ve birkaç küçük renk değişikliği yapacağız. Bu işlemler için style etiketini kullancağız.
<style>
#numara { border: 2px solid #ccc; background: #999;}
#numara a {color:#fff;text-decoration: none;padding: 3px 20px;}
#numara a.activeSlide { background: #aaaaaa; border: 2px solid #ccc; }
#numara a:focus { outline: none; }
#ileri{border: 2px solid #ccc; background: #999;color:#fff; padding: 3px 20px;}
#geri{border: 2px solid #ccc; background: #999;color:#fff; padding: 3px 20px;}
</style>Sanırım artık fotoğraf galerimiz hazır. Eğer daha marifetli bir galeri istiyorsanız JQuery Cycle eklentisini biraz kurcalamanız gerekiyor. Bu ayki yazımızın sonuna geldik umarım hepimiz için faydalı bir yazı olmuştur. Gelecek aylarda görüşmek üzere.