Minimal Image Lightbox Plugin With jQuery - mjulb

File Size: 12.7 KB
Views Total: 1401
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Image Lightbox Plugin With jQuery - mjulb

mjulb (Micro jQuery Lightbox) is a minimalist jQuery plugin for showing your images in a lightbox popup with CSS3 transition effects. You can navigate between images by clicking on them in the lightbox. Click anywhere on the background overlay will close the lightbox.

How to use it:

1. Load the jQuery mjulb plugin's stylesheet in the head section of the webpage.

<link href="mjulb.min.css" rel="stylesheet">

2. Insert images into your webpage and use a links to specify the path to the large images. Note that the images displayed in the gallery lightbox must have the same CSS class.

<a class="demo" href="1.jpg">
  <img src="thumb-1.jpg"></a>
<a class="demo" href="2.jpg">
  <img src="thumb-2.jpg"></a>
<a class="demo" href="3.jpg">
  <img src="thumb-3.jpg"></a>
...

3. Load jQuery library and the jQuery mjulb plugin's script at the bottom of the webpage.

<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="mjulb.min.js"></script>

4. Call the function on the a tag and done.

$('a.demo').mjulb();

5. Customization options with default values.

$('a.demo').mjulb({

  // 0 to 1
  scaling: 0.9, 

  // transition speed in ms
  transition: 300
  
});

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