Cara Membuat Album Foto Slideshow Dengan Javascript dan HTML

Cara membuat album foto slideshow dengan javascript dan HTML. Berikut adalah salah satu contoh script yang bisa digunakan untuk menampilkan koleksi foto kamu di blog dalam bentuk slideshow. Kalau kamu belum tau banyak tentang  javascript dan HTML, cukup perhatikan pada bagian yang bertanda merah dan biru saja. Pada bagian yang bertanda merah adalah nama dan url dari gambar yang ingin kamu tampilkan. Pada bagian ini kamu bisa menambahkan gambar sesuka hatimu, tapi formatnya seperti yang tertera , jangan pakai format lain.
theimage[0]=["Twitter", "http://i1123.photobucket.com/albums/l559/porezer1/th_twitter.jpg"];
Ket:
[0] = Nomor Urut Foto
“Twitter” = Nama Foto
“http://i1123.photobucket.com/albums/l559/porezer1/th_twitter.jpg”= URL Foto Kamu
Jadi, kalau kamu ingin menambahkan gambar, tinggal tambahkan baris baru dibawahnya seperti ini:
theimage[1]=["Nama Foto", "URL Foto"];
Dan seterusnya…
Pada bagian yang berwarna biru adalah digunakan untuk mengatur lebar dan tinggi album foto slideshow yang ingin kamu tampilkan. Ukurannya harus disesuaikan dengan ukuran template atau widget dari blog kamu. Kamu tinggal mengganti angka yang tertera.
Berikut script lengkap cara membuat album foto slideshow dengan javascript dan HTML:
<script language=”JavaScript”>
theimage = new Array();
theimage[0]=["Twitter", "http://i1123.photobucket.com/albums/l559/porezer1/th_twitter.jpg"];
playspeed=3000;
dotrans=1;
transtype=’blendTrans’;
transattributes=’duration=1,transition=23′;
randomorder=1;
playdiffernce=500;
autostart=0;
preloadslides=1;
function makeRandom() {
tempimage = new Array();
for(p=0;p<theimage.length;p++){
for(p1=0;p1>-1;p1) {tempNum = Math.floor(Math.random()*theimage.length)
if(!tempimage[tempNum]){tempimage[tempNum]=theimage[p];break}}}
for(p=0;p<theimage.length;p++)theimage[p]=tempimage[p]}
if(randomorder==1)makeRandom()
function preloadSlide() {for(k=0;k<til;k++) {theimage[k][1]=new Image().src=theimage[k][1];}}
window.onload=function(){
if(window.preloadslides)preloadSlide();if(window.autostart)slidePlay();}
window.onresize=function(){
if(document.layers)this.location=this.location;}
</script>
<form name=”slideshow”>
<div align=”CENTER”>
<table border=0 cellpadding=0 cellspacing=0 bgcolor=”black”>
<tr>
<td align=center>
<div align=”center”>
<center>
<table border=0 cellpadding=10 cellspacing=1 style=”border: 1 solid #008080″>
<tr>
<td align=center bgcolor=”#0099CC” colspan=”5″ style=”border: 1 solid #000000″><font
face=”Verdana,Arial,Helvetica” size=”2″><b>My Photo
Slideshow</b></font
face=”verdana,arial,helvetica”></td>
</tr>
<tr>
<td align=center bgcolor=”#FFFFFF” colspan=”5″ width=”600″ height=”200″ style=”border: 1 solid #000000″><a href=”#”><script>document.write(‘<IMG STYLE=”filter:’+transtype+’(‘+transattributes+’);” SRC=”‘+theimage[0][1]+’” BORDER=0>’)</script></a></td>
</tr>
<tr>
<td align=center bgcolor=”#0099CC” colspan=”5″ style=”border: 1 solid #000000″><select onchange=”slideImage(document.slideshow.theimages.selectedIndex);” style=”background-color: #0099CC; color: #000000; font-family: Verdana, Arial, Helvetica; font-size: 10pt; font-weight: bold; border: 1 solid #000000″ size=”1″></select><script>
for (y=0;y<theimage.length;y++) {document.slideshow.theimages[y]=new Option(theimage[y][0])}</script>
</td>
</tr>
<tr>
<td align=center bgcolor=”#0099CC” style=”border: 1 solid #000000″><b><font
color=”#000000″><a
href=”javascript:slideImage(0);” onfocus=”this.blur()”><font
face=”Verdana,Arial,Helvetica” size=”2″ color=”#000000″>&lt;&lt;<font
face=”Verdana,Arial,Helvetica” size=”2″ color=”#000000″><script>imgStop=new Image().src=’../beta/slideshow/b4.jpg’;</script></font
face=”verdana,arial,helvetica”></font
face=”verdana,arial,helvetica”></a
href=”javascript:slideimage(0);”></font
color=”#000000″></b></td>
<td align=center bgcolor=”#0099CC” style=”border: 1 solid #000000″><a
href=”javascript:slideImage(0);”><b><font face=”Verdana,Arial,Helvetica”
size=”2″ color=”#000000″>&lt;</font></b></a
href=”javascript:slideimage(0);”></td>
<td align=center bgcolor=”#0099CC” style=”border: 1 solid #000000″><a
href=”javascript:slidePlay();”><b><font face=”Verdana,Arial,Helvetica”
size=”2″ color=”#000000″>Play/Stop</font></b></a
href=”javascript:slideplay();”></td>
<td align=center bgcolor=”#0099CC” style=”border: 1 solid #000000″><a
href=”javascript:slideImage(i+1);”><b><font face=”Verdana,Arial,Helvetica”
size=”2″ color=”#000000″>&gt;</font></b></a
href=”javascript:slideimage(i+1);”></td>
<td align=center bgcolor=”#0099CC” style=”border: 1 solid #000000″><a
href=”javascript:slideImage(theimage.length-1);” onfocus=”this.blur()”><b><font
face=”Verdana,Arial,Helvetica” size=”2″ color=”#000000″>&gt;&gt;</font
face=”verdana,arial,helvetica”></b></a
href=”javascript:slideimage(theimage.length-1);”></td>
</tr>
</table>
</center>
</div>
</td>
</tr>
</table>
</div>
</form>
<script>
with(document){i=0,play=0,di=images,dl=links,form=slideshow,til=theimage.length}
function slideImage(num) {
i=num%til;if(i<0)i=til-1;
if(document.all&&dotrans==1)eval(‘di.slideimage.filters.’+transtype+’.apply()’)
di.slideimage.src=theimage[i][1];
if(document.all&&dotrans==1)eval(‘di.slideimage.filters.’+transtype+’.play()’)
if(form.theimages)form.theimages.selectedIndex = i;
if(form.slidebox)form.slidebox.value = theimage[i][0];
if(form.slidecount)form.slidecount.value = “Image “+(i+1)+” of “+til;
if(form.slidespeed)doSpeed(0);}
function slidePlay() {
if (!window.playing) {
slidePlaying(i+1);
if(form.play)form.play.value=” Stop “;}
else {playing=clearTimeout(playing);
if(form.play)form.play.value=” Play “;}
if(di.imgPlay){setTimeout(‘di.imgPlay.src=”‘+imgStop+’”‘,1);imgStop=di.imgPlay.src}}
function slidePlaying(num) {
playing=setTimeout(‘slidePlaying(i+1);slideImage(i+1);’, playspeed);}
slideImage(0);
</script>