Simple jQuery and jQuery UI Based Lightbox Plugin - lightbox.ui

Simple jQuery and jQuery UI Based Lightbox Plugin - lightbox.ui
File Size: 10.3MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

An extremely simple Lightbox plugin based on jQuery and jQuery UI. The lightbox can be closed by clicking on the background overlay or the ESC key.

How to use it:

1. Include jQuery library, jQuery UI and lightbox.ui.js on your webpage

<script src="jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="lightbox.ui/lightbox.ui.js"></script>

2. Include required CSS files on your web page

<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3.custom/css/flick/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" type="text/css" href="lightbox.ui/lightbox.ui.css">

3. The html

<a class="lightbox" href="images/image1.png">
<img alt="Description" title="Image 1" src="images/thumbs/image1.png" alt="image1" />
</a>

4. Call the plugin

<script type="text/javascript">
$(document).ready(function() {	
$(".lightbox").lightboxUi();
});
</script>

Change Log:

v0.0.18 (2013-06-10)

  • new fancy features
  • Enable ajax loading function 

v0.0.11 (2013-06-10)

  • resizable width/height on click

v0.0.8 (2013-06-07)

  • adding CSS navigation arrows

This awesome jQuery plugin is developed by ochorocho. For more Advanced Usages, please check the demo page or visit the official website.