Closed rrrpdx closed 1 year ago
Hi,
Do you really need minScale: 0.25,
? It would work as expected if you remove that.
Agree... For now, I just disabled the pan/zoom functionality, and things worked fine. I'm using fancybox for my personal slideshow viewer, and sometimes I didn't want the images to take the entire screen real-estate. So zooming by 1/2 or 1/4 was good.
Closing it for now. If anyone really needs minScale
to be less than 1, feel free to reopen or create a new issue, as this is currently not supported.
I need minScale
less than 1, (try fitX
/fitY
on instance create, like a object-fit: cover
)
Describe the bug
I'm upgrading from v4 to v5, and noticed that the slide transitions don't work properly when pan/zoom is enabled on the images... The images appear to shrink as they are transitioned, and when you reverse directions, you can get images that are smaller than initially shown.
Reproduction
Not sure that I'm doing this right, but here's a link: https://stackblitz.com/edit/js-7qc44n?file=index.html,index.js,style.css
I modified your dribble inspired design code to enable zoom, and adjust min/max scale of panzoom, and added a transition for slides... If you go back and forth, you will see that on direction changes, the images come back smaller. if you have images that are both landscape and portrait, I noticed that it appears to shrink the image on the transitions. ` Fancybox.bind('[data-fancybox="gallery"]', { compact: false, idle: false,
animated: false, showClass: false, hideClass: false,
dragToClose: false,
Images: { zoom: true, Panzoom: { minScale: 0.25, maxScale: 4, }, },
Toolbar: { display: { left: [], middle: [], right: ['close'], }, },
Thumbs: { type: 'classic', Carousel: { center: function () { return this.contentDim > this.viewportDim; }, }, },
Carousel: { transition: 'slide', }, }); `
Additional context
No response