Having problems with Fancybox (P

Question

I'm trying to add Fancybox to my ASP.NET MVC application but I'm having some troubles.

As you can see, I added references to jQuery and Fancybox. The css is incapsulated inside of my style.css. And all the pictures are in the right place.

<link rel="stylesheet" href="/Content/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="/Scripts/jquery.fancybox-1.2.6.pack.js"></script>

Well, I added this lines to fire up the Fancybox plugin:

<script type="text/javascript">

    $(document).ready(function() {
        $("a.zoom").fancybox(); // The a with zoom class
    });

</script>

Then I have the link:

<a class="zoom" href="http://www.nytimes.com"&gt;This goes to iframe</a>

But when I click on the link I get a: Microsoft JScript runtime error: Permission denied

And this is my screen after that:

I don't know what to do. I'm desperate because I've spent all my day trying to figuring out what's happening. Please, help! :)

Answer 1

You need to add the class 'iframe' to the link to tell fancybox to use an iframe to load the content to avoid a conflict with the same origin policy. The same origin policy prevents the browser from downloading external content via AJAX. Alternatively it appears you can add a ?iframe parameter to the URL and achieve the same effect.

Answer 2

Hi Guillermo,

Could you perhaps give me an idea of how you sorted yours out?

I'm quite new to this and having trouble with the fancybox not picking my iframe up as AJAX, so my form(in the lightbox) throws errors when clicking on 'Next'.

Please help! Its really urgent!