Question

I’ve got a fancybox which loads inline content. The content is rendered on the page as the website is loaded and on document ready the fancybox is shown. The HTML and javascript to do this is as following;

HTML:

<div style="display: none">
    <div id="cookieContainer">
        <div class="splash">
            <!-- Some more content here -->
            <div class="buttons">
                <a href="javascript:parent.jQuery.fancybox.open({href : '<%=UrlRewriter.GetUrlForSystemName("MyPage")%>'})" class="cookie_button settings">Instellingen</a>
                <a href="javascript:void(0);" class="cookie_button accept">Accepteren</a>
            </div>
        </div>
    </div>
</div>

JAVASCRIPT:

$(document).ready(function(){
          $("a#myUrl").fancybox({
                'closeClick': false,
                'modal': false,
                'closeBtn': false,
                'width': '400px',
                'height': '200px',
                'autoSize': false,
                'padding': 10,
                'margin': 0
            });

          $('a#myUrl').trigger('click');
});

The fancybox contains two hyperlinks. One which executes some javascript (the button with the class ‘cookie_button accept’) and another one which should send the user to an specific url inside the currently active fancybox.

I’ve already tried various options from the Fancybox website, but none of them are giving me the desired result. One of the examples (the one with the iFrame) has the functionality I want, however this one navigates from an fancybox with the type ‘iFrame’ to another one with the same type. What i’m trying to do here is to navigate from an fancybox of the type ‘inline’ to an fancybox of the type ‘iFrame’. Is this even possible? Or are there other ways to achieve this?

Answer 1

This is how you can do in your inline content (notice I use the rendered html)

<a id="myUrl" href="#cookieContainer">open fancybox</a>

<div style="display: none">
  <div id="cookieContainer">
    <div class="splash">
      <!-- Some more content here -->
      <div class="buttons"> 
        <a href="http://jsfiddle.net" id="myUrl2" class="cookie_button settings" data-fancybox-type="iframe">Instellingen</a>
        <a href="javascript:void(0);" class="cookie_button accept" onclick="jQuery.fancybox.close()">Accepteren</a>
      </div>
    </div>
  </div>
</div>

The link on top is the selector bound to fancybox (#myUrl).

Now, regarding the buttons inside the inline content, the first one (Instellingen) doesn’t need to run javascript to open the new fancybox; you can rather set it as a regular link, in your case, like :

<a href="<%=UrlRewriter.GetUrlForSystemName("MyPage")%>" id="myUrl2" class="cookie_button settings" data-fancybox-type="iframe">Instellingen</a>

NOTICE that I added two attributes to that link:

• id="myUrl2" : the new selector to be bound to fancybox
• data-fancybox-type="iframe" : so next fancybox will open as iframe

Then the fancybox script :

$(document).ready(function () {
  $("#myUrl, #myUrl2").fancybox({
    closeClick: false,
    closeBtn: false,
    width: 400,
    height: 200,
    autoSize: false,
    fitToView : false,
    padding: 10,
    margin: 0
  });
  $('a#myUrl').trigger('click');
});

Notice that we are binding fancybox to both selectors outside and inside of fancybox :

$("#myUrl, #myUrl2")

Also notice that I changed 'width': '400px' and 'height': '200px' by width: 400 and height: 200 (integer and Boolean values go without quotes and ‘px’ in implied).

I also removed 'modal': false because is the default value and added fitToView : false since you are using autoSize: false.

Optionally I added onclick="jQuery.fancybox.close()" to the “Accepteren” button so it will close the inline fancybox after click but you may not need that.

That will make you move from your fancybox inline content to a fancybox iframe content.

See demo JSFIDDLE