Tasarımı kolay bir " SLIDESHOW " scripti

ByOnur58 · 23 Ocak 2015

utonları tıklayarak fotoğrafları ileri geri sırayla izleyin, yada pull-down menuden dilediğiniz fotoğrafı seçiniz

Yazın çektiğiniz fotoğrafları yada özel günlere, kişilere ait fotoğrafları slideshow haline getirip websitenizde yayınlayın. Yapmanız gereken aşağıdaki program kodunda Türkçe 1-2 değişiklik yapmak, hepsi o kadar.

Sayfanıza yerleştirmek için:
Adım 1: Aşağıdaki kodu NotePadde boş bir sayfa açıp yapıştırın ve slideshow.html diye adlandırın:

Kod:

<HTML>
<HEAD>
<TITLE></TITLE>
<**** NAME="Author" CONTENT="">
<**** NAME="Keywords" CONTENT="">
<**** NAME="Description" CONTENT="">
**********
//  'playspeed' oynatma hizini belirtir .
playspeed=1500
theimages = new Array();
thetitle = new Array();

// Netscape için bütün resim ölçüleri aynı olmaldır.
theimages[0]="foto_1.jpg"; <!-- buraya bir fotografinizin adi yazilacak -->
theimages[1]="foto_2.jpg"; <!-- buraya bir fotografinizin adi yazilacak -->
theimages[2]="foto_3.jpg"; <!-- buraya bir fotografinizin adi yazilacak -->

thetitle[0]="1. Resim altı yazısı"; 
thetitle[1]="2. Resim altı yazısı";
thetitle[2]="3. Resim altı yazısı!..";

///// BURADAN ASAGISINA DOKUNMAYIN- SADECE YUKARISI DEGiSECEK
i=0
play=0

function preloadImages() {
preloadit=new Array();
for (x=1;x<theimages.length;x++) {
preloadit[x]=new Image();
preloadit[x].src=theimages[x]}
window.status="Image "+(********.slideshow.theimages.selectedIndex+1)+" of "+theimages.length}

function slideNext() {
if (i==********.slideshow.theimages.length-1) {i=-1}
i++;
********.images.slideimage.src=********.slideshow.theimages.options[i].value
********.slideshow.theimages.selectedIndex = i;
window.status="Image "+(********.slideshow.theimages.selectedIndex+1)+" of "+theimages.length}

function slideBack() {
if (i==0) {i=********.slideshow.theimages.length}
i--;
********.images.slideimage.src=********.slideshow.theimages.options[i].value
********.slideshow.theimages.selectedIndex = i
window.status="Image "+(********.slideshow.theimages.selectedIndex+1)+" of "+theimages.length}

function slidePlay() {
if (play == 1) {
if (i==********.slideshow.theimages.length-1) {i=-1}
i++;
********.images.slideimage.src=********.slideshow.theimages.options[i].value
********.slideshow.theimages.selectedIndex = i;}
playing = setTimeout('slidePlay()', playspeed)
play = 1
********.slideshow.play.onclick=slideStop}

function slideStop() {
clearTimeout(playing)
play = 0
********.slideshow.play.onclick=slidePlay}

function slideChange(){
********.images.slideimage.src=********.slideshow.theimages.options[********.slideshow.theimages.selectedIndex].value}
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#008400" onload="preloadImages();" text=FFFF00 link=ffff00 vlink=ffff00 alink=ffff00>
<FORM NAME="slideshow">
<DIV ALIGN="CENTER">
<center><a href="http://martilar.superturks.org"><img src="logotr02.gif" width="93" height="100" alt="" border="0"><br><b>78 li Martılar</b></a></center>
<TABLE border=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR="black">
<TR>
<TD ALIGN=CENTER>
<TABLE border=0 CELLPADDING=2 CELLSPACING=1>
<TR>
	<TD ALIGN=CENTER BGCOLOR="white">
	******************.write('<IMG NAME="slideimage" SRC="'+theimages[0]+'" BORDER=0 ALT="Image 1">')</SCRIPT></TD>
</TR>
<TR>
	<TD ALIGN=CENTER BGCOLOR="#DDDDDD"><SELECT NAME="theimages" onchange="slideChange();">
**********
for (y=0;y<theimages.length;y++) {
********.write('<OPTION VALUE="'+theimages[y]+'">'+thetitle[y]+'</OPTION>')}
</SCRIPT>
	</SELECT></TD>
</TR>
<TR>
	<TD ALIGN=CENTER BGCOLOR="#DDDDDD"><INPUT TYPE="button" VALUE="<< Geri" onclick="slideBack();"> <INPUT TYPE="button" NAME="play" VALUE="Çalıştır/Durdur" onclick="slidePlay();"> <INPUT TYPE="button" VALUE="İleri >>" onclick="slideNext();"></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Adım 2:Websayfanızı açın, karşına Türkçe açıklama koyduğumuz satırlara kendi fotoğraflarınızın adını, altına da resimin alt yazılarını değiştirerek yazın
Bu işlemi dilediğiniz kadar fotoğraf için yapabilirsiniz, ama unutmayın, fotoğraflar çoğalırsa, onları yükleme zamanı da uzar.

Adım 3: Artık slide showunuzun web adresini (tabii bunların öğrendiğiniz sayfaların adresini de) bir kaç arkadaşınıza iletebilirsiniz!

Tasarımı kolay bir " SLIDESHOW " scripti

ByOnur58