fancybox mixed content problem on magento

Question

I am using fancybox for signin/Register links on the top. The site was fully http and certainly client wants to enable ssl and by that https enabled. So here the fancybox ended up in problem.

This is what header link phtml code.

<li id="header-main-info-left">
                                                Hi Guest, <a class="lightbox-start" href="<?php echo Mage::getUrl('customer/account/ajaxlogin');?>">Sign in</a>
                                                or <a class="lightbox-start"  href="<?php echo Mage::getUrl('',array('_secure'=>false));?>customer/account/create/">Register</a>                    
                                            </li>       

And when i click there is no response, after long debugging i found/guess its a mixed content problem. Since am loading a secure page content in unsecure page.

How can i load https content on http page using fancybox in magento.

Please help me out from this.

Thanks in advance.

Answer 1

Looks like you need to get your URLs starting with the // instead of http(s):// as then it does it all automagically for yous. Put firebug on the page, see what is thrown up as http and not https, find that in your code and put the // in the front.

More to the point, why are you using fancybox instead of doing your own modal window in normal javascript + prototype?

Answer 2

By using iframe type on fancybox i have loaded the https page over http in fancybox.

 jquery("a.lightbox-popup-start,a.lightbox-start").fancybox({
            'transitionIn'      :   'elastic',
            'transitionOut'     :   'elastic',
            'speedIn'       :   800, 
            'speedOut'      :   400, 
            'width'         :   740, 
            'height'        :   430, 
            'type'          :       'iframe',
            'overlayShow'       :   true
        }); 

But as you all guess again IE8 shows the content is denied because it loads secure content on iframe.

Also i tried to use these two options to close the fancybox. But its not working. Anybosy guess why its not working.

top.w49.fancybox.close();
parent.w49.fancybox.close();

Thanks in advance,