Responsive Unobtrusive Responsive Lightbox jQuery Plugin

Strip.js is a simplified view that covers the page only partially. This leaves room for page interaction on larger screens while giving smaller devices the classic Lightbox experience.

responsive lightbox jquery, responsive lightbox image gallery jquery, image slider with lightbox popup, responsive grid gallery with lightbox popup and tag filter

Features:

Displays a gallery of images in a simplified view with controls such as a slider.
It is fully responsive and works well on mobile devices.
Supports Youtube/Vimeo photos and videos.
Lots of options to create your own patterns.

How to make use of it:

1. Include the newest model of jQuery library and the strip.min.js script on the backside of your internet 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 photos (and/or Youtube/Vimeo movies) into your internet web page.

<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="
   class="strip"
   data-strip-options="
     width: 853,
     height: 480,
     youtube: { autoplay: 0 }
   "
  >Youtube Video</a>

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

3. The plugin will auto be initialized on doc prepared.

// 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",
},

// 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=5329
  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 strategies.

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

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

Strip.show({
  url: "http://vimeo.com/3237",
  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");

Javascript API

The API allows Strip to be used with Javascript, as an alternative to using the strip class on links.

Method
`Strip.show()`	A single item can be shown by giving `Strip.show()` a url: Strip.show("image.jpg"); Add a caption by using an object instead: Strip.show({ url: "image.jpg", caption: "Caption for this image", }); This object also accepts options to customize Strip: Strip.show({ url: "http://vimeo.com/32071937", options: { side: "top", }, }); Groups Groups can be shown by giving `Strip.show()` an array with multiple items: // use urls Strip.show(["image1.jpg", "image2.jpg"]); // or objects Strip.show([ { url: "image1.jpg", caption: "Caption for this image" }, { url: "image2.jpg", caption: "Another caption" }, ]); Options for the entire group can be set using the second argument: Strip.show(["image1.jpg", "image2.jpg"], { loop: false, maxWidth: 500, }); Open Strip at a specific position by setting a number as the last argument: Strip.show(["image1.jpg", "image2.jpg"], 2); Links Links that use the strip class can also be opened bypassing `Strip.show()` an element: Strip.show($("#elementid")[0]);
`Strip.hide()`	Close Strip at any time by calling `Strip.hide()`: Strip.hide();
`Strip.disable()`	Disables Strip. When disabled, links using the `strip` class will no longer open Strip but work as regular links. Calls `Strip.show()` will use a fallback to make them behave like regular links. Strip.disable(); Use `Strip.fallback(false)` should you need to disable this fallback as well: Strip.fallback(false).disable();
`Strip.enable()`	Enable Strip if it was previously disabled. Strip.enable();
`Strip.fallback()`	When Strip is disabled it will fall back to making `Strip.show()` calls open as regular links. By disabling this fallback API calls will do nothing at all. Strip.fallback(false);
`Strip.setDefaultSkin()`	Sets the name of the default skin, this skin will be used when no `skin` option is provided. Strip.setDefaultSkin("custom");

Options

Option
`effects`	Sets the duration of individual effects, or disables them when set to false. `effects: false` These are all available effects: effects: { spinner: { show: 200, hide: 200 }, transition: { min: 175, max: 250 }, ui: { show: 0, hide: 200 }, window: { show: 300, hide: 300 } }
`hideOnClickOutside`	Hide Strip when clicking outside of it or an element that could open it, enabled by default. `hideOnClickOutside: false`
`keyboard`	Enable or disable individual keyboard buttons or all of them when set to false. `keyboard: false` Or use an object to toggle individual buttons: keyboard: { left: true, right: true, esc: false } Note: `youtube` and `vimeo` will always have left and right disabled, because a video could require these keys.
`loop`	When set to true a group becomes a loop, making it possible to move between the first and last item: `loop: true`
`maxHeight`	Sets a maximum height for the content. `maxHeight: 500`
`maxWidth`	Sets a maximum width for the content. `maxWidth: 500`
`overlap`	Allows 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. `overlap: false` Note: Vimeo and Youtube always have `overlap: false` because overlapping buttons could otherwise prevent interaction with the video.
`position`	Show or hide the position indicator. `position: false`
`preload`	Sets the items to preload before and after the current item, or disables preloading when set to false. `preload: [1,2] // preload 1 before and 2 after` `preload: false // disables preloading`
`side`	Set the side to position Strip on to `top`, `bottom`, `left` or `right`. `side: 'top'`
`skin`	Sets the skin. If you’ve provided default options for this skin they’ll be applied as a starting point for other options. The default skin is `strip`. `skin: 'custom'`
`spinner`	Disables the loading icon when set to false. `spinner: false`
`toggle`	Clicking elements will toggle Strip, this behavior can be disabled by setting `toggle` it to false. Doing so will keep Strip open even if an element is clicked twice. `toggle: false` Note: `Strip.show()` calls don’t use toggle behavior, this only works for elements with `class='strip'`
`vimeo`	Sets the player parameters of a Vimeo video, available options can be found in the Vimeo documentation: Vimeo Player Embedding. vimeo: { autoplay: 1, title: 1, byline: 1, portrait: 0, loop: 0 }
`youtube`	youtubeSets the player parameters of a Youtube video, available options can be found in the Youtube documentation: YouTube Embedded Players and Player Parameters. youtube: { autohide: 1, autoplay: 1, controls: 1, enablejsapi: 1, hd: 1, iv_load_policy: 3, loop: 0, modestbranding: 1, rel: 0 }

Callbacks

Callbacks can be used alongside other Options.

Callback
`afterPosition`	A function to call after the position changes. The first argument is the current position within the group. afterPosition: function(position) { console.log("You've reached position " + position); }
`afterHide`	A function to call after Strip is fully hidden. afterHide: function() { console.log('Strip is no longer visible'); }
`onResize`	This callback allows you to respond to Strip as it’s resizing and make adjustments to your page. You could for example slide your page along or adjust margins. The parameters of onResize give you everything needed to make these adjustments. 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 } `fxProperty` is the property currently animated, which can be ‘width’ or ‘height’. `fxValue` is the value of that property at the current step in the animation. side is the current side Strip is positioned on, which can be ‘top’, ‘bottom’, ‘left’ or ‘right’.
`onShow`	A function to call when Strip comes into view. onShow: function() { console.log('Strip is visible'); }

Responsive Sliding Lightbox Plugin with jQuery, Strip JS Plugin/Github, responsive lightbox image gallery jquery free download, jquery slider with image lightbox popup