I would like to write a html which allow users to pinch zoom in and out. I find an excellent example (https://github.com/manuelstofer/pinchzoom/blob/master/demo/useMouseWheel.html). However, I encountered some problems when merging it to my html (which is a more complicated html one).
Since the pinch zoom in and out (a png file) is just one of my functions of my html. It shall be set to none in display by default and it becomes flex when user clicks a button to display it. However, the image fails to display(simply nothing and empty) after I click a button to display the div whose display is none in default.
The css and js I used comes from
style.css: https://github.com/manuelstofer/pinchzoom/blob/master/demo/style.css
js: https://manuelstofer.github.io/pinchzoom/dist/pinch-zoom.umd.js
Here is my html:
<head>
<!-- The following files are used to zoom in/out by pinch -->
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<script type="text/javascript" src="pinch-zoom.umd.js"></script>
<!-- End -->
</head>
<body>
// some html codes here...
// some html codes here...
// some html codes here...
<button onclick="display_panorama()"> HQ Panorama </button>
<div id="panorama_area" style="display: none;">
<div id="table-wrap6" style="display: flex; border: 2px solid red; width: 85%; -ms-overflow-style: none; scrollbar-width: none;" class="table-wrap">
<div class="page pinch-zoom-parent">
<div class="pinch-zoom">
<img class="pinch_zoom" src="Image/panorama_2022_optimized.png"/>
</div>
</div>
</div>
<div id="panorama_return" style="border: 2px solid red; width:15%; display: flex; flex-direction: row; justify-content: flex-end">
<button type="button" id="panorama_return_button" style="margin: 0px auto auto auto; height:auto;" onclick ="return_duty()"> // The return button is just used to close the div containing the image.
Return
</button>
</div>
</div>
// and the codes continue ...
// and the codes continue ...
// and the codes continue ...
<script>
// some codes here ...
// some codes here ...
// some codes here ...
function display_panorama()
{
document.getElementById("panorama_area").style.display = "flex";
}
var el = document.querySelector('div.pinch-zoom');
new PinchZoom.default(el, {});
// and the codes continue ...
// and the codes continue ...
// and the codes continue ...
</script>
</body>
What shall I do to display the image smoothly?