Below is the sample code, but the destination is not opening in modal window. Is there anything I missed.
<!DOCTYPE HTML>
<!--
Author Olivia Hoback
www.olivia.nu
-->
<html>
<head>
<title>Fancybox Demo</title>
<!-- Add jQuery basic library -->
<script type="text/javascript" src="jquery-lib.js"></script>
<!-- Add required fancyBox files -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
<!-- Optional, Add fancyBox for media, buttons, thumbs -->
<!-- Optional, Add mousewheel effect -->
<style>
body{
width: 100%;
padding: 0;
margin: 0;
font-family: "Century Gothic", sans-serif;
font-size: 90%;
}
#wrapper{
width: 90%;
max-width: 800px;
margin: 0 auto;
}
h2{
margin: 100px 0px 10px 0px;
}
#header{
margin-bottom: 5px;
}
#author{
margin: 5px 0px 50px 0px;
padding-bottom: 15px;
border-bottom: 1px solid #bdbdbd;
}
#footer{
margin: 150px 0px 100px 0px;
}
</style>
</head>
<body>
<div id="wrapper">
<p>
<a class="various" data-fancybox-type="iframe" href=http://www.google.co.in">Show external page using Iframe in a fancybox</a><br />
</p>
</div><!--end of wrapper-->
<script type="text/javascript">
$(document).ready(function(){
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
</body>
</html>