fancyapps / ui

A library of JavaScript UI components, includes the best lightbox - Fancybox5
https://fancyapps.com/
Other
814 stars 98 forks source link

Slide Transitions don't work properly with panzoom #500

Closed rrrpdx closed 1 year ago

rrrpdx commented 1 year ago

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

fancyapps commented 1 year ago

Hi,

Do you really need minScale: 0.25, ? It would work as expected if you remove that.

rrrpdx commented 1 year ago

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.

fancyapps commented 1 year ago

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.

dkrnl commented 2 months ago

I need minScale less than 1, (try fitX/fitY on instance create, like a object-fit: cover)