Versatile jQuery Image Lightbox/Slider/Gallery Plugin - miniSet
File Size: | 5.12 MB |
---|---|
Views Total: | 4356 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
miniSet is a most versatile jQuery plugin that provides a simple way to display your images in the lightbox, slideshow or lightbox gallery.
Features:
- Lightbox: Click on an image to open the Lightbox. Click anywhere or press ESC to close it.
- Slider: Click on the bullet points under the Slider to change the image or wait a moment for the image to change by itself.
- Gallery lightbox: Click one of the Gallery images to enlarge it and navigate through the Gallery by clicking on left or right arrows.
Basic usage:
1. Include jQuery library together with miniset.css
and miniSet.js
in your Html page.
<link href="css/miniset.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src='js/miniSet.js'></script>
2. Wrap your images into a container.
<div class="demo"> <img src="img/1.jpg"> <img src="img/2.jpg"> <img src="img/3.jpg"> </div>
3. Display the images in a slider.
$('#demo').showSlider({ 'height': 300, 'fadeTime': 500, 'intervalTime': 5000, 'tray': true });
4. Display the images in a gallery lightbox.
$('#demo').showGallery({ 'imgCounter': true, 'width': 165, 'height': 95 });
5. Display a lightbox for an image without JavaScript.
<div class="ms-lightbox-group"> <img src="1.jpg" class="ms-lightbox" title="my_title 1"> <img src="2.jpg" class="ms-lightbox" title="my_title 2"> <img src="3.jpg" class="ms-lightbox" title="my_title 3"> <!-- ... --> </div>
This awesome jQuery plugin is developed by agniukaitis. For more Advanced Usages, please check the demo page or visit the official website.