How to: Zooming and Scrolling on a fullscreen Image

This is not really a question as a knowledge dump from my current experience trying to zoom with images. Hopefully this helps someone.

The Goal: Have an image stretch proportionally to the width of the a device. Also enable zooming and scroll support. Easy in concept hard in practice. (and partially my lack of understanding :smiley: )

For my example I’m using this image:

To achieve this, set the following
Html:

<ion-view hide-nav-bar="true" id="comic-view">
    <ion-scroll zooming="true" direction="xy" scrollbar-x="false" scrollbar-y="false" min-zoom="1" id="scrolly"  style="width: 100%; height: 100%;">
    <img id="page" src="http://images.monstermarketplace.com/kids-bedding-sets-and-diaper-bags/comic-book-cover-superman-kryptonite-comic-cover-900x1350.jpg" >
    </ion-scroll>
</ion-view>

Setting width of the image to screen width in my controller.

(document.getElementById('page')).style.width = (screen.width) + "px";

Couple of things to note:

  • instead of (screen.width) you might need to use (screen.width *window.devicePixelRatio). I was using it at first but took it out because it was scaling things to big and so far I’ve had good results without it.
  • The real kicker: min-zoom=“1”. My images were being allowed to scale to far out, and I couldn’t figure out why. I set this bad boy and vola it allows zooming in, but not out past the initial scale.

Overall this was way more confusing to do than I thought it should be. The code is not hard, its just tough figuring out the right combination of settings to achieve the result needed.
A standard mobile chrome browser pointed at http://images.monstermarketplace.com/kids-bedding-sets-and-diaper-bags/comic-book-cover-superman-kryptonite-comic-cover-900x1350.jpg will basically achieve this, but oddly tough through ionic.

Really enjoying this framework otherwise!
Hope this helps someone :smile:

2 Likes

can u plzz gv ur whole code i tried bt its nt working

Hi,

I’m trying to achieve zoom on a photo (I’m on Android). I’m testing a very simple code :

<ion-modal-view>
    <ion-scroll zooming="true" style="width: 100%; height: 100%;">
        <img ng-src="{{modalMediaThumb}}" class="maxPage" ng-if="modalMediaType == 1" />
    </ion-scroll>
</ion-modal-view>

And it doesn’t allow zooming - pinching the screen don’t do anything. I tried the code you provided, @myyellowshoe, but that don’t change anything for me - no zoom. Any help ?

@dhanashri @myyellowshoe

I want this.