CODEWITHSUNDEEP
iphonehtmljquery-mobilemobile
user3061007
user3061007

Reputation: 57

Mobile website zoom into images like google maps

I have a mobile website and I like to insert images with an option to zoom by gesture. It should look like you zoom in on google maps, so that the other content has always the same size and only the image is zooming in. Is there any script for this? Or do I have to use iframes?

Greetz

Mik

Upvotes: 0

Views: 724

Answers (1)

ezanker
ezanker

Reputation: 24738

For the gestures part, you can use a library like hammer.js to handle pinch events. You can find it HERE

For the zoom, you can use css transformation to scale an image (or div) apart from the rest of the page. In my demo below, clicking zoom in and zoom out buttons changes the CSS scale transformation value. In your case, you would handle the pinch events and change the scale accordingly.

NOTE: Updated according to Omar's comment below.

<div id="imgContainer" >
    <img id="zoomImage" src="http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2003/10/soho_image_28_october_2003/10098404-2-eng-GB/SOHO_image_28_October_2003_node_full_image.jpg" />
<div>

#imgContainer{
    overflow: auto;
    height: 400px;
}

$(document).on("click", ".zoomBtn", function(){    
    var id = $(this).prop("id");
    if (id == 'in'){
        curScale *= 1.25;
    } else {
        curScale *= 0.75
    }        
    $("#zoomImage").css({
      "transform": "scale(" + curScale  + ")"
    });
});

Here is a jQM zoom image DEMO

NOTE: If you are using SVG on an SVG canvas, you can scale by changing the viewport size.

Upvotes: 1

Related Questions