API

Installation

Include Strip below the latest 3.x release of jQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/js/strip.pkgd.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/strip.css"/>

Bower

Alternatively Strip can be installed using Bower or npm:

bower install strip
npm install @staaky/strip

Using Strip

The most basic way to use Strip is by adding the class strip to a link:

<a href="image.jpg" class="strip">Show image</a>

A caption can be added using the data-strip-caption attribute:

<a href="image.jpg" class="strip" data-strip-caption="Caption below the image">Caption</a>

Or customize Strip by putting options on the data-strip-options attribute:

<a href="http://vimeo.com/32071937"
   class="strip"
   data-strip-options="side: 'top'">Options</a>

Groups

Create groups by giving links a data-strip-group attribute with a unique name:

<a href="image1.jpg"
   class="strip"
   data-strip-group="mygroup">Image 1</a>
<a href="image2.jpg"
   class="strip"
   data-strip-group="mygroup">Image 2</a>

The data-strip-group-options attribute can be used to set options for all items in the group:

<a href="image1.jpg"
   class="strip"
   data-strip-group="shared-options"
   data-strip-group-options="loop: false, maxWidth: 500">This group</a>
<a href="image2.jpg"
   class="strip"
   data-strip-group="shared-options">has shared options</a>

Youtube

Youtube videos are embedded using the Youtube Player API.

<a href="http://www.youtube.com/watch?v=c0KYU2j0TM4" class="strip">Youtube</a>

Options can be set using the youtube option, see YouTube Embedded Players and Player Parameters for all the available options.

<a href="http://www.youtube.com/watch?v=5XD2kNopsUs"
    class="strip"
    data-strip-options="
      width: 853,
      height: 480,
      youtube: { autoplay: 0 }
    ">Youtube - Dimensions and options</a>
Note: Strip currently cannot detect Youtube video dimensions because of limitations in the Youtube API, it falls back to 1280x720 when no dimensions are set. Use the width and height options to change dimensions.

Vimeo

Strips embeds Vimeo videos using the Vimeo Player API.

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

Options can be set using the vimeo option, see Vimeo Player Embedding for all the available options.

<a href="http://vimeo.com/36897783"
   class="strip"
   data-strip-options="
     vimeo: {
       autoplay: 0,
       portrait: 1
     }
   ">Vimeo - Options</a>
Note: There's no need to set dimensions for Vimeo videos because Strip is able to detect those.

Media types

Strip attempts to automatically detect the media type using the given url. The type can also be set to image, youtube or vimeo manually using the data-strip-type attribute. This won't be required most of the time, it will be required in cases where Strip cannot detect a type based on the url:

<a href="/images/?id=24" class="strip" data-strip-type="image">Image</a>

API

The API is an alternative to using the strip class on links, it allows Strip to be used with just Javascript. The most common use of the API is opening multiple images from a single link:

Strip.show([
  { url: 'image1.jpg', caption: 'Caption below the image' },
  { url: 'image2.jpg', caption: 'Another caption' }
]);

That's just one of the many possiblities, see the API Documentation for more on the API.