Pinch Zoom on Phonegap

Pinch Zoom:

For zooming any kind of image on smart phones by pinch , we generally used jQuery and javascript for phonegap. For this we used a jQuery plugin named Hammer.js .

For Pinch zoom it will be necessary the following things.

1.<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

3. hammer.js (attached with this plugin) .

4. hammer.fakemultitouch.js (attached with this plugin) .

5. hammer.showtouches.js (attached with this plugin) .

<script>

        // show touches doesnt work well in older IE versions due lack of support of

        // the pointer-event css property

        if(!Hammer.HAS_TOUCHEVENTS && !Hammer.HAS_POINTEREVENTS) {

            Hammer.plugins.showTouches();

        }

    </script>

    <!-- <![endif]-->

    <script>

        if(!Hammer.HAS_TOUCHEVENTS && !Hammer.HAS_POINTEREVENTS) {

            Hammer.plugins.fakeMultitouch();

        }

    var hammertime = Hammer(document.getElementById('pinchzoom'), {

        transform_always_block: true,

        transform_min_scale: 1,

        drag_block_horizontal: true,

        drag_block_vertical: true,

        drag_min_distance: 0

    });

    var rect = document.getElementById('rect');

    var posX=0, posY=0,

        scale=1, last_scale,

        rotation= 1, last_rotation;

    hammertime.on('touch drag transform', function(ev) {

        switch(ev.type) {

            case 'touch':

                last_scale = scale;

                last_rotation = rotation;

                break;

            case 'drag':

                posX = ev.gesture.deltaX;

                posY = ev.gesture.deltaY;

                break;

            case 'transform':

                rotation = last_rotation + ev.gesture.rotation;

                scale = Math.max(1, Math.min(last_scale * ev.gesture.scale, 10));

                break;

        }

        // transform!

        var transform =

                "translate3d("+posX+"px,"+posY+"px, 0) " +

                "scale3d("+scale+","+scale+", 1) " +

                "rotate("+rotation+"deg) ";

        rect.style.transform = transform;

        rect.style.oTransform = transform;

        rect.style.msTransform = transform;

        rect.style.mozTransform = transform;

        rect.style.webkitTransform = transform;

    });

    </script>

For Download the plugin click here



 

Working on jQuery

jQuery:

jQuery is a cross platform java library which is used for client side  scripting of HTML.  jQuery is a free, open source software and it is most popular javascript library. jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website.

Working on jQuery:

For starting of jQuery we have to use its library in starting.

<script src="http://code.jquery.com/jquery-1.11.min.js"></script>

or we can use this js also in our own file.

example of jQuery:

$("div.test").add("p.quote").addClass("blue").slideDown("slow");

Here $ function is a factory method for jQuery object. This is also called command. Via $.-prefixed functions. These are utility functions, which do not act upon the jQuery object directly.

It is possible to perform browser-independent Ajax queries using $.ajax

$.ajax({
  type: "POST",
  url: "example.php",
  data: "name=John&location=Boston"
}).done( function(msg) {
  alert( "Data Saved: " + msg );
}).fail( function( xmlHttpRequest, statusText, errorThrown ) {
  alert(
    "Your form submission failed.\n\n"
      + "XML Http Request: " + JSON.stringify( xmlHttpRequest )
      + ",\nStatus Text: " + statusText
      + ",\nError Thrown: " + errorThrown );
});

Working on Jquery Mobile

Jquery Mobile:

Jquery is a touch optimized web framework which is used to create web applications. The jquery Mobile framework is compatible with other mobile application framework and platforms like Phonegap, Worklight etc.

working on it:

There are basically three components which are used in it.

1. HTML
2. CSS
3. JQUERY

Jquery Mobile works on following os:

ios
android
windows
blackberry
Obadda
web os
symbian
Mee go

Examples of its coding:

<!DOCTYPE html>
<html>
    <head>
       <title>Page Title</title>
       <meta name="viewport" content="initial-scale=1, user-scalable=no, width=device-width">
       <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
    </head>
 
    <body>
        <div data-role="page" id="first" data-theme="a">
            <div data-role="header" data-position="fixed">
                <h1>Page Header 1</h1>
            </div><!-- /header -->
 
            <div data-role="content">
                <p>Hello, world!</p>
                <a href="#second" data-role="button" data-inline="true" data-transition="flip">Go to second page</a>
            </div><!-- /content -->
 
            <div data-role="footer" data-position="fixed">
                <h4>Page Footer 1</h4>
            </div><!-- /footer -->
        </div><!-- /page -->
 
        <div data-role="page" id="second" data-theme="b" data-add-back-btn="true">
            <div data-role="header" data-position="fixed">
                <h1>Page Header 2</h1>
            </div><!-- /header -->
 
            <div data-role="content">
                <p>Page content goes here.</p>
            </div><!-- /content -->
 
            <div data-role="footer" data-position="fixed">
                <h4>Page Footer 2</h4>
            </div><!-- /footer -->
        </div><!-- /page -->
 
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
    </body>
</html>