search

fancyapps / ui

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

Unexpected Behavior of Fancybox Popup ( in a certain case ) #699

Closed halukkaramete closed 3 weeks ago

halukkaramete commented 1 month ago

Describe the bug

Description: Typically, when users encounter the Fancybox popup, they expect to close it by clicking the "X" button in the top right corner. This behavior is well-understood, and 10 out of 10 users follow this expected pattern.

Problem: However, when the thumbnail view opens to display all videos on the page, users often want to close this view using the same "X" button. why? because the little x appears to be attached to the thumbnail view, leading users to inadvertently close the video instead of the thumbnail view. 10 out 10 fail on that. So far never seen one who was smart enough to pick the grid icon to close the thumbs view.

Expected Behavior:

Clicking the "X" button should only close the thumbnail view when it is open. The "X" button should not close the video when the thumbnail view is active. Recommendation: Consider modifying the functionality or appearance of the "X" button in the thumbnail view to make it clear that it only affects the thumbnail view, thereby reducing user confusion and improving the overall experience.

And please suggest a way to overcome this problem for the current case with a small hack.

Reproduction

load a few YT videos on the same page, pop one via fancy. click the grid icon to open the thumbs view and then guess whether X should close the entire pop up or the thumbs view?

Additional context

No response

fancyapps commented 1 month ago

because the little x appears to be attached to the thumbnail view

Are you sure you're using the latest version with the thumbnails at the bottom and definitely not attached to the close button?

It's interesting that Fancybox has been working like this for many years and this is the first time I've heard of "user confusion". This is, of course, very unexpected. I don't even know what to think about it. How on earth would anyone think the close button closes the thumbnails, I'm a bit shocked.

And please suggest a way to overcome this problem for the current case with a small hack.

Sorry, I do not see any problem, therefore I do not know what to suggest.

halukkaramete commented 3 weeks ago

I'm using this version. We must be referring to different versions as 10 out 10 people would think clicking on X would close the thumbs as attached,

Screenshot 2024-10-30 at 7 56 51 AM
fancyapps commented 3 weeks ago

That explains it, you are using v3. So, please, upgrade to the latest or try rearranging the order of elements using CSS.

I can also reveal that v6 is in development and a similar type of thumbnails will return (e.g., a scrollable list) and you will be able to easily choose the side using CSS.