ttelang/divbox

View on GitHub
index.html

Summary

Maintainability
Test Coverage
---
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>