Cara Membuat Simple Controls Gallery | Buku Catatan si Ugi

Simple Controls Gallery ini dapat menampilkan gambar sebagai tayangan slide otomatis diputar secara eksplisit dan dapat juga secara manual.

Simple Controls Gallery merupakan Kontrol Gallery sederhana yang dapat memutar dan menampilkan gambar dengan fading ke tampilan sebelumnya, dengan menggunakan kontrol navigasi yang akan muncul ketika mouse digulirkan diatas Gallery.



Contoh:
(Letakan cursor diatas gambar...)



Cara Memasang Simple Controls Gallery

Langkah Pertama:
Tambahkan scrip berikut ini diatas kode </head>.

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

<style type="text/css">

/*Make sure your page contains a valid doctype at the top*/
#simplegallery1{ //CSS for Simple Gallery Example 1
position: relative; /*keep this intact*/
visibility: hidden; /*keep this intact*/
border: 10px solid darkred;
}

#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
}

</style>

<script type="text/javascript" src="http://caprt3a.fileave.com/SimpleControlsGallery/simplegallery.js">

/***********************************************
* Simple Controls Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>


Langkah Kedua:
Pasang script berikut ini untuk membuat Simple Controls Gallery, letakan pada <body> halaman anda.

<div id="simplegallery1"></div>


<script type="text/javascript">

var mygallery=new simpleGallery({
wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "http://en.wikipedia.org/wiki/Swimming_pool", "_new", "There's nothing like a nice swim in the Summer."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "", ""],
["http://i30.tinypic.com/531q3n.jpg", "", "", "Eat your fruits, it's good for you!"],
["http://i31.tinypic.com/119w28m.jpg", "", "", ""]
],
autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//Keyword "this": references current gallery instance
//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>


Keterangan:
Silahkan konfigurasikan sesuai keinginan anda, seperti;
  • wrapperid: "simplegallery1", / / ID dari kontainer galeri utama,
  • dimensi: [250, 180], / / lebar / tinggi dari galeri dalam piksel.
  • imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "http://en.wikipedia.org/wiki/Summer", "_new", "There's nothing like a nice swim in the Summer."], / / Sebuah array yang berisi gambar dan deskripsi yang akan ditampilkan.
  • autoplay: [true, 2500, 2], / / [ memungkinkan Anda mengatur apakah galeri harus memainkan secara otomatis bila halaman sudah terbuka, dan jika demikian, jeda antara slide dan siklus untuk berjalan sebelum berhenti.
  • dan lain sebagainya...

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







 

Anda sudah mengaktifkan penyaringan konten ( AdBlocker di Aktifkan )

Mohon maaf untuk sementara Anda tidak dapat melihat halaman ini, silahkan kembali lagi setelah Anda menonaktifkan filter yang Anda gunakan. Abaikan