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

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

Fancy Box plug-in for text, portal & swf file
Posted on: August 12, 2010 at 12:00 AM

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

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

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics