Minimal Image Lightbox Plugin With jQuery mjulb - Download Minimal Image Lightbox Plugin With jQuery - mjulb

Download Minimal Image Lightbox Plugin With jQuery – mjulb

Posted on

This time I will share jQuery Plugin and tutorial about Minimal Image Lightbox Plugin With jQuery – mjulb, hope it will help you in programming stack.

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



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.

1 <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.

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

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

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

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

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

5. Customization options with default values.

1 $('a.demo').mjulb({
2  
3   // 0 to 1
4   scaling: 0.9,
5  
6   // transition speed in ms
7   transition: 300
8    
9 });

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




source : jqueryscript.net