Question

I am trying to create a gallery of inline content with Fancybox 2, and am failing miserably.

I checked out some other resources online and they seem to indicate doing this relatively easily, yet, I cannot seem to get it to work.

Here is my fiddle:

http://jsfiddle.net/beefchimi/jtxHd/2/

Now, I feel like the fiddle is not loading the resources, so thats a problem. But even with the resources this does not work, I get the fancybox error.

Resources:

http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.3
http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.3

Any help would be greatly appreciated.

EDIT: So I can’t submit my question without including some code, because linking to jsfiddle isn’t okay, so, here is my markup and fancybox initialization, which you will also find in the jsfiddle:

HTML:

<section><!-- Gallery 1 |begin| -->

    <!-- Inline post-1 -->
    <article>
        <a href="post-1" class="inlinepopup" rel="gallery1">Gallery 1: post-1 &gt; post-2 &gt; post-3</a>
        <div id="post-1">Inline content for #post-1. Group is Gallery 1.</div>
    </article>

    <!-- Inline post-2 -->
    <article>
        <a href="post-2" class="inlinepopup" rel="gallery1">Gallery 1: post-1 &lt; post-2 &gt; post-3</a>
        <div id="post-2">Inline content for #post-2. Group is Gallery 1.</div>
    </article>

    <!-- Inline post-3 -->
    <article>
        <a href="post-3" class="inlinepopup" rel="gallery1">Gallery 1: post-1 &lt; post-2 &lt; post-3</a>
        <div id="post-3">Inline content for #post-3. Group is Gallery 1.</div>
    </article>

</section><!-- Gallery 1 |end| -->

<section><!-- Gallery 2 |begin| -->

    <!-- Inline post-4 -->
    <article>
        <a href="post-4" class="inlinepopup" rel="gallery2">Gallery 2: post-4 &gt; post-5</a>
        <div id="post-4">Inline content for #post-4. Group is Gallery 2.</div>
    </article>

    <!-- Inline post-5 -->
    <article>
        <a href="post-5" class="inlinepopup" rel="gallery2">Gallery 2: post-4 &lt; post-5</a>
        <div id="post-2">Inline content for #post-5. Group is Gallery 2.</div>
    </article>

</section><!-- Gallery 2 |end| -->

jQuery:

$(document).ready(function() {

    $('a.inlinepopup').fancybox({
        'width'           : '75%',
        'height'          : '75%',
        'autoScale'       : false,
        'type'            : 'inline'
    });

});

Answer 1

Where you are linking to your inline content you need to include a # at the beginning of the href

So change your href="post-1" to href="#post-1"

In context it should be like this:

<!-- Inline post-1 -->
<article>
    <a href="#post-1" class="inlinepopup" rel="gallery1">Gallery 1: post-1 &gt; post-2 &gt; post-3</a>
    <div id="post-1">Inline content for #post-1. Group is Gallery 1.</div>
</article>

This might not be the only error, but it is a first one to look at. Also check for any JS errors in Firebug or Web Inspector.