javascript - Zoomer in html5 in mobile -
i working in images should zoom in , zoom out on touch this . used many examples net this example , used meta tag viewport. did not acheive functionality required. serached alot did not find desireable solution . regarding issue.
at time using meta tag when double touch on image image got smaller , not come orignal position.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.25;, user-scalable=yes">
and net using 1 css , js files of zoom behave same
for time found solution problem use animate function , increase height ,width or individual height or width accomplish zooming.
here code zoom in , out image on mouse over:
<h1>image zoom in , zoom out</h1> <br /> <img src="http://1.bp.blogspot.com/-xshj67hnezu/tvix8jqe-hi/aaaaaaaabrq /io5ob6bywq0/s1600 /shadoweffect.jpg" alt="image zoom in , out" title="image zoom jquery" id="image1"> </img>
and in js:
$(document).ready(function(){
$('#image1').width(200); $('#image1').mouseover(function() { $(this).css("cursor","pointer"); $(this).animate({width: "300px"}, 'slow'); }); $('#image1').mouseout(function() { $(this).animate({width: "200px"}, 'slow'); });
});
Comments
Post a Comment