ImageZoom

Placing the image in the right area even after zooming.

by kapilgopinath

HTML

<div class="outer">
            <div id="minmaxDiv" class="nextIcon"></div>
            <div id="inner">
                <div id="page0" class="imgDiv">
                    <img id="doc0" src="img/0.jpg" alt="" />
                </div>

                <div id="page1" class="imgDiv">
                    <img id="doc1" src="img/1.jpg" alt="" />
                </div>

                <div id="page2" class="imgDiv">
                    <img id="doc2" src="img/2.jpg" alt="" />
                </div>

                <div id="page3" class="imgDiv">
                    <img id="doc3" src="img/3.jpg" alt="" />
                </div>

                <div id="page4" class="imgDiv">
                    <img id="doc4" src="img/4.jpg" alt="" />
                </div>

                <div id="page5" class="imgDiv signit">
                    <img id="doc5" src="img/5.jpg" alt="" />
                </div>

                <div id="page6" class="imgDiv">
                    <img id="doc6" src="img/9.jpg" alt="" />
                    <img id="doc6signature" class="signArea" src="img/sign6.png">
                </div>

            </div>
        </div>
        <div class="sidePanel">
            <h1>Instructions</h1>
            <ol id="list">
                <li id='mesg'>Review document</li>
                <li>Click Start to begin signing process</li>
                <li>Click anywhere in the signature line corresponding to your name. A capture box will appear</li>
                <li>Sign your name</li>
                <li>Accept your signature</li>
                <li>Click Next to be prompted to the next signature line</li>
                <li>After you have signed each signature line, click Done</li>
            </ol>
        </div>

CSS

h1{
                text-align: center;
            }
            .sidePanel{
                width: 36%;
            }
            .outer{
                width:60%;
                float: left;
                height: 750px;
                position: relative;
            }
            .sidePanel{
                float:left;
            }
            .imgDiv{                
                position: relative;
                display: inline-block;
            }
            .imgDiv img{
                width:100%;
            }
            .imgDiv img.reset {
                transition: -webkit-transform 0.3s ease-in-out;
                transition: transform 0.3s ease-in-out;
            }
            #linkArea{
                position: absolute;
                font-family: fantasy;
            }
            #inner{ 
                width: 100%;
                height: 100%;
                overflow: auto;
                -webkit-overflow-scrolling: touch;                 
            }
            .signArea{
                position: absolute;
                height: 20px;
                display: none;
            }
            #minmaxDiv{
                position: absolute;
                top: 50%;
                right: 27px;
                width: 24px;
                height: 24px;                
                z-index: 1;
            }
            .prevIcon{
                background: url(img/previous.png) no-repeat;
            }
            .nextIcon{
                background: url(img/next.png) no-repeat;
            }

JavaScript

function doOnOrientationChange() {
                $('.imgDiv img').css({width: 100 + '%'});
                $('#inner').css('overflow-x', 'hidden');
                _width = parseInt($('#doc1').css('width'));
                min = _width;
                signFuncs.placeElement({pageId: "#doc5", pagePos: 0, eleId: "linkArea"});
                signFuncs.placeElement({pageId: "#doc6", pagePos: 1, eleId: "doc6signature"});
            }

            window.addEventListener('orientationchange', doOnOrientationChange);

            $(window).bind("load", function() {

                _width = parseInt($('#doc1').css('width')),                
                min = _width,
                max = 1024,
                scaling = false;
                /*********************************************/
                var obj = $('#inner img');
                obj.bind('touchstart', function(ev) {
                    var e = ev.originalEvent;
                    if (e.touches.length > 1) {
                        scaling = true;
                    }
                });
                obj.bind('touchmove', function(ev) {
                    var e = ev.originalEvent;
                    if (scaling) {
                        if ($(this).parent().hasClass('signit')) {
                            $('#linkArea').hide();
                        }
                        if ($(this).attr('id') == 'doc6') {
                            $('#doc6signature').hide();
                        }
                        var dist = Math.sqrt(
                                (e.touches[0].pageX - e.touches[1].pageX) * (e.touches[0].pageX - e.touches[1].pageX) +
                                (e.touches[0].pageY - e.touches[1].pageY) * (e.touches[0].pageY - e.touches[1].pageY));
                        
                        var tempWidth = _width + dist;
                        if (tempWidth > max)
                            tempWidth = max;
                        if (tempWidth < min){
...