By Girant_31
Slide Show Humble jQuery ini ane share atas permintaan sobat Tukang Colong..
yg mengeluh karena banyaknya banner yg harus dipajang di halaman depan..
Baiklah..
Karena ane orang nya baik hati dan tidak sombong..
ane buat Slide show Humble jQuery ini..
Tapi kekurangan Slide Show Humble jQuery ini adalah :
Kita harus mengklick tombol star terlebih dahulu untuk melihat slide show gambar berikutnya.
Demo Slide Show Humble jQueryKlik disini untuk melihat demo Slide Show Humble jQuery
Gimana ???
Ada yang tertarik memasang slide show ini??
sebenarnya sangat mudah untuk memasang nya loh..
Begini neg caranya :
Langkah 1
Letakan kode di bawah ini diatas kode </head>
<script type='text/javascript'> 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); } } </script>
Simpan template dan lanjut ke tahapan selanjutnya.
Langkah 2
Tambahkan kode dibawah ini pada add gadget HTML/Java Script
<center> <form name=slideform> <tr> <td align=center bgcolor="white"> <b>Slideshow Humble jQuery</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 images1.jpg, images2.jpg, images2.jpg dengan url gambar/banner sobat.
- Aturlah ukuran Widht dan Hight nya sesuai dg sidebar or keinginan sobat.
- Kata-kata Slideshow Humble jQuery bisa sobat rubah sesuai keinginan sobat.
Source Code Slideshow HumbleKlik disini untuk mengambil semua source code Slideshow Humble jQuery
Langkah 3
Simpan dan lihat blog sobat.
Langkah 4
Selesai.
Langkah 5
Semoga bermanfaat..
Terimakasih.
jQuery
,
Tips n Trik
Title Posted By On Tag Comments Subscribe |
: Slide Show Humble jQuery : Agus Adi S. From Girant_31 Blog : Kamis, Juni 03, 2010 : jQuery , Tips n Trik : 70 People Commented : RSS Feed or leave a response for this article, Here. |
berkunjung nich
infonya bagus
terima kasih dan semoga sukses selalu.
Ah suka merendah nih..
ga blh gtu loh mas..
@3810806552186329379.0
Gpp ko mas..
mw di save dilemari jg monggo.. hehehe..
@4557891300842391532.0
Iya mas.. harus itu.. biar ga nyesel..
@3989858932337130459.0
Sama2 ya..
Makasih ya..
n sukses jg..
hemmm kerennn infonya,sambil mikir gimana caranya ya ?? hehe...
have a great day...
heheh tar q coba ahhh
:D
makasih untuk tutorialnya
:D
Thanks..
Iya mas..
Asyik seh, tp mumet.. hehe..
Monggo mas...
Semoga berhasil ya mas..
Sama2 mas..
Monggo mas..
Terimakasih ats kunjungan nya..
Monggo mas..
mw diapain jg boleh ko.. hehe
ya boleh lah mas..
masa boleh dong.. hehe..
Sebelumnya maaf aku baru berkunjung Sob...Sukses slalu!!!
Sebelumnya maaf aku baru berkunjung Sob...Sukses slalu!!!
Sebelumnya maaf aku baru berkunjung Sob...Sukses slalu!!!
Iya neg mas..
ane jg dah mumet.. hehe..
Walah.. banyak kali mas kommentsnya.. hehe..
iya mw nya seh gtu mas.. cmn ya berhubung baru bisa bikin nya yg seperti itu mas..
Harap dimaklum ya mas..
makasih banyak ya mas bt apresiasinya..
Sama-sama sob..
wah kangen jg uy lama ga berinteraksi..
sdh coba yg div...div...
n h4.comment
tp gagal... :( aneh sekali...
Sebenarnya pengen sekali mas..
cuman ane masih takut tidak sesuai nantinya..
Untuk halaman komentar seperti disini
tingkat kegagalan nya masih tinggi mas..
dikarenakan faktor ukuran main template masing2 tuh berbeda2..
untuk penggunaan CSS sih mungkin bisa saja dg auto widht,
tapi ini ada penyematan gambar jg mas..
jadi.. ini jg ane lg coba2 di template yg lain mas, kalo semuanya berjalan lancar.. sesegera mungkin ane publikasikan ko mas..
mohon pengertian nya mas bt yg satu ini, bkn nya ane pelit loh ya..
nah.. untuk yg div.. div.. itu contoh low dari widht masing2 template tuh berbeda mas..
begitu..
terimakasih ya mas bt saran nya.. jjr ane seneng banget..
Pastinya mas...
karena ini memakai java script mas..
Soale beberapa model "slide show" nggak bisa di akses lewat ponsel...
mohon infone....
makasih sharingnya untuk slide show ...
terima kasih
sygnya slidenya gak lngsung jln sendiri y mas? musti pake star
Waduh gmn ya mas..
ane ga ada media (HP) bt mengimplementasikan nya..
jd ga tw bs atau ga di coba di hp..
selama ini ane nyoba nya sll di PC mas..
mohon mf mas ats keterbatasan nya..
Makasih..
Ah masa sih mas..
jelek gini blog ane mah..
Yg cantik2 mah jngn diliatin mlu tw pak liek..
ntar kesenengan mereka.. hehe..
Monggo..
Nggeh mas..
met wiken jg ya..
Jangan diliatin mllu mas..
Ntar jd malu dech script2 nya.. hehe..
Wah monggo2 mas..
low ada penemuan baru kasih w ane ya mas..
Iya mas..
Maklum ane masih belajar mas..
eh btw ganti casing lagi yah blognys ^___^
Slide show tips yang mak nyus
btw klo coklat hitam silverqueen ada bro
Iya neg.. wajah baru..
Thanks mas..
terimakasih ats kunjungan nya..
Oh.. trus harusnya yg mna sob??
Sorry coz ane blm mengenal btul sob..
Kalo itu mah banyak kale mas..
jd maksudnya coklat seperti itu toh??
tes
tes
Oia.. ga kepikiran kesitu ane..
ya dh gini.. yg ini memang tidak sesuai dg yg di inginkan pastinya..
ane baru buat lg update-an slideshow yg diatas,
dg fasilitas auto slide(tanpa click), trus vertical scrolling, trus auto break, truuuuuus yg pastinya bisa dibubuhi link digambarnya..
untuk demo, bisa dilihat DISINI
Gmn???
Ane sudah bikin mas..
dan sudah ane publikasikan di postingan ane terbaru..
semoga yg seperti itu ya mas yg mas harapkan..