08
Okt
2009
Okt
2009
Cara membuat slideshow
Posted by: adminCara membuat foto/image slideshow.
Oke langsung aja tanpa panjang lebar, kalau lebar mulutnya siapa..??
Mari ikuti langkah-langkah dibawah untuk membuat slideshow seperti contoh demo.
Demo:
Langkah-langkahnya adalah:
Letakkan kode berikut dibagian <head> website/blog kamu:
Salin kode JAVASCRIPT
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var rotate_delay = 5000; // delay in milliseconds (5000 = 5 secs) current = 0; function next() { if (document.slideform.slide[current+1]) { document.images.show.src = document.slideform.slide[current+1].value; document.slideform.slide.selectedIndex = ++current; } else first(); } function previous() { if (current-1 >= 0) { document.images.show.src = document.slideform.slide[current-1].value; document.slideform.slide.selectedIndex = --current; } else last(); } function first() { current = 0; document.images.show.src = document.slideform.slide[0].value; document.slideform.slide.selectedIndex = 0; } function last() { current = document.slideform.slide.length-1; document.images.show.src = document.slideform.slide[current].value; document.slideform.slide.selectedIndex = current; } function ap(text) { document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop"; rotate(); } function change() { current = document.slideform.slide.selectedIndex; document.images.show.src = document.slideform.slide[current].value; } function rotate() { if (document.slideform.slidebutton.value == "Stop") { current = (current == document.slideform.slide.length-1) ? 0 : current+1; document.images.show.src = document.slideform.slide[current].value; document.slideform.slide.selectedIndex = current; window.setTimeout("rotate()", rotate_delay); } } // End --> </script> |
Kemudian letakkan kode berikut dibagian body konten website/blog kamu:
Salin kode DIV
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <center> <form name=slideform> <tr> <td align=center bgcolor="white"> <b>Image Slideshow</b> </td> </tr> <div style="border: 1px solid #ccc; padding-top: 10px; margin: 3px; overflow: auto; width: 350px; height: 130px; "> <tr> <td align=center bgcolor="white"> <img src="images1.jpg" name="show"> </td> </tr> </div> <table cellspacing=1 cellpadding=4 bgcolor="#000000"> <tr> <td align=center bgcolor="#C0C0C0"> <select name="slide" onChange="change();"> <option value="images1.jpg" selected>Gambar 1 <option value="images2.jpg">Gambar 2 <option value="images3.jpg">Gambar 3 </select> <input type=button onClick="first();" value="|<<" title="Beginning"> <input type=button onClick="previous();" value="<<" title="Previous"> <input type=button name="slidebutton" onClick="ap(this.value);" value="Start" title="AutoPlay"> <input type=button onClick="next();" value=">>" title="Next"> <input type=button onClick="last();" value=">>|" title="End"> </td> </tr> </table> </form> </center> |
Ganti file images1.jpg, images2.jpg dan images3.jpg dengan file gambar milik kamu.
Selesai! Selamat mencoba..

memuat halaman
iklan




Postingan yang lain:




klo mo slideshow yg lebih mantab dan ada efek fadenya, bro bisa download scriptnya disini: http://dev.herr-schuessler.de/jquery/popeye/
atau kalau bro menggunakan wordpress, pluginnya bisa didownload disini: http://wordpress.org/extend/plugins/popeye/
thanx kawan, arikelnya keren.. salam sukses
ko yang ane gambarnya ga ganti gan..?? bingung ane gan ud ngulik2 ga ketemu
klo file gambarnya kegedean slide nya agak susah sob.. jd musti diresize dulu..
Josss!
mas gimana mau ambil datanya kalau blog mas pake anti copas
klo mo copas kodenya, klik aja tulisan ‘Salin kode’
haii ..
haii smuaaa
Gan Kode’y taruh mn ?
msh bingung q, g jelas naruh’y..
1. kode’y taruh atas atau, bwh ?
2. body ?
Mohon penjelasan’y lagi, Tq Gan !!!
kode yg prtama itu pasang diatas baris
</head>klo kode yg kedua itu bisa dipasang dibagian ‘Gadget’.
..slideshow yg sprti ini mmg agak berat mas, tergantung ukuran gambar..
kode yang pertama g isa Gan, mlah error…
Tq info’y, saya coba dlu..
klo msh bingung, tanya lgi gpp kan ?
kode yg pertama saya taruh di ats kok malah error ..
mungkin itu xml error mas..
mas bisa lihat cara pasang kodenya dipostingan aku yg ini >>
wah bg bgt infonya….
ane cobain ya bozz….thank infonya
keren nih… tapi kayakna bikin blog tambah berat de’. . . . !! ..
ya, klo menggunakan gbr berukuran besar, loadingnya jd berat..
Wahjadi tergantung gambarnya yah.? kalo gambar berat jadi loading juga berat ya?
iya mas tergantung gambarnya.
klo mo slideshow yg lumayan cepat bisa menggunakan jquery slideshow
wah… keren negh. mas, tp kalau misah option value=”image.jpg” nya saya ganti dengan bs gak mas ? soal nya saya msh pakai hosting gb.Photobucket, heheee
terus kl slide ky gini tuh bikin loading blog lelet gak sih ? thn’x
bisa kok mas, saya ngetesnya juga pke photobucket.
klo loading blog tergantung ukuran gambar mas, semakin besar ukuran gambar semakin berat loading blognya
Nah loh…error euy…..
msukin na kmn ni ???
java script??
kode yg pertama pasang di html editor tepat di atas baris
</head>kode yg kedua pasang di bagian gadget atau widget
bingung gan, maklum nubi gak ngerti bahasa gituan…
pkai plugin aja mas.. lebih gampang..
saya hanya mengiklankan saja ya . saya disini hanya ingin membagi2kan ilmu kepada kalian.
mengenai problem tentang social network, semisal facebook, twitter. disini anda akan melihat akun org lain atau yg lagi chatingan sama seseorang anda bisa melihat org yg lagi chatingan itu dan aplikasi wirshark ini bisa langsung mendetek ke alamat email seseorang , silahkan boleh dicoba . http: //www.ziddu.com/download/17047997/wireshark-win32-1.6.2.rar.html