Share on Google+Share on Google+

Fancy Box plug-in for text, portal & swf file

Advertisement
In this section, you will learn how to display text, portal & swf file inside fancy box by clicking on link.

Fancy Box plug-in for text, portal & swf file

In this section, you will learn how to display text, portal & swf file inside fancy box by clicking on link. This plug in is very easy to use but very effective to implement .The plug-in we are using here is "jquery.fancybox-1.3.1.js". When you click on any link like text, portal & swf file, the output will be open in a window with blurring the the back ground. You can set height , width, auto scale , title position etc.

WebfancyBox.html

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>FancyBox plug-in for text, portal & swf file</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js">
</script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<link rel="stylesheet" href="./fancybox/style.css" />
<script type="text/javascript">
$(document).ready(function() {
/*
* Examples - various
*/

$("#various1").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
$("#various3").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});

$("#various4").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
</head>
<body>
<div id="content">
<h1>fancybox</h1>
<p>
Various examples
</p>
<hr />
<ul>
<li><a id="various1" href="#inline1" title="ABOUT jQuery">Text</a></li>
<li><a id="various3" href="http://www.roseindia.net/">Iframe</a></li>
<li><a id="various4" href="fancybox/bubbles.swf">Swf</a></li>
</ul>

<div style="display: none;">
<div id="inline1" style="width:400px;height:100px;overflow:auto;">
jQuery is a cross browser, java Script library created by 'John Resig' in 2006 with a nice motto: "Write less, do more". It handles the client side scripting of HTML.jQuery simplifies navigation of a document , select DOM elements, create animations, handle events, and develop Ajax applications.Using jQuery we can also develop plug-in on the top of the JavaScript library.
</div>
</div>
</div>
</body>
</html>

OUTPUT

When you click on "iframe" :

When you click on "swf" :

When you click on "text" :

Download Source Code

Click here to see demo

Advertisements

Advertisement

Posted on: August 12, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.