Cara Membuat Image Panner and Zoomer
Image Panner and Zoomer, memungkinkan anda membatasi gambar dengan ukuran besar ke wadah yang lebih kecil, dalam bentuk cuplikan atau klip. Tampilan gambar tidak sekaligus dapat dilihat, karena porsinya memang tersembunyi.
Dengan Efek Image Panner and Zoomer ini, gambar dapat dilihat sepenuhnya dengan melakukan dragging atau panning didalam gambar. Fitur zoom opsional juga dapat digunakan untuk memperbesar sekaligus mengecilkan sebuah gambar dalam waktu yang sama.
Demo:
(Letakan cursor pada gambar, lihat "Panner" lalu lakukan dragging atau panning dengan mengunakan mouse wheel.)
Keterangan:
(Lihat controls zoom in/out di kanan bawah gambar, untuk memperbesar/ memperkecil gambar.)Cara Memasang Image Panner and Zoomer
Langkah Pertama:
Letakan kode css dan javascript berikut ini diatas kode
<style>
/* demo styles. Remove if desired */
#pcontainer1{
width: 600px;
height: 400px;
}
@media screen and (max-width: 780px){ /* responsive setting */
#pcontainer1{
width: 100%;
height: 400px;
}
}
</style>
<link rel="stylesheet" href="imagepanner.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.kinetic.min.js" type="text/javascript"></script>
<script src="jquery.mousewheel.min.js"></script>
<script src="imagepanner.js">
/***********************************************
* Simple Image Panner and Zoomer v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script>
var panimage1 // register arbitrary variable
jQuery(function($){
panimage1 = new imagepanner({
wrapper: $('#pcontainer1'), // jQuery selector to image container
imgpos: [100, 300], // initial image position- x, y
maxlevel: 4 // maximum zoom level
})
})
</script>
Langkah Kedua:
Gunakan syntax seperti contoh berikut ini untuk membuat "Image Panner and Zoomer", letakan dalam tag <body> atau dimanapun anda ingin menampilkannya.
<div id="pcontainer1" class="pancontainer">
<img src="http://www.dynamicdrive.com/dynamicindex4/mercedes.jpg" width="1280" height="782" />
</div>
<br />
<button onClick="panimage1.zoom('+1')">zoom In</button> <button onClick="panimage1.zoom('-1')">zoom out</button> <button onClick="panimage1.zoom(1)">reset</button>
Keterangan:
Gambar dapat ditempatkan dalam elemen DIV dengan ID unik dan class="pancontainer". Berikan ukuran lebar dan tinggi elemen untuk menentukan dimensi area gambar yang terlihat (misal: 400px by 300px).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