File: index.html

Recommend this page to a friend!
  Classes of Jin Nguyen   Divbox   index.html   Download  
File: index.html
Role: Example script
Content type: text/plain
Description: Documentation
Class: Divbox
jQuery plugin to open modal lightbox in an element
Author: By
Last change:
Date: 10 years ago
Size: 5,885 bytes
 

Contents

Class file image Download
<!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"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Assiduous by Free CSS Templates</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="screen" /> <link href="css/divbox.css" rel="stylesheet" type="text/css" media="screen" /> <link rel="stylesheet" type="text/css" href="css/skin2.css" /> <script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script src="divbox.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('a.lightbox').divbox({caption: false}); $('a.lightbox2').divbox({caption: false,skin: 'divbox_facebook', width: 100, height: 100}); $('a.iframe').divbox({ width: 200, height: 200 , caption: false}); $('a.ajax').divbox({ type: 'ajax', width: 200, height: 200 , caption: false,api:{ afterLoad: function(o){ $(o).find('a.close').click(function(){ o.closed(); return false; }); $(o).find('a.resize').click(function(){ o.resize(200,50); return false; }); } }}); }); </script> </head> <body> <div id="header-wrapper"> <div id="header"> <div id="menu"> <ul> <li><a href="./" class="first">Home</a></li> <li><a href="./contact">Contact</a></li> </ul> </div> <!-- end #menu --> <div id="search"> <form method="get" action=""> <fieldset> <input type="text" name="s" id="search-text" size="15" value="Google Search" onfocus="if(this.value==this.defaultValue) this.value = '';" onblur="if(this.value=='') this.value = this.defaultValue" /> <input type="submit" id="search-submit" value="GO" /> </fieldset> </form> </div> <!-- end #search --> </div> </div> <!-- end #header --> <!-- end #header-wrapper --> <div id="logo"> <h1><a href="#">caobox.com</a></h1> <p><em>free jquery plugins </em></p> </div> <hr /> <!-- end #logo --> <div id="page"> <div id="page-bgtop"> <div id="content"> <div class="post"> <h2 class="title"><a href="divbox.html">jDivBox </a></h2> <!-- <OBJECT id="VIDEO" width="320" height="240" style="position:absolute; left:0;top:0;" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject"> <PARAM NAME="URL" VALUE="photos/media.wmv"> <PARAM NAME="SendPlayStateChangeEvents" VALUE="True"> <PARAM NAME="AutoStart" VALUE="True"> <PARAM name="uiMode" value="none"> <PARAM name="PlayCount" value="9999"> </OBJECT> --><script> function mediaStop(){ var obj = document.getElementById("VIDEO"); obj.controls.stop(); } </script> <a href="photos/image1.jpg" class="lightbox"><img src="photos/thumb_image1.jpg" /></a> <div> <h2>Control</h2> <a href="#" onclick="mediaStop();">Stop</a> </div> <div class="entry"> <p><strong>jDivBox</strong> plugin is simple, easy style format, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector. <strong>jDivBox</strong> is a plugin for jQuery. It was inspired in Multibox by <a href="http://phatfusion.net/multibox/" target="_blank">http://phatfusion.net/multibox/</a>.</p> <p id="window_media" style="width: 50px; height: 50px; overflow: hidden;" > </p> <p> <a href="photos/image1.jpg" class="lightbox"><img src="photos/thumb_image1.jpg" /></a> <a href="photos/image2.jpg" class="lightbox2"><img src="photos/thumb_image2.jpg" /></a> <a href="photos/image3.jpg" class="lightbox"><img src="photos/thumb_image3.jpg" /></a> <a href="photos/image4.jpg" class="lightbox"><img src="photos/thumb_image4.jpg" /></a> <a href="photos/image5.jpg" class="lightbox"><img src="photos/thumb_image5.jpg" /></a><br /><br /> <a href="photos/media.wmv" class="lightbox">mp4 example</a><br /> <a href="photos/video.mov" class="lightbox">mov example</a><br /> <a href="ajax.html" class="ajax">After divbox loaded</a> <a href="ajax2.html" onclick="return $.divbox('photos/image1.jpg');">Call by onclick event</a> <br /> <a href="http://www.youtube.com/watch?v=_7_LEjjnyMY&feature=related" class="lightbox">Youtube video</a><br /> <a href="http://vimeo.com/20643420" class="lightbox">Vimeo video</a> FLV file | SWF file | MP3 file </p> <p><a href="divbox.html">View more</a> &raquo;</p> </div> </div> <div class="post"> <h2 class="title"><a href="emotions.html"> jEmotions</a></h2> <div class="entry"> <p>jEmotions is a simple jQuery plugins to on/off the emotions on your sites. </p> </div> </div> </div> <!-- end #content --> <div id="sidebar"> <ul> <li> <p><script type="text/javascript"><!-- google_ad_client = "pub-1823237824396673"; /* 160x600, created 6/11/10 */ google_ad_slot = "1843046949"; google_ad_width = 160; google_ad_height = 600; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </p> </li> <li> <h2>jDivBox history</h2> <ul> <li><a href="#">2010-06-11: Launch jDivBox</a></li> </ul> </li> <li> <h2>jEmotion</h2> <ul> <li><a href="#">2010-04-12: Launch jEmotions</a></li> </ul> </li> </ul> </div> <!-- end #sidebar --> <div style="clear: both;">&nbsp;</div> </div> <!-- end #page --> <div id="footer"> <p>Copyright (c) 2008 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p> </div> <!-- end #footer --> </div> </body> </html>