How can i create a modal with html text and image content with zoomable?

ionic-v1
1

I want to show a product details which is html content with images from server on a modal and the content must be zoomable (dragging two finger).

I’ve done a lot of digging on google and ionic forum but no solution found.

How can i make the content in a modal zoomable?

Please help me!!

my code is like this:

<ion-modal-view>
    <ion-header-bar class="bar-stable">
        <button class="button button-clear icon ion-ios7-arrow-back" ng-click="closeProductZoom()" ></button>
        <h1 class="title">Zoom</h1>
        <button class="button button-clear" ng-click="closeProductZoom()" >Хаах</button>
    </ion-header-bar>
    <ion-content scroll="true" >
        <ion-list>
            <ion-item>
                <div style="">

                    <p>start....</p>
                    <p><img src="http://img.mmarket.mn/uploads/Image/%D0%B4%D1%8D%D0%BB%D0%B3%D1%8D%D1%80%D1%8D%D0%BD%D0%B3%D2%AF%D0%B9(24).png" style="width:100%;"></p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>....</p>
                    <p>end....</p>
                </div>

            </ion-item>

        </ion-list>

    </ion-content>
</ion-modal-view>
2

Try using ion-scroll . It has a property called zoomable. Set it true to enable zooming

3

I’ve tried but it lack a lot of things such as pitch to zoom, zoom in, out by dragging, scrolling down and top on whole content.
Also it requires explicitly set the width and height of content.

Do i need implement custom directive (zoomable)?

Thanks

4

I have a sample project that you can check out that should get you in the right direction.