Masonry Style Gallery With Lightbox Slider - WS-LiSli

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.