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: 6 years ago
Size: 5,885 bytes


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">
<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">
	$('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){ 
				return false;
				return false;
<div id="header-wrapper">
	<div id="header">
		<div id="menu">
				<li><a href="./" class="first">Home</a></li>
				<li><a href="./contact">Contact</a></li>
		<!-- end #menu -->
		<div id="search">
			<form method="get" action="">
					<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" />
		<!-- end #search -->
<!-- end #header -->
<!-- end #header-wrapper -->
<div id="logo">
	<h1><a href="#">caobox.com</a></h1>
	<p><em>free jquery plugins </em></p>
<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;"
	<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">
function mediaStop(){
	var obj = document.getElementById("VIDEO");
<a href="photos/image1.jpg" class="lightbox"><img src="photos/thumb_image1.jpg" /></a>

<a href="#" onclick="mediaStop();">Stop</a>
				<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;" >
					<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><a href="divbox.html">View more</a> &raquo;</p>
			<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>
		<!-- end #content -->
		<div id="sidebar">
					<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 type="text/javascript"
					<h2>jDivBox history</h2>
						<li><a href="#">2010-06-11: Launch jDivBox</a></li>
						<li><a href="#">2010-04-12: Launch jEmotions</a></li>
		<!-- end #sidebar -->
		<div style="clear: both;">&nbsp;</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>
	<!-- end #footer -->