I wonder if Fancybox supports panzoom of iframes. For example, in the following code, I can add the option to add panzoom effect to images, but I am not sure how to make iframe also act the same? I followed the similar syntax by adding “Iframes” in the options but it did not work.
<a href="https://fancyapps.com/iframe.html" data-type="iframe" data-fancybox="gallery" data-caption="Caption #1">
<img src="https://lipsum.app/id/1/200x150" />
</a>
<a href="https://lipsum.app/id/2/800x600" data-fancybox="gallery" data-caption="Caption #2">
<img src="https://lipsum.app/id/2/200x150" />
</a>
<script>
Fancybox.bind("[data-fancybox]", {
Images: {
Panzoom: {
maxScale: 2,
},
},
Iframes: {
Panzoom: {
maxScale: 2,
},
},
// Your custom options
});
</script>
You could do that in two steps:
- create Panzoom instance on your page where iframe is used for the content example – https://jsfiddle.net/38dLebov/
- add Fancybox and display your previously created HTML element as “inline content”, example – https://jsfiddle.net/tyqx5dap/
<div id="dialog-content" style="display:none;max-width:500px;">
<div class="f-panzoom" id="myPanzoom">
<iframe allow="autoplay; fullscreen" scrolling="auto" src="https://fancyapps.com/iframe.html"></iframe>
</div>
</div>
<p>
<button data-fancybox data-src="#dialog-content">Launch Dialog</button>
</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/panzoom/panzoom.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/panzoom/panzoom.toolbar.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.css"
/>
<style>
#myPanzoom {
max-width:600px;
height: 400px;
background: #eee;
}
#myPanzoom iframe {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div>
<div id="dialog-content" style="display:none;max-width:500px;">
<div class="f-panzoom" id="myPanzoom">
<iframe allow="autoplay; fullscreen" scrolling="auto" src="https://fancyapps.com/iframe.html"></iframe>
</div>
</div>
<p>
<button data-fancybox data-src="#dialog-content">Launch Dialog</button>
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/panzoom/panzoom.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/panzoom/panzoom.toolbar.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.umd.js"></script>
<script>
new Panzoom(document.getElementById("myPanzoom"), {
width : 800,
height: 800,
Toolbar: {
display: ["zoomIn", "zoomOut"],
},
}, {
Toolbar
});
Fancybox.bind('[data-fancybox]', {
// Custom options for all galleries
});
</script>
</body>
</html>2