Responsive Sliding Lightbox Plugin with jQuery - Strip.js

Responsive Sliding Lightbox Plugin with jQuery - Strip.js
File Size: 1.33 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Strip.js is a snazzy and space-saving jQuery plugin to create a responsive lightbox that slides out from the edge of your screen and partially covers the current page.

The plugin is licensed under the GPL v3 License and free for non-commercial & personal use.

Features:

  • Displays a gallery of images in a lightbox with controls like a slider.
  • Fully responsive and works nicely on mobile devices.
  • Supports images and Youtube/Vimeo videos.
  • Lots of options to create your own styles.

How to use it:

1. Include the latest version of jQuery library and the strip.min.js script at the bottom of your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="src/js/strip.min.js"></script>

2. Insert a group of images into your web page. To display them in a lightbox gallery, make sure the links of your images have the same data-strip-group parameter.

<a href="images/large/1.jpg" data-strip-caption="Image caption here" data-strip-group="gallery-name">
  <img src="images/thumb/1.jpg"> 
</a>

<a href="images/large/2.jpg" data-strip-caption="Image caption here" data-strip-group="gallery-name">
  <img src="images/thumb/2.jpg"> 
</a>

<a href="images/large/3.jpg" data-strip-caption="Image caption here" data-strip-group="gallery-name">
  <img src="images/thumb/3.jpg"> 
</a>

3. Done. The plugin will auto be initialized on document ready. Available options are listed below.

effects: { // Sets the duration of individual effects, or disables them when set to false.
  spinner: {
    show: 200,
    hide: 200
  },
  transition: {
    min: 175,
    max: 250
  },
  ui: {
    show: 0,
    hide: 200
  },
  window: {
    show: 300,
    hide: 300
  }
},
maxWidth: 500, // Sets a maximum width for the content.
maxHeight: 500, // Sets a maximum height for the content.
hideOnClickOutside: !0, // hideOnClickOutsideHide Strip when clicking outside of it or an element that could open it, enabled by default.
keyboard: { // keyboardEnable or disable individual keyboard buttons or all of them when set to false.
  left: !0,
  right: !0,
  esc: !0
},
loop: !0, // When set to true a group becomes a loop, making it possible to move between the first and last item
overlap: !0, // overlapAllows buttons to overlap the content when set to true, which is the default. Disabling overlap will cause buttons to be positioned outside of the content.
preload: [1, 2], // Sets the items to preload before and after the current item, or disables preloading when set to false.
position: !0, // Show or hide the position indicator.
side: "right", // sideSet the side to position Strip on to top, bottom, left or right.
vimeo: { // vimeoSets the player parameters of a Vimeo video, available options can be found in the Vimeo 
  autoplay: 1,
  api: 1,
  title: 1,
  byline: 1,
  portrait: 0,
  loop: 0
},
youtube: { // Sets the player parameters of a Youtube video, available options can be found in the Youtube 
  autoplay: 1,
  controls: 1,
  enablejsapi: 1,
  hd: 1,
  iv_load_policy: 3,
  loop: 0,
  modestbranding: 1,
  rel: 0,
  vq: "hd1080"
},
skin: 'strip', // Sets the skin. If you've provided default options for this skin they'll be applied as a starting point for other options.
afterPosition: // A function to call after the position changed. The first argument is the current position within the group.
afterHide: // A function to call after Strip is fully hidden.
onShow: // A function to call when Strip comes into view.

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