Membuat zoom gambar dengan jquery magnify di blog

Membuat zoom gambar dengan jquery magnify di blog

Membuat efek gambar membesar ketika di klik pada posting blog, dengan kualitas gambar yang tidak jauh beda dengan ukuran sebelumnya, kita bisa memanfaatkan jQuery Image Magnify script v1.1 karya  Dynamic Drive, silahkan lihat demonya :

demo

Berikut adalah langkah-langkahnya :

1. Tempatkan kode berikut diatas </head> atau diatas </body>,:
   <script src='http://code.jquery.com/jquery-2.1.4.min.js' type='text/javascript'/>
   kalau sudah ada walaupun versi dibawahnya, langkah ini lewati saja.
   
2. Copy script dibawah ini (klik button Copy All)
   <script type='text/javascript'> //<![CDATA[ /* jQuery Image Magnify script v1.1 * Author: Dynamic Drive * http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm */ if (screen.width >= 768) { jQuery.noConflict() jQuery.imageMagnify={ dsettings: { magnifyby: 3.5, //default increase factor of enlarged image duration: 300, //default duration of animation, in millisec imgopacity: 0.2 //opacify of original image when enlarged image overlays it }, cursorcss: 'zoom-in', //Value for CSS's 'cursor' attribute, added to original image zIndexcounter: 100, refreshoffsets:function($window, $target, warpshell){ var $offsets=$target.offset() var winattrs={x:$window.scrollLeft(), y:$window.scrollTop(), w:$window.width(), h:$window.height()} warpshell.attrs.x=$offsets.left //update x position of original image relative to page warpshell.attrs.y=$offsets.top warpshell.newattrs.x=winattrs.x+winattrs.w/2-warpshell.newattrs.w/2 warpshell.newattrs.y=winattrs.y+winattrs.h/2-warpshell.newattrs.h/2 if (warpshell.newattrs.x<winattrs.x+5){ //no space to the left? warpshell.newattrs.x=winattrs.x+5 } else if (warpshell.newattrs.x+warpshell.newattrs.w > winattrs.x+winattrs.w){//no space to the right? warpshell.newattrs.x=winattrs.x+5 } if (warpshell.newattrs.y<winattrs.y+5){ //no space at the top? warpshell.newattrs.y=winattrs.y+5 } }, magnify:function($, $target, options){ var setting={} //create blank object to store combined settings var setting=jQuery.extend(setting, this.dsettings, options) var attrs=(options.thumbdimensions)? {w:options.thumbdimensions[0], h:options.thumbdimensions[1]} : {w:$target.outerWidth(), h:$target.outerHeight()} var newattrs={} newattrs.w=(setting.magnifyto)? setting.magnifyto : Math.round(attrs.w*setting.magnifyby) newattrs.h=(setting.magnifyto)? Math.round(attrs.h*newattrs.w/attrs.w) : Math.round(attrs.h*setting.magnifyby) $target.css('cursor', jQuery.imageMagnify.cursorcss) if ($target.data('imgshell')){ $target.data('imgshell').$clone.remove() $target.css({opacity:1}).unbind('click.magnify') } var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', cursor:'zoom-out'}).appendTo(document.body) /* var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', cursor:'zoom-out'}).appendTo(document.body) */ $clone.data('$relatedtarget', $target) //save $target image this enlarged image is associated with $target.data('imgshell', {$clone:$clone, attrs:attrs, newattrs:newattrs}) $target.bind('click.magnify', function(e){ //action when original image is clicked on var $this=$(this).css({opacity:setting.imgopacity}) var imageinfo=$this.data('imgshell') jQuery.imageMagnify.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images var $clone=imageinfo.$clone $clone.stop().css({zIndex:++jQuery.imageMagnify.zIndexcounter, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:0, visibility:'visible', display:'block'}) .animate({opacity:1, left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration, function(){ //callback function after warping is complete //none added }) //end animate }) //end click $clone.click(function(e){ //action when magnified image is clicked on var $this=$(this) var imageinfo=$this.data('$relatedtarget').data('imgshell') jQuery.imageMagnify.refreshoffsets($(window), $this.data('$relatedtarget'), imageinfo) //refresh offset positions of original and warped images $this.stop().animate({opacity:0, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h}, setting.duration, function(){ $this.hide() $this.data('$relatedtarget').css({opacity:1}) //reveal original image }) //end animate }) //end click } }; jQuery.fn.imageMagnify=function(options){ var $=jQuery return this.each(function(){ //return jQuery obj var $imgref=$(this) if (this.tagName!="IMG") return true //skip to next matched element if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0 || options.thumbdimensions){ //if image has explicit width/height attrs defined jQuery.imageMagnify.magnify($, $imgref, options) } else if (this.complete){ //account for IE not firing image.onload jQuery.imageMagnify.magnify($, $imgref, options) } else{ $(this).bind('load', function(){ jQuery.imageMagnify.magnify($, $imgref, options) }) } }) }; jQuery.fn.applyMagnifier=function(options){ //dynamic version of imageMagnify() to apply magnify effect to an image dynamically var $=jQuery return this.each(function(){ //return jQuery obj var $imgref=$(this) if (this.tagName!="IMG") return true //skip to next matched element }) }; //** The following applies the magnify effect to images with class="magnify" and optional "data-magnifyby" and "data-magnifyduration" attrs //** It also looks for links with attr rel="magnify[targetimageid]" and makes them togglers for that image jQuery(document).ready(function($){ var $targets=$('.item_magnify') $targets.each(function(i){ var $target=$(this) var options={} if ($target.attr('data-magnifyto')) options.magnifyto=parseFloat($target.attr('data-magnifyto')) if ($target.attr('data-magnifyby')) options.magnifyby=parseFloat($target.attr('data-magnifyby')) if ($target.attr('data-magnifyduration')) options.duration=parseInt($target.attr('data-magnifyduration')) $target.imageMagnify(options) }) var $triggers=$('a[rel^="item_magnify["]') $triggers.each(function(i){ var $trigger=$(this) var targetid=$trigger.attr('rel').match(/\[.+\]/)[0].replace(/[\[\]']/g, '') //parse 'id' from rel='item_magnify[id]' $trigger.data('magnifyimageid', targetid) $trigger.click(function(e){ $('#'+$(this).data('magnifyimageid')).trigger('click.item_magnify') e.preventDefault() }) }) }) } //]]> </script> Pastekan di template (Edit html) diatas </body> atau diatas </head>.
   Keterangan :
   Untuk mengatur zoom lihat di script kode magnifyby: 3.5.
   Scriptnya saya modifikasi sedikit,  yang original download disini, beberapa perubahannya :
   

   • Efek magnify hanya berlaku dilayar pc,laptop atau tablet atau yang layarnya lebih besar dari 767 pixel (test via hp / tidak bisa test dari browser yang dikecilkan layarnya), perubahannya lihat kode "if (screen.width >= 768)" { dan penutup "}" dibawah script.
   • class  magnify menjadi class item_magnify.
   • Cursor dari pointer menjadi zoom-in dan zoom-out (support chrome dan firefox, yang tidak support memakai kursor  default).

   
   
3. Pada saat Entry Post (mode html) tambahkan class='item_magnify', contoh :
   
    <img alt="Test" class="item_magnify" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_rH1oknw4WZ2-pAyVyF5JjzlsIVxgLGLvOKhRiH8Ci-fJvcwEEV4muiL_Dx9cS1Rj6Td1PIMYEfGCv6OSYI9L4X5dBnJitrK3fPwQBqsnQfRmwpITDvC4A3I3L07eOVfXVGvTGF8xIEBu/s1600/jaket400.png"/>