У меня есть двухстраничное изображение, которое я хотел бы отобразить в пространстве, предназначенном для отображения по одной странице за раз. Я также хотел бы разрешить панорамирование и масштабирование.
Таким образом, пользователь может просматривать все изображение на 2 страницы, перетаскивая его.
Я использовал Panzoom, чтобы сделать это https://timmywil.github.io/jquery.panzoom/
Однако без масштабирования я не могу перетащить, чтобы увидеть все изображение, но только около 75% изображения. Чем больше я увеличиваю изображение, тем больше его вижу.
<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
});
});
Вот скрипка
https://jsfiddle.net/LzwLmc94/
Изображение имеет текст «Страница 1А, Страница 1В, ... Страница 1F» на первой странице и аналогичный на второй странице. Без масштабирования вы сможете видеть только до 2B и чуть больше.