Tips Blog - Cara Mudah Membuat Slide Image Gallery

Tips Blog kali ini adalah Cara Mudah Membuat Slide Image Gallery. Slide ini memiliki loading yang relatif cepat, lucu, dan Image Gallery ini sangat terkendali atau slideshow dengan memiliki tombol pilihan jeda.

Slide ini menggunakan Jquery, JavaScript dan CSS dan HTML dan berkat dorongan dinamis oleh salah satu blogger (bernama muhammad) mampu membuat widget blogger yang kompatibel yang akan menampilkan posting fitur, foto, gambar dll dengan cara yang indah.

Cara membuat nya sangat mudah,,sobat tinggal instal melalui Edit HTML saja, dan tambahkan Elemen HTML/Java Script di sidebar blogger sobat.

<style type="text/css">
#simplegalleryOW {
//CSS for sample Gallery
position: relative;
visibility: hidden;
border: 5px solid black;
margin: auto;
}

#simplegalleryOW .gallerydesctext {
//CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
font-family: calibri;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/image-gallery.js">
</script>

<script type="text/javascript">
var mygalleryOW=new simpleGallery({
wrapperid: "simplegalleryOW", //ID of main gallery container,
dimensions: [300, 200], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [

["IMAGE LINK 1 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"], ["IMAGE LINK 2 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"], ["IMAGE LINK 3 HERE","#", "_new", "IMAGE DESCRIPTION HERE"], ["IMAGE LINK 4 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"], ["IMAGE LINK 5 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"]
],
autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: true,
fadeduration: 1000, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
})
</script>
<div id="simplegalleryOW"></div>

Pertama mengubah ukuran semua gambar Anda ke dimensi tetap = Untuk mengubah dimensi dari slide Anda hanya perlu merubah kode 300, 200 di mana 300 adalah lebar dan 200 adalah tinggi.
Ganti IMAGE LINK HERE dengan Url gambar sobat sendiri
Ganti # dengan link atau url yang ingin sobat tambahkan ke gambar tertentu.
Ganti IMAGE DESCRIPTION HERE dengan beberapa deskripsi tentang foto. Ini gambaran yang gambar akan muncul di bagian atas ketika user melayang kursor mouse di atasnya. Jika Anda tidak ingin menambahkan deskripsi apapun maka cukup menghapus IMAGE DESCRIPTION HERE.
Jika ingin mengubah dari auto play gambar maka cukup mengubah true menjadi false.
Untuk mengubah interval waktu antara slide selanjutnya dan sebelumnya silahkan edit 2500.
Untuk mengubah font dari deskripsi silahkan rubah calibri dengan nama font sendiri, untuk melihat macam-macam font huruf silahkan klick DISINI.