Adding Picture Zooming to Your PhoneGap App with iScroll4


I thought that by simply adding “user-scalable=yes” to the meta tag it would enable my pictures  to be pinch/zoom scalable. But such was not the case. Something more was needed, and iScroll4 supplied the missing functionality. What’s extra nice is that doesn’t need Jquery. Here are the simple steps I took to enable my pictures to have pinch/zoom. This was tested on a Nexus 7.

Instructions were taken from:
http://cubiq.org/iscroll-4

1. On the page where you want scrolling, make sure the viewport line in the <head> section allows scaling by adding user-scalable=yes:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

2. Download iscroll4 from http://cubiq.org/iscroll-4

3. Unzip, then open iscroll-4/src and copy iscroll.js to your project’s javascripts folder.

3. Copy and paste the contents to just after the last <script> in the <head> section:

<script type="application/javascript" src="../javascripts/iscroll.js"></script>

<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper',
{ zoom:true, zoomMax: 4 });
}

document.addEventListener('DOMContentLoaded', loaded, false);
</script>

3a. Change the following to the correct location of your iscroll.js file:

<script type="application/javascript" src="../javascripts/iscroll.js"></script>

3b. You can change the maximum zoom allowed in the zoomMax section. “zoomMax: 4” means it will zoom to 4x the size.

4. Just above the </body> tag add the following line to execute, or call, the function:

<script>loaded();</script>

5. Now make a div with id=”wrapper” (or apply the id=”wrapper” to an existing div) that encloses the picture you want scalable. Or change “wrapper” in the function to an id you are already using.

I did this so only the image scales:

<div id="wrapper" style="width:100%">
<img src="../kit-images/blueprint.jpg" width="800" alt="" style="max-width:100%; height:auto;">
</div>

Now do a Project > Clean in Eclipse, and test in a device.

The content in the “wrapper” div will be scrollable AND scalable as though inside a frame. If the user needs to scroll to information below the div, he’ll need to be able to touch somewhere around the div to scroll beyond.

You might find it advantageous to add -webkit-transform:translate3d(0,0,0) to see if the area scales more smoothly. Unfortunately, it uses more resources, so test. Add the following above the </head> tag:

<style type="text/css">
div#wrapper img { -webkit-transform:translate3d(0,0,0) }
</style>

Zooming More Than One Picture on a Page

I wanted to zoom more than one picture on the page, so I changed my code like this for three pictures.

The <head> script became the following, duplicating the function as many times as there were pictures, and appending a digit after each function name (in two places)  and wrapper name (in one place) within the <script> tags:

<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper',
{ zoom:true, zoomMax: 4 });
}
function loaded2() {
myScroll = new iScroll('wrapper2',
{ zoom:true, zoomMax: 4 });
}
function loaded3() {
myScroll = new iScroll('wrapper3',
{ zoom:true, zoomMax: 4 });
}

document.addEventListener('DOMContentLoaded', loaded, false);
document.addEventListener('DOMContentLoaded', loaded2, false);
document.addEventListener('DOMContentLoaded', loaded3, false);
</script>

The script above the </body> tag received two more lines:

<script>loaded();</script>
<script>loaded2();</script>
<script>loaded3();</script>

And each picture had its own id:

<p style="color:blue; font-style:italic;">(Double-tap to enlarge pictures.)</p>
<div id="wrapper" style="width:100%">
<img src="../kit-images/radio-installation-2.jpg" width="813" alt=""></div><br>
<div id="wrapper2" style="width:100%">
<img src="../kit-images/radio-installation-3.jpg" width="813" alt=""></div><br>
<div id="wrapper3" style="width:100%">
<img src="../kit-images/radio-installation-4.jpg" width="793" alt=""></div>

5 thoughts on “Adding Picture Zooming to Your PhoneGap App with iScroll4

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s