fancyBox gallery link will not fire in IE inside prettyPhoto Iframe

Question

On my DotNetNuke website, I created a module that uses datatables to display some items that members of my organization wish to sell. The ItemName column is a link to a aspx project called ItemView.aspx, this page contains details about the item which is populated from that link on the parent page or the ItemName column on the dnn module. Here is the link:

<td><p><a href="http://www.mysite.com/traderboard/ItemView.aspx?ItemName=<%# Eval("ItemName") %>&num=<%# Eval("num") %>&ImageAlt1=<%# Eval("ImageAlt1") %>&ImageAlt2=<%# Eval("ImageAlt2") %>&ImageAlt3=<%# Eval("ImageAlt3") %>?iframe=true&amp;width=800&amp;height=600" style="border: 0px currentColor;" rel="prettyPhoto[iframes]"><%# Eval("ItemName") %></a>

Once on the ItemView page (which is pulled up in a prettyPhoto Iframe) if the user has decided to upload any pictures he is presented with a link.

Here is the jQuery snippet that i use to populate specific user images in my .aspx file:

$("#hplImageTest").click(function () {
            $.fancybox.open([
                {
                    href: '<%=Image1%>',
                    title: 'My title'
                }, {
                    href: '<%=Image2%>',
                    title: '2nd title'
                }, {
                    href: '<%=Image3%>'
                }
            ], {
                helpers: {
                    thumbs: {
                        width: 75,
                        height: 50
                    }
                }
            });
        }); 

finally, I make a call to the image on the link located on the ItemView page.

protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {

            lblRow.Text = Request.QueryString["num"];
            PostPath1 = Request.QueryString["ImageAlt1"];
            PostPath2 = Request.QueryString["ImageAlt2"];
            PostPath3 = Request.QueryString["ImageAlt3"];

            Image1 = "http://www.mysite.com/" + PostPath1;
            Image2 = "http://www.mysite.com/" + PostPath2;
            Image3 = "http://www.mysite.com/" + PostPath3;
            string empty = "../images/tbimages/noImage.jpg";

            if ((PostPath1 == empty) && (PostPath2 == empty) && (PostPath3 == empty))
            {

                hplImageTest.Text = "No Images Available";

            }
            else
            {
                hplImageTest.NavigateUrl = "javascript:;";
                hplImageTest.Text = "Click here for Image(s)";
            }
        }
    }

And it works in Firefox, Safari and Chrome but it gives me nothing in IE. Has anyone else run into this issue?

Answer 1

I figured it out. I friend pointed out to me that IE will disable links from firing on a page, if the page called in the iFrame is not on the same server. While both pages were on the same server and under the same DNN installation the URL being called was using a different URL then the parent page.

So, since all URLs in a single DNN installation points to the same folder on my server i thought there should be no harm in changing the URL to the same as the parent page.

Once I changed this

Image1 = "http://www.mysite.com/" + PostPath1;
Image2 = "http://www.mysite.com/" + PostPath2;
Image3 = "http://www.mysite.com/" + PostPath3;

to this:

Image1 = "http://www.myparentsite.com/" + PostPath1;
Image2 = "http://www.myparentsite.com/" + PostPath2;
Image3 = "http://www.myparentsite.com/" + PostPath3;

IE started working! I hope you guys will find this useful!