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.
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" :
