Embarrassed that I can't get fancybox working

Question

MVC 3 and fancybox 2.

Should be straight forward but somehow I have made a mess of things.

First since I am using this only on one page (cshtml) I add the scripts via:

Html.AddScriptParts(@Url.Content("~/Scripts/fancybox2/source/jquery.fancybox.pack.js?v=2.1.5"));
Html.AddCssFileParts(@Url.Content("~/Scripts/fancybox2/source/jquery.fancybox.css?v=2.1.5"));

When I look in the debugger I see jquery.fancybox.pzck.js loaded. When I inspect the element I do not see the jquery.fancybox.css styles applied...(css is default so maybe there aren't any to apply?)

My onready is:

$(function ()
{
   $(".fancybox").fancybox();
});

and my link is:

<div id="ThreadLink">
   <a id="ForumFrameLink" href="https://www.google.com" class="fancybox">asdf</a>
</div>

It is acting as though my onready is not attaching...in other words it just follows the link to Google.

What am I missing?

TIA

Answer 1

In the JSFiddle link you provided: http://jsfiddle.net/ramjet/54kag/

Use the following JS:

$(document).ready(function() {
    $("#ThreadLink a").fancybox({
        type: "iframe"
    });
});

And then your HTML simply becomes:

<div id="ThreadLink">
    <a id="ForumFrameLink" href="http://www.foxnews.com">asdf</a>
</div>

It seems that type: "iframe" needed to be set. After glancing over the documentation, it looks like you can also just set the class of the a to iframe instead to get the same functionality.

"Corrected" fiddle for your viewing pleasure: http://jsfiddle.net/54kag/1/