Membuat 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”%5D;
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:
// <!–[CDATA[
theimage = new Array();
theimage[0]=[“Twitter”, “http://i1123.photobucket.com/albums/l559/porezer1/th_twitter.jpg”%5D;
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
-1;p1) {tempNum = Math.floor(Math.random()*theimage.length)
if(!tempimage[tempNum]){tempimage[tempNum]=theimage[p];break}}}
for(p=0;ptempimage[p]}
if(randomorder==1)makeRandom()
function preloadSlide() {for(k=0;k

My Photo
Slideshow
// <!–[CDATA[
document.write(‘’)
// ]]>
// <!–[CDATA[
for (y=0;y
<<// < Play/Stop > >>

// <!–[CDATA[
with(document){i=0,play=0,di=images,dl=links,form=slideshow,til=theimage.length}
function slideImage(num) {
i=num%til;if(i

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s