Slide Show Gambar

Print this page

BACK NEXT

keterangan pembuatannya : Kode yang berwarna Biru [500, 400] 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.
Berikut ini kode yang digunakan :

<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://overlay-basic.googlecode.com/svn/branches/slideshow.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://en.edsd.biz/wp-content/uploads/primery_images/logos/WebHosting.jpg",
"http://amarajen-hht.blogspot.com/", "_new"],
  ["http://img1.123freevectors.com/wp-content/uploads/new/signs-symbols/085-free-web-hosting-logo-design.jpg", "http://amarajen-hht.blogspot.com/", "_new"],
  ["http://www.hostingtechniques.co.uk/sites/default/files/ht_website_hosting_logo.jpg", "http://amarajen-hht.blogspot.com/", "_new"],
  ["http://directory.ac/files/dumblists/logos/1uhost-logo.jpg", "http://amarajen-hht.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>

Artikel Terkait