I have a set of jquery tabs for top navigation (tabs are just text links, not "graphical" tabs). When you click a link, I want a fancybox to open containing an external html file. This is not happening. No fancy box is launching. Below is my code. Could you guys/gals let me know what I am doing wrong and how to fix? I'm having trouble figuring it out. Thanks.
Scripts:
<link rel="stylesheet" href="../css/jquery.fancybox.css" type="text/css" />
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script language="javascript" src="../js/fancybox/jquery.fancybox.js"></script>
HTML:
<script type="text/javascript">
$(document).ready(function() {
$("#lesson-tabs").tabs();
$(".tabs-content").fancybox({
'type':'iframe',
'maxWidth' : 580,
'maxHeight' : 390,
'fitToView' : false,
'width' : 500,
'height' : 300,
'autoSize' : false
});
});
</script>
<div class="overhide" id="lesson-tabs">
<ul>
<li>
<span class="fun2learn-add" ></span>
<a href="lessons/addition1.html" class="first-class2 tabs-content" >Addition</a>
</li>
<li>
<span class="fun2learn-subtract" ></span>
<a href="lessons/subtraction1.html" class="first-class2 tabs-content">Subtraction</a>
</li>
</ul>
</div>
lessons/addition1.html code for fancybox:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Just try it!</title>
<style>
div {font-family:Arial, Helvetica, sans-serif;font-size:16px;}
.blkstyle {display:block;}
input[type=submit] {margin-top:10px;}
</style>
</head>
<body>
<div>
<p>If you have 14 apples, Justin has 12 and Mary gives you 7 more apples, but only gives Justin 3 apples, how many apples would you and Justin have altogether?</p>
<form>
<span class="blkstyle"><input type="radio" name="apples" /><label>24</label></span>
<span class="blkstyle"><input type="radio" name="apples" /><label>42</label></span>
<span class="blkstyle"><input type="radio" name="apples" /><label>36</label></span>
<span class="blkstyle"><input type="radio" name="apples" /><label>16</label></span>
<input type="submit" value="Answer" />
</form>
</div>
</body>
</html>
lessons/subtraction1.html code for fancybox:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Just try it!</title>
<style>
div {font-family:Arial, Helvetica, sans-serif;font-size:16px;}
.blkstyle {display:block;}
input[type=submit] {margin-top:10px;}
</style>
</head>
<body>
<div>
<p>Jamie has 38 lives left in play for his new video game.
He loses 6 lives on level Nine and 5 lives on level Twelve.
He hasn't gained anymore lives until level Twenty, where he gets 4 more,
but loses 1 life in play. How many lives does Jamie have left in play?</p>
<form>
<span class="blkstyle"><input type="radio" name="apples" /><label >26</label></span>
<span class="blkstyle"><input type="radio" name="apples" /><label>30</label></span>
<span class="blkstyle"><input type="radio" name="apples" /><label>22</label></span>
<span class="blkstyle"><input type="radio" name="apples" /><label>16</label></span>
<input type="submit" value="Answer" class="blkstyle"/>
</form>
</div>
</body>
</html>
