Translucent slideshow
Translucent slideshow, Sebuah slide gambar yang dapat ditampilkan horizontal (kiri ke kanan) maupun vertikal (atas ke bawah), dengan efek translucent selama prose berganti kegambar berikutnya.
Tampilan slide dapat diatur otomatis ( berhenti setelah satu kali siklus dan pause saat onMouseover) maupun manual (dengan kontrol bolak-balik atau melompat ke slide tertentu secara langsung).
Demo 1:
back forth
Or go to a particular slide:
1st slide | 2nd slide | 3rd slide |4th slide
Demo 2:
back forth
Cara Memasang Translucent slideshow
Langkah Pertama:
Masukan CSS dan Javascript berikut ini, letakan diatas kode
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
#myslideshow{ /*sample CSS for demo*/
border:2px solid black;
}
</style>
<script src="translucentslideshow.js" type="text/javascript">
/***********************************************
* Translucent slideshow- (c) Dynamic Drive (www.dynamicdrive.com)
* Please keep this notice intact
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>
<script type="text/javascript">
var translideshow1=new translideshow({
wrapperid: "myslideshow", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg"], //["image_path", "optional_link", "optional_target"]
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2000, cycles:2, pauseonmouseover:true},
orientation: "h", //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 400 //transition duration (milliseconds)
})
</script>
Keterangan:
Upload terlebih dahulu ke File Hosting untuk menghindari script yang terlalu banyak.Langkah Kedua:
Pasang contoh kode HTML berikut ini untuk membuat Translucent slideshow, letakan pada <body> halaman anda.
<div id="myslideshow"></div>
<a href="javascript:translideshow1.navigate('back')" style="margin-right:190px;">back</a> <a href="javascript:translideshow1.navigate('forth')">forth</a>
<br />
<b>Or go to a particular slide:</b><br />
<a href="javascript:translideshow1.navigate(0)">1st slide</a> | <a href="javascript:translideshow1.navigate(1)">2nd slide</a> | <a href="javascript:translideshow1.navigate(2)">3rd slide</a> |<a href="javascript:translideshow1.navigate(3)">4th slide</a>
Keterangan:
Silahkan ubah gambar, dimensions: [250, 180], orientation: "h"[Horizontal] atau "v"[Vertikal] yang dapat anda tentukan sendiri.sumber : dynamicdrive
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon