java script kullanarak resım galerisi oluşturmak

Sayfayı yenilemeden üzerinde işlem yapmak çoğu kişinin aklında ajax"olarak yer alır ancak xhr (xml http request) kullanmadan da birkaç farklı kod ile hoş galeriler yapılabilir. Anlatımlı bir örnek yapacak olursak.

Sürekli aynı şeyleri yazmamak ve işlem kolaylığı sağlatmak amacı ile bir çok programlama dilinde fonksiyonlar kullanılır, biz de işimizi görecek iki fonksiyon tanımlayalım. Bu fonksiyonlar resmi göstermek ve gizlemek amaçlı kullanılsın. Ama bu fonksiyonlardan önce, resmi göstereceğimiz alan içinde bir id vererek bu alanı tanımlamalıyız.


<div id="resim_alani" style="display:none">Resim Bu alana gelecek</div>

Bunu div le yapabileceğimiz gibi, bildiğiniz tablolama ile de yapılabilir.




<table><tr><td id="resim_alani" style="display:none"> Resim Bu alana gelecek</td></tr></table>


Bu şekilde alanımızı tamamladığımıza göre artık yapacağımız şey fonksiyonumuzu tamamlamak.




<script>

function resimkapat() {

document.getElementById('resim_alani').style.display='none';

}

function resimgoster(resim) {

document.getElementById('resim_alani').innerHTML='<img src=" '+resim+'"><br><a href=#resim_alani onclick="return resimkapat()">Resmi Kapat</a>';

document.getElementById('resim_alani').style.display='';

}

</script>


Göründüğü gibi kodlar oldukça sade. Resim kapat fonksiyonu, resim_alani id li elementin, td veya div size kalmış, görünmemesini sağlıyor. Resimgoster ise, önce alanın içine resmi ekliyor ve bir link koyuyor, daha sonra da resim_alani id li elementi görünür hale getiriyor. Hepsi bu. Resimlere de linkleri verirken şu şekilde vermeliyiz

<a href=#resim_alani onclick="return resimgoster('buyukresim.gif');">

<img src="kucukresim.gif"></a>


Tabi siz bunu veritabanı kullanarak da yapabilirsiniz yapacağınız işlem resim yollarını veritabanından çekmek olacak onu da ilerleyen günlerde anlatalım.. bu günlük bu kadar