Search jQuery

jQuery Forum

Enlarge page to show large, scrollable, 1024px-width image

in jQuery Mobile • 10 years ago

Is it possible to enlarge one of the Jquery mobile pages' size to 1024px so I can include a 1024px image that the user can slide around to see the detail? This is for an iPhone device.

If so, what do I need to change to make this happen?

Right now the image only scrolls up and down while the right portion of the image goes off the right side, and is not scrollable left to right. Of course, I want the rest of the pages to stay their own mobile-screen width.

Thanks,

Steve

Replies(6)

arschmitz

Re: Enlarge page to show large, scrollable, 1024px-width image

10 years ago

There are a few solutions for something like this you can set your image width to 100% this way it will fill the avalible width then just allow the user to zoom.

you can also make a div thats 100% width place the image inside this and set -webkit-overflow-scrolling:touch; but this comes out a little funky because you can only scroll on one axis at a time.

Iv also written a plugin for fullscreen image viewing in iOS fullscreen mode that might help depending on your situation

www.uglymongrel.com and go under plugins its called jqm-image.js

let me know if you need any more help with this

stevenhus

Re: Enlarge page to show large, scrollable, 1024px-width image

10 years ago

I don't think I'm implementing your suggestion correctly. For instance, this shows the image reduced to fit on the screen, with no enlargement via touch (div width = 100%):

<div data-role="page" width="1024px" id="chassis" data-theme="b" data-add-back-btn="true">
<div data-role="header">
<h1>Features</h1>
</div>
<div data-role="content">
<div width="100%" style="-webkit-overflow-scrolling:touch;">
<img alt="" src="images/chassis-right.1024.png" width="100%" scrolling="yes">
</div>
</div>
<div data-role="footer">
<p class="footer-image"><img src="images/copyright.png" alt="" width="100%"></p>
</div>
</div>

This shows the full size of the image, but it does not scroll left to right to show the right-most part of the image (div width = 1024px):

<div data-role="page" id="chassis" data-theme="b" data-add-back-btn="true">
<div data-role="header">
<h1>Features</h1>
</div>
<div data-role="content">
<div width="1024px" style="-webkit-overflow-scrolling:touch;">
<img alt="" src="images/chassis-right.1024.png" width="1024px" scrolling="yes">
</div>
</div>
<div data-role="footer">
<p class="footer-image"><img src="images/copyright.png" alt="" width="100%"></p>
</div>
</div>