Tweet

Ana Sayfa   Forum   Html - Dhtml - JS
Yeni Başlık Cevap Ekle
white_bullet Resim galeri scripti (01/03/2008 03:27)
profil Dia
 offline OFFLINE
 Sleepless Coder

Öncelikle aşağıdaki Javascript kodu sayfamızda body tagı içerisinde herhangi bir yere koyuyoruz.

CODE:

<SCRIPT TYPE="text/javascript" LANGUAGE="javascript">

var dynimages=new Array()
dynimages[0]=["uploaddir/2041194249284.JPG", ""] //tabi bu kısısımdaki dosyaları dinamik olarak buraya yazdırmanız gerekli php yada asp gibi bir dil kullanarak
dynimages[1]=["uploaddir/2041194249267.JPG", ""]
dynimages[2]=["uploaddir/2041194249144.JPG", ""]
dynimages[3]=["uploaddir/2041194249376.JPG", ""]



//Preload images ("yes" or "no"):
var preloadimg="yes"

//Set optional link target to be added to all images with a link:
var optlinktarget=""

//Set image border width
var imgborderwidth=0

//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

///////No need to edit beyond here/////

if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}

function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}
</SCRIPT>


Kodumuzu ekledikten sonra Sayfamızda değişecek olan resim alanını belirliyoruz. Aşağıda verdiği kod ile bu işlemi yapıyoruz.

CODE:
<div id="dynloadarea" style="width:450px; height:337px;"><img src="uploaddir/2041194249284.JPG"  /></div> <!--Bir de default olarak bir resmi belileyip div tagının içerisinde gösteriyoruz. -->


Şimdi sıra geldi thumb resimlere kaç adet resim gösterilecek ise aşağıda verdiğim şekilde sayfamıza bastırıyoruz.

CODE:
<a href="#" onMouseover="modifyimage('dynloadarea',0)"><img src="thumb/2041194249284.JPG"/></a>
<a href="#" onMouseover="modifyimage('dynloadarea',1)"><img src="thumb/2041194249267.JPG" /></a> <!-- Bu resimler dinamik olarak ta yazdıra bilirsiniz sizin yapınıza kalmış.-->


Evet hepsi bukadar şimdi thumb resimlerin üzerine gelerek scriptimizin nasıl çalıştığını test edebiliriz.

Herkeze iyi çalışmalar.

<!--Bana balık vermeyin balık tutmayı öğretin.-->

Üye Profili
 
1 /
 
Ana Sayfa   Forum   Html - Dhtml - JS
Yeni Başlık Cevap Ekle
 

MENÜ » FORUM
Menü » Takip et
RSS Facebook Twitter Friendfeed
Sık Kullanılanlar Google Yahoo Live
Menü » Paylaş
E-Posta ile gönder Twitter Facebook Friendfeed
Buzz Stumbleupon Delicious Digg