Preview
Demo this Article
i
ni slide show gambar dengan jQuery yang bisa diselipkan link di dalamnya, untuk sekilas demo bisa dilihat diatas artikel ini.Sekilas keterangannya :
- Kode yang berwarna Biru [650, 550] penyesuaian lebar dan tinggi gambar yang dipakai.
- Kode yang berwarna Kuning adalah alamat gambarnya
- Pemasangan lebih gampang didalam postingan atau ditaruh dalam gadget HTML/Javascript.
<div class="galeri">
<div id="myslideshow"></div><div class="pencet"><a class='tombol' href="javascript:translideshow1.navigate('back')" id='left'>BACK</a> <a class='tombol' href="javascript:translideshow1.navigate('forth')" id='right'>NEXT</a></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script><script src="https://sites.google.com/site/cuerosbhelatos/translucentslideshow.js" type="text/javascript"></script>
<script type="text/javascript">var translideshow1=new translideshow({
wrapperid: "myslideshow", //ID of blank DIV on page to house Slideshow
dimensions: [500,400], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [//insert link ["image_path", "optional_link", "optional_target"]
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbw62NAWFt7abe-sPtja8-u853e9vSH2D4BUeQ1JH9Ufrd94koTW0j-w9biV7TojlHD7N6Yt7Q6nE9uIL-LAPiyyirLRYJhQ5L0-0o70X27uBUxQTEKvV_GmCYbf1dPb_JNwPnqUydb08E/s1600/rain4.jpg", "http://cuerosbhelatos.blogspot.com", "_new"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWzjBj4LpvFO8j_N9TaD6SF722Fug_e9saVjjC8rp6iqi0doTuujKXIPVGdKoTfjPNN3EURztI9ORneYe2eQFZ0A2EKmcsZENpSvUhUoDnsP6cYNaju4glZGsXQ6-wBKSNBsnXjnJo9sDK/s1600/rain1.jpg", "http://cuerosbhelatos.blogspot.com", "_new"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGBwNfI9XwvZfFhYSfDehkmVXdWQrU6ih-7uwf-NorW0sVIK6WGlxmu8Y4AF1OVA0tyBcyyBQDYJ2e8nj-uiJqLkPEqB8js9Zc6gqSMDWEJQp4PXQxcIArjl0v7ZuOARTL-fPrNhZO0zQm/s1600/rain2.png", "http://cuerosbhelatos.blogspot.com", "_new"],
["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo8N93SwVNibH8wOypM2rGWtUp0zADc_RtFE_b5uzmhC-UpQmgecCPK2CVHPsO3x6YaWfc5kDLKJXcfytPNtGtZyonFCodEWkh6ou-xLSBmI9RaKprA_UrgJ-xrfHOlM_CCY1q_AZaLlwL/s1600/rain3.jpg", "http://cuerosbhelatos.blogspot.com", "_new"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2000, cycles:100, pauseonmouseover:true},
orientation: "h", //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 900 //transition duration (milliseconds)
})</script>
<style>
/*galeri*/
.galeri{position:relative;
}
#myslideshow{background:#424242;margin:0 auto;
border-radius:5px;border: 2px solid #BDBDBD;box-shadow:0 0 10px #000,inset 0 0 0 20px #000;
}
#myslideshow img{width:94%;height:93%;box-shadow:0 0 0 5px #ddd;
}
.pencet{text-align:center;margin:5px;
}
.tombol{background: #000; border-radius: 5px; border: 2px solid #BDBDBD; box-shadow: 0 0 5px #000; color: #df7401; font:bold 12px Verdana;padding: 5px;
}
.tombol:hover{background: #f00;color:#ddd;
}
#left{margin-right:50px;
}
#right{margin-left:50px;
}
/*galeri*/
</style>
Selamat mencoba semoga bermanfaat...!!!
Lihat Sumbernya : www.dynamicdrive.com
Posted On : 2 Januari 2012 Time : 15.17