Loading http://www.google.com in Facebox

[Sebastian]

Hi guys.

I have a problem, when i am using your Facebox plugin.

I want too load a webpage in the facebox, like this:
<a href="http://www.google.com" title="Google" rel="facebox">Google</
a>

It works and the webpage gets loaded in the facebox.

But all my css styles gets overwritten by the page loaded in the
facebox.

Can I fix that?

With kind regards,
Sebastian

[Michael Griffiths]

The way that the Facebox loads the remote files is using AJAX which
doesn't allow cross-domain content.

I ended up adding an <iframe> feature to the Facebox which requires
the following additions:

I've added this to 67 to capture the iframe option.

else if (data.iframe) fillFaceboxFromIFrame(data.iframe);

And then added the 'fillFaceboxFromIframe' function..

function fillFaceboxFromIFrame(href, klass) {

var data = $('<iframe src="' + href + '" width="100%" height="100"
scrolling="no" frameborder="0" />')
.width(500)
.height(500)
.load(function () {

var IFrame = this;
var height = $(this).height();
if (IFrame && !window.opera) {
IFrame.style.display = "block";
if (IFrame.contentDocument &&
IFrame.contentDocument.body.offsetHeight) {
height = IFrame.contentDocument.body.offsetHeight;
} else if (IFrame.Document &&
IFrame.Document.body.scrollHeight) {
height = IFrame.Document.body.scrollHeight;
}
}
$(this).height(height);

});

$.facebox.reveal(data, klass);

}

Usage example:

<script type="text/javascript">
$(function() {
$('a[rel*=facebox]').click(function (e) {
e.preventDefault();
$.facebox({ 'iframe' : $(this).attr('href') });
});
});
</script>

The code could always use for improvements, but works pretty well as
is.

[Sebastian]

Hi Michael.
Thanks for your reply.

I implemented your codes to facebox and i am really happy.
it works great, thanks for the solution and the code you posted here.

Have a nice weekend.

Bye Seb