Cara Membuat Divviewer Image Viewer
Divviewer Image Viewer memungkinkan anda menampilkan gambar ukuran kecil dalam suatu area. Dengan meng-klik gambar tersebut, gambar akan terlihat menjadi besar sesuai dengan skala atau dimensi yang telah ditentukan sebelumnya.
Setelah melihat gambar dengan ukuran besar tadi, tanpa harus keluar dari halaman anda dapat menutup gambar tersebut dengan menekan sebuah tombol "X" pada sisi kanan atas gambar.
Divviewer Image Viewer ini juga dapat menampilkan gambar untuk sebuah Link, seperti halnya efek gambar yang dihasilkan dari Divviewer Image Viewer ini.
GEDUNG PUSAT PEMERINTAHAN Kota Tangerang
Dibangun di atas tanah seluas 49 hektar dengan luas halaman 6.612 ,24 m2 terdiri dari lima lantai dan menghabiskan biaya sebesar Rp. 60 Milyar dalam 3 tahun anggaran, gedung ini dirancang oleh Ir. Slamet Wirasonjaya. Tujuan dibangun gedung ini adalah dipergunakan untuk kegiatan legislatif dan eksekutif, sehingga penyelenggaraan kegiatan tersebut akan terkonsentrasi dalam satu area.
sumber: javascriptkit
Setelah melihat gambar dengan ukuran besar tadi, tanpa harus keluar dari halaman anda dapat menutup gambar tersebut dengan menekan sebuah tombol "X" pada sisi kanan atas gambar.
Divviewer Image Viewer ini juga dapat menampilkan gambar untuk sebuah Link, seperti halnya efek gambar yang dihasilkan dari Divviewer Image Viewer ini.
Contoh:
(Letakan cursor pada Link atau Gambar lalu klik..)GEDUNG PUSAT PEMERINTAHAN Kota Tangerang
Dibangun di atas tanah seluas 49 hektar dengan luas halaman 6.612 ,24 m2 terdiri dari lima lantai dan menghabiskan biaya sebesar Rp. 60 Milyar dalam 3 tahun anggaran, gedung ini dirancang oleh Ir. Slamet Wirasonjaya. Tujuan dibangun gedung ini adalah dipergunakan untuk kegiatan legislatif dan eksekutif, sehingga penyelenggaraan kegiatan tersebut akan terkonsentrasi dalam satu area.Cara Memasang Divviewer Image Viewer
Langkah Pertama:
Letakan script berikut ini diatas kode </head>
<script src='DV.js' type='text/javascript'>
/***********************************************
* Pagination Combo Box- by Axel Schneider (http://axelschneider.info/)
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
* Please keep this notice intact
***********************************************/
</script>
Langkaah Kedua:
Pasang script Contoh berikut ini untuk membuat Divviewer Image Viewer, letakan pada <body> halaman anda.
<a href="#" onclick="dv.showDV(pancake); return false">Kota Tangerang</a>
<a href="#" onclick="dv.showDV(bigbaby); return false"><img align="left" border="0" height="80" src="http://img163.imageshack.us/img163/7407/puspemkot.jpg" width="119" /></a>
<script type="text/javascript">
//Define your images using arbitrary variables, to be passed in as arguments later down the page:
var pancake = '<img src="http://img339.imageshack.us/img339/613/kotatangerang.jpg" width="300" height="375" border="0" alt="">'
var bigbaby = '<img src="http://img163.imageshack.us/img163/7407/puspemkot.jpg" width="1075" height="717" border="0" alt="">'
</script>
Keterangan:
Silahkan definisikan gambar untuk masing-masing variables.sumber: javascriptkit
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