Dragging 2 page image with jQuery PanZoom

Question

I have a 2 page image that I would like to display in a space meant to display one page at a time. I would also like to allow panning and zooming. Thus the user can view the entire 2 page image by dragging it.

I have used panzoom to do this https://timmywil.github.io/jquery.panzoom/ However without zooming, I am not able to drag to see the entire image but only about 75% of the image. The more I zoom the image, the more of it that I can see.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/3.2.2/jquery.panzoom.js"></script>

<div class="buttons" id="myButtons" >
        <button class="zoom-in btn btn-primary btn-sm" type="button">Zoom In</button> 
        <button class="zoom-out btn btn-primary btn-sm" type="button">Zoom Out</button> 
        <button class="reset btn btn-primary btn-sm" type="button">Reset Size</button> 
</div>

<div style="max-height:none;padding:0px;height:300px;width:520px;">
   <img id="theCanvas" class="img-fluid"  draggable="false" width="516" height="730" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAA0NDQ0ODQ4QEA4UFhMWFB4bGRkbHi0gIiAiIC1EKjIqKjIqRDxJOzc7ST">
<div>

var $pz2 = $("#theCanvas");
var $buttons = $('#myButtons');
$pz2.panzoom({
        $zoomIn: $buttons.find(".zoom-in"),
        $zoomOut: $buttons.find(".zoom-out"),
        $reset: $buttons.find(".reset"),
        contain: 'invert',
        minScale: 1
    });
    $pz2.parent().on('mousewheel.focal', function(e) {
        e.preventDefault();
        var delta = e.delta || e.originalEvent.wheelDelta;
        var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
        $pz2.panzoom('zoom', zoomOut, {
            increment: 0.1,
            focal: e
        });
    });

Here is a fiddle

https://jsfiddle.net/LzwLmc94/

The image has the text "Page 1A, Page 1B, ... Page 1F" on the first page, and similar on the second page. Without zooming, you will only be able to see up to Page 2B and a bit more.

Answer 1

This appears to be a feature of the contain feature of the jquery.panzoom library.

Removing the line

 contain: 'invert',

does the trick

However, obviously, then it is possible to drag the image out of the frame...