Masonry Style Gallery With Lightbox Slider - WS-LiSli
File Size: | 63.2 KB |
---|---|
Views Total: | 7998 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
WS-LiSli is a gallery lightbox jQuery plugin that organizes & displays your thumbnail list in a Masonry-like responsive grid layout and showcases the full images in a lightbox slider when clicked.
More features:
- Custom gallery/slider controls.
- Configurable animations.
- Stretch the image to the fullscreen and use it as the background of the lightbox popup.
How to use it:
1. Load jQuery JavaScript library and the WS-LiSli plugin's files in the HTML file.
<link rel="stylesheet" href="/path/to/style.css" /> <script src="/path/to/jquery.min.js"></script> <script src="/path/to/lightbox.js" defer></script>
2. Load the Font Awesome Iconic Font for navigation & close buttons.
<link rel="stylesheet" href="/path/to/fontawesome/all.css" />
3. Insert your images into an unorerdered list as follows:
<ul id="WS-LiSli" class="grid"> <li> <img title="Title 1" src="1.jpg" data-description="More Description Here"> </li> <li> <img title="Title 2" src="2.jpg" data-description="More Description Here"> </li> <li> <img title="Title 3" src="3.jpg" data-description="More Description Here"> </li> <li> <img title="Title 4" src="4.jpg" data-description="More Description Here"> </li> <li> <img title="Title 5" src="5.jpg" data-description="More Description Here"> </li> </ul>
4. Call the function WS_lightbox_free
on the image list and done.
$('#WS-LiSli').WS_lightbox_free({ // options here });
5. Customize the controls.
$('#WS-LiSli').WS_lightbox_free({ enable : [ 'arrows', 'close' ], buttons : { size : 50, style : 'square', color : 'white', color_icon : 'black', border_width : 0, border_color : 'white', opacity : .8, hover_opacity : 1 }, arrows : { position : 'outside', // 'inside', 'outside', 'attached' style : 'square', // 'default', 'square', 'circle', 'rounded', 'svelt' icon_style : 'caret', // 'default', 'caret', 'angle', 'chevron' icon_size : 24, opacity : .2, hover_effect : 'translate', // 'zoom', 'shrink', 'translate' hover_opacity : .5 } });
6. Customize the background of the lightbox slider.
$('#WS-LiSli').WS_lightbox_free({ background : { filter : 'image', opacity : .5 } });
7. Customize the styles of the images.
$('#WS-LiSli').WS_lightbox_free({ image : { border_radius : 0, border_color : '', border_width : 0, bg : 'none' } });
8. Config the animation speed.
$('#WS-LiSli').WS_lightbox_free({ // 'low', 'normal', 'fast' or integer display_velocity : 'low', slide_velocity : 'normal', });
This awesome jQuery plugin is developed by AlexandreBulete. For more Advanced Usages, please check the demo page or visit the official website.