index.html
---
layout: default
title: "Divbox"
---
<head>
<link href="css/divbox.css" rel="stylesheet" type="text/css" media="screen" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="divbox.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.lightbox').divbox();
$('a.ajax').divbox({
type: 'ajax'
});
});
</script>
</head>
<body>
<div>
<h1>DivBox</h1>
<p>
<strong>DivBox</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.
<em>DivBox</em> is a plugin for jQuery..
</p>
<h2>An image link without using divbox</h2>
<ul>
<li><a href="photos/image1.jpg" ><img src="photos/thumb_image1.jpg" /></a></li>
</ul>
<h2>Image links with divbox</h2>
<ul>
<li><a href="photos/image2.jpg" class="lightbox"><img src="photos/thumb_image2.jpg" /></a></li>
<li><a href="photos/image3.jpg" class="lightbox"><img src="photos/thumb_image3.jpg" /></a></li>
<li><a href="photos/image4.jpg" class="lightbox"><img src="photos/thumb_image4.jpg" /></a></li>
<li><a href="photos/image5.jpg" class="lightbox"><img src="photos/thumb_image5.jpg" /></a></li>
</ul>
<h2>A link to HTML page in an overlay</h2>
<ul>
<li><a href="pages/ajax.html" class="ajax">Click Here</a></li>
</ul>
<h2>Video links with divbox </h2>
<ul>
<li><a href="videos/video.flv" class="lightbox">FLV file</a> </li>
<li><a href="videos/flash.swf" class="lightbox">SWF file</a> </li>
<li><a href="videos/video.mp4" class="lightbox">MP4 file</a> </li>
</ul>
</div>
</body>