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

 
 

Share on Google+Share on Google+
Fancy Box plug-in for text, portal & swf file
Posted on: August 12, 2010 at 12:00 AM
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

Advertisement

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


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.

Posted on: August 12, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com