-->
 
Translucent Slideshow Script

BERANDAARCHIVEQUR'ANYASINTAHLILAMALAN

     
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.
Kode-kodenya :
<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"]
  ["http://4.bp.blogspot.com/-e4-fVK1Csn4/ULr2wKrbasI/AAAAAAAACZk/kQuZulCkCac/s1600/rain4.jpg", "http://cuerosbhelatos.blogspot.com", "_new"],
  ["http://4.bp.blogspot.com/-TalgfiZkBLU/ULr2uY8GqdI/AAAAAAAACZA/4PWiN8PhYfo/s1600/rain1.jpg", "http://cuerosbhelatos.blogspot.com", "_new"],
  ["http://3.bp.blogspot.com/-kToivN3s0CY/ULr2uy5Lk5I/AAAAAAAACZM/O2tShKXlQAM/s1600/rain2.png", "http://cuerosbhelatos.blogspot.com", "_new"],
  ["http://3.bp.blogspot.com/-IJVXwODOqqE/ULr2vhts8dI/AAAAAAAACZY/XCpGH_uDBDs/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
SHARE TO :
| | Powered By : C.(BH-elatos) | Copyright By : cuerosbhelatos | |