Geeks With Blogs
Developers Friendly

I would like to provide a sample example of how to use JQuery fancy-box, to provide a rich look and feel to website.

 

Example:

In below example you have to update path to point JQuery link.

<html>
<head>
<title>Fancy-Box Sample</title>
<script src="../../javascript/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../../javascript/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="../../javascript/jquery.fancybox-1.3.4.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
$(document).ready(function () {
        $(".frame").fancybox({
            type: 'iframe',
            maxWidth: 800,
            maxHeight: 600,
            fitToView: false,
            width: '85%',
            height: '85%',
            autoSize: false,
            closeClick: false,
            openEffect: 'none',
            closeEffect: 'none'
        });
    });
</script>
</head>
<body>
    <div><a class="frame" href="http://www.facebook.com">Facebook</a></div>
    <div><a class="frame" href="http://www.youtube.com">Youtube</a></div>
</body>
</html>

 

Thanks!

Posted on Sunday, June 9, 2013 12:25 AM jQuery | Back to top


Comments on this post: jQuery Fancy-Box Sample

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © Manjunath K | Powered by: GeeksWithBlogs.net