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

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -