fancyapps / fancybox

jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.
http://fancyapps.com/
7.29k stars 1.79k forks source link

placing a close link in the lightboxed frame #2648

Closed halukkaramete closed 2 years ago

halukkaramete commented 2 years ago

We all know what this is..

Screen Shot 2022-04-19 at 8 30 44 AM

It just closes the iframed content

What if I want to place a "close button" or a "link" on the iframe content itself as a second way of closing? How do I do that?

I copy pasted this into the iframe but that does nothing.

<button data-fancybox-close="" class="fancybox-button fancybox-button--close" title="Close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 10...."></path></svg></button>

Where does this get handy? On mobile, the thumb could be so much more closer to a properly placed custom close button than the one on the top right corner which I just shared the image of above.

fancyapps commented 2 years ago

Hi,

Here is an example for Fancybox v4+ - https://codesandbox.io/s/fancybox-iframe-k4i41?file=/iframe-1.html

<button onClick="window.parent.Fancybox.close();">Close</button>

For v3, use appropriate API method -

parent.jQuery.fancybox.getInstance().close();

https://web.archive.org/web/20210325170940/https://fancyapps.com/fancybox/3/docs/#iframe

halukkaramete commented 2 years ago

EXCELLENT.

This reply also opened my eyes as to how to access the parent function from the lightbox.

parent.myFunction !

On Tue, Apr 19, 2022 at 9:12 AM Jānis Skarnelis @.***> wrote:

Closed #2648 https://github.com/fancyapps/fancybox/issues/2648.

— Reply to this email directly, view it on GitHub https://github.com/fancyapps/fancybox/issues/2648#event-6452212426, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA6X2JYLMPQXCNQLUIF4JL3VFZFENANCNFSM5TXVMCYQ . You are receiving this because you authored the thread.Message ID: @.***>