Loading inline content using FancyBox

Question

Well, I'm simply writing this post to hopefully help others that might come across the same issue.

The examples on the vendor website are a little vague and I had assumed the following scenario.

You have a link with a hrefn to some content's #id.

<a href="#content-div" class="fancybox">Open Example</a>

And you have a div to hold that content.

<div id="content-div" style="display: none">Some content here</div>

Then you simply run Fancybox through a 1-liner.

$(".fancybox").fancybox();

Naturally, you'd think that Fancybox will copy the content and change display: none to display: block and everything will be ok.

But this doesn't happen.
It still loads the content but the content is hidden and you have a blank Fancybox. *cry*

score 122 · Accepted Answer · answered Oct 18 '10 at 20:59

122

The solution is very simple, but took me about 2 hours and half the hair on my head to find it.

Simply wrap your content with a (redundant) div that has display: none and Bob is your uncle.

<div style="display: none">
    <div id="content-div">Some content here</div>
</div>

Voila

answered Oct 18 '10 at 20:59

Marko

71,361
28
124
158

4

This very example is dealt with on the fancybox site - take a look at example 5 http://fancybox.net/blog – Bobby Jack Oct 19 '10 at 12:10
8

@Bobby Jack - Yes, but they don't make it very obvious. If you look around the internet, lot's of people have had the same issue as me - so hopefully this will help somebody. – Marko Oct 19 '10 at 20:05
it helped me dude..i was going nuts as well .. thanks for sharing – mysterious Sep 21 '11 at 12:58
I've tested Fancybox a bit now and I have to say it's not very good. jQuery Toolsbox is a better choice then - much easier to work with. – Steven Mar 05 '12 at 04:58
The problem I see if that the fancybox example cited here has the `div` wrapped around the entire form, which didn't work for me... – nicorellius Dec 20 '12 at 23:19
2

Spent an hour trying to figure this out before one google search brought me here. – CreateSean May 29 '13 at 19:15
Even simpler: ? – Brent Dec 03 '14 at 18:12

score 8 · Answer 2 · edited May 01 '18 at 12:51

The way I figured this out was going through the example index.html/style.css that comes packaged with the Fancybox installation.

If you view the code that is used for the demo website and basically copy/paste, you'll be fine.

To get an inline Fancybox working, you will need to have this code present in your index.html file:

  <head>
    <link href="./fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen" />
    <script>!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');</script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

    $("#various1").fancybox({
            'titlePosition'     : 'inside',
            'transitionIn'      : 'none',
            'transitionOut'     : 'none'
        });
    });
    </script>
  </head>

 <body>

    <a id="various1" href="#inline1" title="Put a title here">Name of Link Here</a>
    <div style="display: none;">
        <div id="inline1" style="width:400px;height:100px;overflow:auto;">
                   Write whatever text you want right here!!
        </div>
    </div> 

</body>

Remember to be precise about what folders your script files are placed in and where you are pointing to in the Head tag; they must correspond.

score 2 · Answer 3 · answered Nov 02 '12 at 21:59

Just something I found for Wordpress users,

As obvious as it sounds, If your div is returning some AJAX content based on say a header that would commonly link out to a new post page, some tutorials will say to return false since you're returning the post data on the same page and the return would prevent the page from moving. However if you return false, you also prevent Fancybox2 from doing it's thing as well. I spent hours trying to figure that stupid simple thing out.

So for these kind of links, just make sure that the href property is the hashed (#) div you wish to select, and in your javascript, make sure that you do not return false since you no longer will need to.

Simple I know ^_^

Loading inline content using FancyBox

3 Answers3

Linked