Link to home
Create AccountLog in
Avatar of RNB
RNB

asked on

Fancybox calling an Iframe

I am trying to use fancybox to call some content that is on a file via iframe. and no matter what I have tried it just opens the page in the browser window and not in a fancybox pop up. How do I properly set up the code in my document for fancy box? If anyone is familiar with fancy box please help me! thanks in advance.

This what my simple page looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>fancybox</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
</head>
<body>

<a class="iframe" href="http://www.mysite.com/content.html">This goes to iframe</a>

<script type="text/javascript">
$(document).ready(function() {
        
        $("a.iframe").fancybox({
                'hideOnContentClick': false,
                'frameWidth': 950,
                'frameHeight': 500,
                'centerOnScroll': true,
                'overlayOpacity': .75
        });
 
});
</script>

</body>
</html>

Open in new window

Avatar of Chad Smith
Chad Smith
Flag of United States of America image

add the type: iframe property
$("a.iframe").fancybox({
                'hideOnContentClick': false,
                'frameWidth': 950,
                'frameHeight': 500,
                'centerOnScroll': true,
                'overlayOpacity': .75,
		'type': 'iframe'
        });

Open in new window

Avatar of RNB
RNB

ASKER

Thank you for your swift reply knight00 however that has still not resolved my issue, the link is still just opening in a new window, not popping up via fancybox.
What browser are you using, and are you sure the jquery and fancybox libraries are loading?
What browser are you using, and are you sure the jquery and fancybox libraries are loading?
What browser are you using, and are you sure the jquery and fancybox libraries are loading?
Does the browser gives javascript error?  
You should work with local copies from libraries example jquery, it may not work.
Avatar of RNB

ASKER

@knight00: im using google chrome, i highly doubt my browser is the issue.

@jediborre: I followed the instructions for fancybox and it told me to call the jQuery using a CDN such as the one i have in there being called from google, which is the one in the fancy box example.
Are the paths to the fancybox libraries correct? The code is correct and should work if the libraries are loading
Avatar of RNB

ASKER

I got the paths off of the fancybox website that they tell you to use.
Is the fancybox directory in the same directory as the webpage in question?
ASKER CERTIFIED SOLUTION
Avatar of Chad Smith
Chad Smith
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account