Make in place Image Zoom use Zoomio

Ada beberapa update artikel bagi kalian pelanggan web dynamicdrive! Pada halaman dynamic drive CSS library coba tengok sendiri? Sekarang AA Koben mau berbagi pada halaman JavaScript pada web tersebut yang menceritakan bagaimana cara membuat zoom pada gambar dengan jQuery script ;) Proyeknya di beri nama dengan judul Zoomio jQuery in place Image Zoom. Bagi sobat yang ingin memasang fitur ini, konten blog harus banyak berkoar-koar dengan gambar yah :)) Sebelum ke acara tutorial, ada baiknya sobat baca-baca dulu trik serupa yg sudah pernah gue bahas cloud zoom on blog.
Like this...

Or...

Please dont forget to read this css zoom and product magnification without JavaScript :-bd

Kenapa AA jatuhkan pilihan cara men-zoom image hasil karya dari tim dynamic-drive! Selain script dan CSS yg relatif sedikit (kecil), tetapi kita bisa membuat beberapa opsi pemakaian: standard demos, dynamically changing the zoomable image's src to create an image gallery & calling zoomio() more than once on the same image.

Silahkan sobat download terlebih dahulu bahan-bahannya di halaman zoomio.htm (zoomio.css & zoomio.js) Di dalam code CSS sobat buat lagi kode untuk mengatur lebar dan tinggi image!

#zoomiocontainer { /* container containing enlarged image (native sized image) */
 position: absolute;
 z-index: 1000;
 overflow: hidden;
 background: white;
 visibility: hidden;
}
#zoomiocontainer img { /* image inside zoom container */
 width: auto !important;
 height: auto !important;
 position: absolute !important;
 display: block !important;
}
#zoomiocontainer.mobileclass { /* CSS class added to zoom container on mobile OS */
 overflow: scroll;
 -webkit-overflow-scrolling: touch;
}

/* CONTOH KODE CSS CUSTOMIZE */
.sampleimage {
 width: 400px;
 height: auto;
}
.blur { 
filter: url(#blur-effect-1); 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'blur-effect-1\'><feGaussianBlur stdDeviation=\'3\' /></filter></svg>#blur-effect-1");
-webkit-filter: blur(3px);
}

Kode CSS custom tersebut yg nanti akan di panggil dengan jQuery script?

<script type='text/javascript'>
jQuery(function($){ // on DOM load
 $('.sampleimage').zoomio({
  fadeduration: 450
 })
})
</script>

Syntax HTML seperti berikut<img class="sampleimage blur" src="LINK-GAMBAR" alt="" />Beres deh, dengan begitu sobat sudah mendapatkan trick zoomio versi standar. Kalau mau versi lainnya silahkan datang dan pelajari di source sumber

www.dynamicdrive.com/dynamicindex4/zoomio.htm

Waktu memosting free HTML tester with ACE feature saya kelupaan bonus link! Di sini saja deh bonusnya yah...

Hyro - popcode - jhc-webitor - htmleditor - html live editor - SimpleWebEditor - choped - Html5PreviewEditor - Code editor - edit - code player - qckMeddler - code bit - Editor - HTMLTester - htmledit - codePlayground - fiddly - fiddle - 1797 - htmlbook style editor - HTML HEX EDITOR - html2canvas - live - CodePlayer - MZMobileHtmlEditor - playground - kodeWeave - sandbox

See you :-h