İşte size basit ama kullanışlı bir slide-show scripti...
Scriptin en önemli özelliği, grafik dosyalarının boyutu
ne olursa olsun ekrana sığdırabilmek için genişlik ve
yükseklikleri ölçeklendirebilmesi.
Anında not : Bu scripti web sitesinde kullanacaksanız
önyükleme yapmayı unutmayın.
http://geocities.com/erwin_commett_york/fxcode/fx_slide-show_1.zip
Zip dosyasında 2 örnek resim dosyası bulacaksınız.
Anında uyarı : Gisele Bundchen'den hoşlanmayanlar dosya-
yı download etmesin.
Bu arada kodları buraya yazarak, size bir soru yöneltmek
istiyorum :
JavaScript kodlarını incelediğiniz zaman kafanız karı-
şıyor ya da bazı komutları anlamakta güçlük çekiyor mu-
sunuz? Örneğin bu scriptte durum nedir?
Ya da Ücretsiz kod sağlayan sitelerden bulup sayfanıza
koyduğunuz scriptleri kendinize göre yeniden düzenleye-
biliyor musunuz?
Vereceğiniz cevapları gerçekten merakla bekliyorum!
<html>
<head>
<meta
name="Author"
content="Erwin C. York"
>
<meta
http-equiv="Content-Type"
content="text/html; charset=iso-8859-9"
>
<title>
Foto Albüm Navigasyonu İçin Slide Show Scripti
</title>
<!--
*****************************
* *
* Sayfa stil şablonu başlar *
* *
*****************************
-->
<style type="text/css">
<!--
body {
background-color: #000000;
color: #CCCCCC;
font-family: Verdana, Arial;
font-size: 12px
}
#b1 {
background-color: #CCCCCC;
border-style: solid;
border-width: 1px;
border-color: #EEEEEE;
color: #000000;
font-family: Verdana, Arial;
cursor: pointer
}
-->
</style>
<!--
*****************************
* *
* Sayfa stil şablonu biter *
* *
*****************************
-->
<!--
*****************************
* *
* Sayfa script bloğu başlar *
* *
*****************************
-->
<script language="JavaScript">
<!--
/************************************************** *************
* *
* © 2003 FIXMAN *
* E-MAIL : ERWIN_COMMETT_YORK@YAHOO.COM *
* Bu JavaScript'i Copyright(©) satırlarını silmemek koşuluyla *
* kullanabilirsiniz. *
* *
* Microsoft Internet Explorer 5.0 + ve *
* Netscape Navigator 5.0 + da sorunsuz çalışır. *
* *
************************************************** *************/
/************************************************** **************************
* *
* BU JAVASCRIPT'i NASIL KULLANABİLİRİM ? *
* *
* İlk olarak bu dosyayı(index.htm), resimler klasörünüze kopyalayın. *
* (Bu klasördeki bütün resim dosyalarının aynı ada sahip olması gerekiyor) *
* *
* Örneğin : *
* *
* Manzara Resimleri 1.jpg *
* Manzara Resimleri 2.jpg *
* ... *
* Manzara Resimleri 10.jpg *
* Manzara Resimleri 11.jpg *
* ... *
* Manzara Resimleri 100.jpg *
* Manzara Resimleri 101.jpg *
* ... *
* *
* gibi *
* *
* Sonra da "picName" ve "picCount" değişkenlerinin değerini uygun şekilde *
* değiştirin... İşte bu kadar! *
* *
* Not : Slide show'da kullanılan bütün grafik dosyalarının fonksiyon çağ- *
* rılmadan önce yüklenmesi için bir önyükleme scripti kullanmalısınız. *
* *
************************************************** **************************/
var pic = new Array();
var picName = "Gisele_Bundchen_";
// Dosya adı.
// Örneğin "ManzaraResimleri1" için "ManzaraResimleri"
var picNum = 0;
// Başlangıç numarası
// Örneğin 1 için 0, 54 için 53, 100 için 99 gibi
var picCount = 2;
// Toplam resim dosyası sayısı
for(i = picNum; i < picCount + 1; i++)
pic[i] = picName + i + ".jpg";
// Bütün resim dosyalarının adını dizi değişken
// olarak depoladık.
var maxWidth = 0;
var maxHeight = 0;
var p = 2000;
// varsayılan devir süresi 2 saniye
function chPic(){
if(picCount){
// Eğer toplam fotoğraf sayısı 0 değilse Slide Show'u başlat
maxWidth = document.all ? document.body.clientWidth :
window.innerWidth;
// Tarayıcı penceresinin kullanılabilir alan genişliği
maxHeight = document.all ? document.body.clientHeight :
window.innerHeight;
// Tarayıcı penceresinin kullanılabilir alan yüksekliği
picArea = document.all ? document.all["pic"] :
document.getElementById("pic");
// ID'si "pic" olan hücreye ulaştık
picNum = parseInt(document.images[0].id);
// "img" etiketinin geçerli ID'si
if(picNum == picCount) history.go();
// Görüntülenen son fotoğrafsa girişe geri dön
picNum++
myPic = new Image();
myPic.src = pic[picNum];
myPic.size = "";
if(myPic.width || myPic.height){
if(myPic.height > maxHeight){
myPic.height = maxHeight - 30;
myPic.size = "height=" + myPic.height;
}
// Fotoğraf yüksekliğini ekrana göre orantıla
else if(myPic.width > maxWidth){
myPic.width = maxWidth - 30;
myPic.size = "height=" + myPic.width;
}
// Fotoğraf genişliğini ekrana göre orantıla
picArea.innerHTML = "<img src=\"" + myPic.src + "\"" + myPic.size + "\">";
document.images[0].id = picNum;
// "pic" ID'li hücrenin içeriğini yeni fotoğrafla güncelle
}
setTimeout("chPic()",p);
}
else alert("Slide Show için fotoğraf yok.");
}
-->
</script>
<!--
*****************************
* *
* Sayfa script bloğu biter *
* *
*****************************
-->
</head>
<body
scroll=no
onContextMenu="return false;"
>
<div
style="
left: 0;
top: 0;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
"
>
<table
height="100%"
align="center"
>
<tr>
<td
id="pic"
>
<form name="slide">
<p>
<b>Slide Show</b><br><br>
Fotoğrafların kaç saniye arayla<br>
görüntülenmesini istersiniz?<br><br>
<input name="radiobutton" type="radio" onClick="p=1000"> 1
<input name="radiobutton" type="radio" onClick="p=2000"> 2
<input name="radiobutton" type="radio" onClick="p=3000"> 3
<input name="radiobutton" type="radio" onClick="p=4000"> 4
<input name="radiobutton" type="radio" onClick="p=5000"> 5</p>
<p
align="right"
>
<input id="b1" type="button" value="Başla"
onClick="if(!document.all)p /= 2; chPic();"
><br>
</p>
</form>
<img
id="0"
style="
visibility: hidden
"
>
</td>
</tr>
</table>
</div>
</body>
</html>