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 by passing 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 to 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 fallback 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");

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 disabed by setting toggle 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
}

afterPosition

A function to call after the position changed. 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');
}