JSFiddle - React, Tailwind, and code Playground
HTML
<img id=image1 src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg">
<img id=image2 src="http://www.starplugins.com/sites/starplugins/images/jetzoom/small/image1.jpg">
CSS
img{ position:absolute; top:0 }
#image1
{
left:0; z-index:0
}
#image1
{
left:400px; z-index:1
}
JavaScript
$(function(){
$('img').CloudZoom(
{
zoomPosition: 'inside',
zoomOffsetX: 0,zoomImage:'http://www.starplugins.com/sites/starplugins/images/jetzoom/large/image1.jpg'
}
);
});
/*
Cloud Zoom 1 Site License (CZ01-01) TRIAL VERSION.
Version 3.1 rev 1401150900
Please purchase an appropriate license to use this software.
License Agreement: www.starplugins.com/license
Copyright (c)2012-2014 Star Plugins - www.starplugins.com
Downloaded on Mar 12, 2014 by account #TRIAL USER
License Key: N/A
Licensed website(s): fiddle.jshell.net
*/
(new window['\x46\x75\x6E\x63\x74\x69\x6F\x6E'](['r.CloudZoom=d;d.Ka()})(jQuery);;',
'var b=this.zoom.a.offset();this.zoom.options.zoomFlyOut?this.b.animate({left:b.left+this.zoom.d/2,top:b.top+this.zoom.c/2,opacity:0,width:1,height:1},{duration:this.zoom.options.animationTime,step:function(){d.browser.webkit&&a.b.width(a.b.width())},complete:function(){a.b.remove()}}):this.b.animate({opacity:0},{duration:this.zoom.options.animationTime,complete:function(){a.b.remove()}})};',
'0<c&&(c=0);0<d&&(d=0);c+e<this.b.width()&&(c+=this.b.width()-(c+e));d+a<this.b.height()-this.r&&(d+=this.b.height()-this.r-(d+a));this.U.css({left:c+\"px\",top:d+this.za+\"px\",width:e})};s.prototype.$=function(){var a=this;a.b.bind(\"touchstart\",function(){return!1});',
's.prototype.update=function(){var a=this.zoom,b=a.i,c=-a.ta+a.n/2,d=-a.ua+a.j/2;void 0==this.p&&(this.p=c,this.t=d);this.p+=(c-this.p)/a.options.easing;this.t+=(d-this.t)/a.options.easing;var c=-this.p*b,c=c+a.n/2*b,d=-this.t*b,d=d+a.j/2*b,e=a.a.width()*b,a=a.a.height()*b;',
'if(d.is(\"a\")||e(this).is(\"a\"))return!1})}else e(this).data(\"CloudZoom\",new...