How to open fancybox inside iframe to parent window?

[ruben4477]

I used down below code usually.

parent.$.fancybox.open()

but its not working on recently version.
so how to use that code on new version?

[fancyapps]

Hi,

You can access Fancybox from within the iframed page just the same way you can access any global variable - parent.Fancybox.show();.

Example:

<p>
      <button onclick="window.parent.Fancybox.close();">Close this iframe</button>
</p>

[ruben4477]

Thank you answer.
but I want to use in function.

parent👇

[a data-fancybox data-type="iframe" href="child.html"][/a]

child fancy gallery (in iframe)👇

[div class="swiper-slide" data-fancybox="gallery" data-src="img-1.jpg"] 1 [/div]
[div class="swiper-slide" data-fancybox="gallery" data-src="img-2.jpg"] 2 [/div]
[div class="swiper-slide" data-fancybox="gallery" data-src="img-3.jpg"] 3 [/div]

child function in script file (in iframe)👇

var a = $(selector);
  a.click(function () {
      parent.rbnJq.fancybox.open(link, {
      toolbar  : false,
      smallBtn : false,
      infobar: false,
      thumbs : {
        autoStart : true,
        axis : 'x'
      },
      afterShow : function( instance, current ) {
      current.opts.$orig.closest(".slick-initialized").slick('slickGoTo', parseInt(current.index), true);
      },
    }, a.index(this));
    return false;
  });

it's not working.

[fancyapps]

I see that you are using options from v3, but v5 is completely different, check docs. And your code should look something like this:

window.parent.Fancybox.show(
  // Gallery items
  [
    {
      src : 'https://lipsum.app/id/1/1024x768',
      caption : "Caption #1" 
    },
    {
      src : 'https://lipsum.app/id/2/1024x768',
      caption : "Caption #2" 
    },
  ],
  {
    // Gallery options
  }
)