miniSet
jQuery plugin for displaying images
1. About miniStage
MiniSet is a jQuery plugin that allows you to quickly and painlessly install an image gallery. It is a light weight yet powerful plugin that requires minimal configurations or JavaScript knowledge. The gallery allows to quickly browse through a list of images. A larger version of the image is opened up when an image is clicked. The larger image may be closed by clicking once more, or by pressing ESC button on your keyboard.
2. Installation
-
Extract miniSet files and include them in your project:
-
Include CSS file between the head tags:
<link rel='stylesheet/less' type='text/css' href='miniset.css'>
- Include jQuery before the closing body tag:
<script src='jquery.js'></script>
Alternatively, inlclude jQuery from a remote host:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script>
- Include miniSet right after jQuery:
<script src='ministage.js'></script>
The final result:
<html> <head> <link rel='stylesheet/less' type='text/css' href='miniset.css'> </head> <body> <script src='jquery.js'></script> <script src='miniset.js'></script> </body> </html>
3. Lightbox
Use miniSet Lightbox class to display sigle images. For a single image:
<img src='my_image.jpg' class="ms-lightbox" title="my_title">
Note: Make sure to add width and/or height attribute to the img attribute to get the required size.
Group several Lightbox class elements into a single container:
<div class="ms-lightbox-group"> <img src='my_image.jpg' class="ms-lightbox" title="my_title"> <img src='my_image.jpg' class="ms-lightbox" title="my_title"> <img src='my_image.jpg' class="ms-lightbox" title="my_title"> <!-- ... --> </div>
4. Slider
Include the miniSet Slider function call before the closing body tag, right after including jQuery and miniStage files:
<script src='jquery.js'></script> <script src='miniset.js'></script> <script> $( document ).ready(function() { // Initiate the Slider $('#ms-slider').showSlider({ 'height': 300, 'fadeTime': 500, 'intervalTime': 5000, 'tray': true }); }); </script> Note: The parameters passed to the function are optional, and will be set to default if not passed.
Once the call to Slider function is in place, create the miniSet Slider by including the following code:
<div class="ms-slider-group"> <ul id="ms-slider"> <li><img src='my_image_1.jpg'></li> <li><img src='my_image_2.jpg'></li> <li><img src='my_image_3.jpg'></li> <!-- ... --> </ul> </div>
Note: The slider will span the whole width of the container, so make sure to adjust your images accordingly.
5. Gallery
Include the miniSet Gallery function call before the closing body tag, right after including jQuery and miniStage files:
<script src='jquery.js'></script> <script src='miniset.js'></script> <script> $( document ).ready(function() { // Initiate the Gallery $('#ms-gallery').showGallery({ 'imgCounter': true, 'width': 165, 'height': 95 }); }); </script> Note: The parameters passed to the function are optional, and will be set to default if not passed.
Once the call to Gallery function is in place, create the miniSet Gallery by including the following code:
<div class="ms-gallery-group"> <ul id="ms-gallery"> <li><img src='my_image_1.jpg' title='my_title_1'></li> <li><img src='my_image_2.jpg' title='my_title_2'></li> <li><img src='my_image_3.jpg' title='my_title_3'></li> <!-- ... --> </ul> </div>
