1

I'm using Fancybox 3 to display 3 items. They all link together using the gallery attribute, like so:

<!-- Item 1 -->
<a data-fancybox="gallery" data-src="#gallery-1" href="javascript:;">
  Open Me
</a>

<div style="display: none;" id="gallery-1">
  <h2>Gallery 1</h2>
  <p>Content</p>
  <a data-fancybox data-src="signup" href="javascript:;">
</div>

<!-- Item 2 -->
<a data-fancybox="gallery" data-src="#gallery-2" href="javascript:;">
  Open Me
</a>

<div style="display: none;" id="gallery-2">
  <h2>Gallery 2</h2>
  <p>Content</p>
  <a data-fancybox data-src="signup" href="javascript:;">
</div>

<!-- Item 3 -->
<a data-fancybox="gallery" data-src="#gallery-3" href="javascript:;">
  Open Me
</a>

<div style="display: none;" id="gallery-3">
  <h2>Gallery 3</h2>
  <p>Content</p>
  <a data-fancybox data-src="#signup" href="javascript:;">
</div>

<!-- Signup -->
<div style="display: none;" id="signup">
  <h2>Signup</h2>
  <p>Sign up form goes here</h2>
</div>

Within each item, there's a signup link which links to a separate popup. When clicked, this opens another fancybox window within the already open gallery item. How do I close the previous instance before triggering another? I'd rather they didn't nest.

I've tried this within my JS, but it doesn't work:

( function( $ ) {
    $('[data-fancybox]').fancybox({
        closeExisting: true,
        loop: true
    });
} )( jQuery )
Sam
  • 1,134
  • 2
  • 20
  • 39

2 Answers2

1

Your snippet works fine - https://codepen.io/anon/pen/oPEXQj?editors=1010

Just make sure that you are using the latest version, because closeExisting option is available starting from v3.4.0

btw, you should replace data-src="signup" with data-src="#signup" to load inline content

Janis
  • 8,007
  • 1
  • 18
  • 26
1

Basic Solution

The solution to your problem is this:

<div style="display: none;" id="gallery-1">
  <h2>Title 1 - Make this screen much bigger ****************************</h2>
  <p>  <a data-fancybox data-src="#signup" onclick='$.fancybox.close()' href='#'">Sign me up</a></p>
</div>

Reference: close fancy box from function from within open 'fancybox'

Working Example:

https://jsfiddle.net/euo4byj2/15/

Working Code:

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.1/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.1/jquery.fancybox.min.js"></script>


<div style="display: none;" id="signup">
  <h2>SIGN UP 1</h2>
  <p>Content</p> 
</div>



<!-- Item 1 -->
<a data-fancybox="gallery" data-src="#gallery-1" href="javascript:;">
  Open Me
</a>

<div style="display: none;" id="gallery-1">
  <h2>Title 1 - Make this screen much bigger ****************************</h2>
  <p>  <a data-fancybox data-src="#signup" onclick='$.fancybox.close()' href='#'">Sign me up</a></p>
</div>

<!-- Item 2 -->
<a data-fancybox="gallery" data-src="#gallery-2" href="javascript:;">
  Open Me
</a>

<div style="display: none;" id="gallery-2">
  <h2>Title 2</h2>
  <p>Content</p>
  <a data-fancybox data-src="signup" href="javascript:;">
</div>

<!-- Item 3 -->
<a data-fancybox="gallery" data-src="#gallery-3" href="javascript:;">
  Open Me
</a>

<div style="display: none;" id="gallery-3">
  <h2>Title 3</h2>
  <p>Content</p>
  <a data-fancybox data-src="signup" href="javascript:;">
</div>

<!-- Signup -->
<div style="display: none;" id="signup">
  <h2>Signup</h2>
  <p>Sign up form goes here</h2>
</div>


<script>

/* ( function( $ ) {
    $('[data-fancybox]').fancybox({
        closeExisting: true,
        loop: true
    });
} )( jQuery );
 */

</script>
Menelaos
  • 20,773
  • 14
  • 71
  • 130