Responsive Sliding Lightbox Plugin with jQuery - Strip.js

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.

See Also:

• 10 Best Lightbox Gallery Plugins In JavaScript & CSS

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.

<link rel="stylesheet" href="/path/to/dist/css/strip.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/js/strip.pkgd.min.js"></script>

2. Insert a group of images (and/or Youtube/Vimeo videos) 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" class="strip" data-strip-caption="Image caption here" data-strip-group="gallery-name">
  <img src="images/thumb/1.jpg"> 
</a>

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

<a href="images/large/3.jpg" class="strip" data-strip-caption="Image caption here" data-strip-group="gallery-name" data-strip-group-options="loop: false, maxWidth: 500">
  <img src="images/thumb/3.jpg"> 
</a>

<a href="http://www.youtube.com/watch?v=5XD2kNopsUs"
   class="strip"
   data-strip-options="
     width: 853,
     height: 480,
     youtube: { autoplay: 0 }
   "
  >Youtube Video</a>

<a href="http://vimeo.com/32071937" class="strip">Vimeo</a>

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

// Sets the duration of individual effects, or disables them when set to false.
effects: {
  spinner: { show: 200, hide: 200 },
  transition: { min: 175, max: 250 },
  ui: { show: 0, hide: 200 },
  window: { show: 300, hide: 300 },
},

// Hide the lightbox on click outside
hideOnClickOutside: true,

// Enable or disable individual keyboard buttons or all of them when set to false.
keyboard: {
  left: true,
  right: true,
  esc: true,
},

// Infinite Loop
loop: true,

// Allows buttons to overlap the content. 
// Disabling overlap will cause buttons to be positioned outside of the content.
overlap: true,

// Sets the items to preload before and after the current item, or disables preloading when set to false.
preload: [1, 2],

// Show or hide the position indicator.
position: true,

// Skin name
skin: "strip",

// top, bottom, left or right
side: "right",

// Show loading spinner
spinner: true,

// Clicking elements will toggle Strip, this behavior can be disabed by setting toggle to false. 
// Doing so will keep Strip open even if an element is clicked twice.
toggle: true,

// delay in ms
uiDelay: 3000,

// Vimeo player options
vimeo: {
  autoplay: 1,
  api: 1,
  title: 1,
  byline: 1,
  portrait: 0,
  loop: 0,
},

// Youtube player options
youtube: {
  autoplay: 1,
  controls: 1,
  enablejsapi: 1,
  hd: 1,
  iv_load_policy: 3,
  loop: 0,
  modestbranding: 1,
  rel: 0,
  vq: "hd1080", // force hd: http://stackoverflow.com/a/12467865
},

// initial options
initialTypeOptions: {
  image: {},
  vimeo: {
    width: 1280,
  },
  // Youtube needs both dimensions, it doesn't support fetching video dimensions like Vimeo yet.
  // Star this ticket if you'd like to get support for it at some point:
  // https://code.google.com/p/gdata-issues/issues/detail?id=4329
  youtube: {
    width: 1280,
    height: 720,
  },
},

// callbacks
afterPosition: function(position) {
  console.log("You've reached position " + position);
},

afterHide: function() {
  console.log('Strip is no longer visible');
},

onResize: function(fxProperty, fxValue, side) {
  console.log(fxProperty, fxValue, side);
  // logs: 'width', 0, 'right' when starting the animation
  // and adjusts fxValue for each step in the animation
},

onShow: function() {
  console.log('Strip is visible');
},

4. API methods.

// show a single item
Strip.show("1.jpg");

Strip.show({
  url: "1.jpg",
  caption: "Image caption",
});

Strip.show({
  url: "http://vimeo.com/32071937",
  options: {
    side: "top",
    // more options here
  },
});

// show groups
Strip.show(["1.jpg", "2.jpg"]);

Strip.show([
  { url: "1.jpg", caption: "Image caption 1" },
  { url: "2.jpg", caption: "Image caption 2" },
]);

Strip.show(["1.jpg", "2.jpg"], {
  // options here
});

// open Strip at a specific position
Strip.show(["1.jpg", "2.jpg"], 2);

// open links
Strip.show($("#elementid")[0]);

// hide
Strip.hide();

// disable
Strip.disable();

// disable fallback
Strip.fallback(false);

// enable
Strip.enable();

// set theme
Strip.setDefaultSkin("custom");

Changelog:

v1.8.0 (2021-09-07)

• replaced deprecated jQuery functions ($.proxy and $.type)

v1.7.0 (2019-11-22)

• Strip is now free for commercial use!

v1.7.0 (2019-11-22)

• Strip is now free for commercial use!

 

---

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