Sonos Suit

Build Your Clearing Lightbox

There is only one way to build a Clearing lightbox, using our predefined class and data-attribute structure. We've made it really easy: gather some images, decide on their order, and put them into a <ul class="clearing-thumbs"> of your choice. In order to get Clearing to build itself properly, you'll need to have Javascript properly included. If you call suit.js, everything is all set.

Once you get your JS hooked up, you'll need to add data-clearing to your list container. Here's an example of the most basic markup needed:

<ul class="clearing-thumbs small-block-grid-2 medium-block-grid-3 large-block-grid-4" data-clearing>
  <li>
    <a href="path/to/your/img">
      <img class="th" src="path/to/your/img-th">
    </a>
  </li>
  <li>
    <a href="path/to/your/img">
      <img class="th" src="path/to/your/img-th">
    </a>
  </li>
  <li>
    <a href="path/to/your/img">
      <img class="th" src="path/to/your/img-th">
    </a>
  </li>
</ul>

Start From A Featured Image

Sometimes you don't want to show a gallery full of images on your site, but you want to open the gallery from a single image. By including all of your images in a .clearing-feature list and using .clearing-featured-img on the <li> of your choice, you'll be able to hide the rest of the images in the on-page gallery. If you want to show more than one, try using our .hide class to set the ones you don't want to display: none;.

<ul class="clearing-thumbs clearing-feature" data-clearing>
  <li>
    <a href="path/to/your/img">
      <img class="th" src="path/to/your/img-th">
    </a>
  </li>
  <li class="clearing-featured-img">
    <a href="path/to/your/img">
      <img class="th" src="path/to/your/img-th">
    </a>
  </li>
  <li>
    <a href="path/to/your/img">
      <img class="th" src="path/to/your/img-th">
    </a>
  </li>
</ul>

Including Captions

Another common use-case for Lightboxes is to include a caption per image. We've made this quick and easy by using data-attributes to hold the content. You'll just attach this attribute to the image it belongs to and voila!

Note: You can now use HTML inside the data-caption attribute.

<ul class="clearing-thumbs small-block-grid-2 medium-block-grid-3 large-block-grid-4" data-clearing>
  <li>
     <a href="path/to/your/img">
       <img class="th" data-caption="caption here..." src="path/to/your/img-th">
     </a>
  </li>
  <li>
    <a href="path/to/your/img">
      <img class="th" data-caption="caption 2 here..." src="path/to/your/img-th">
    </a>
  </li>
  <li>
    <a href="path/to/your/img">
      <img class="th" data-caption="caption 3 here..." src="path/to/your/img-th">
    </a>
  </li>
</ul>

Thumb Hover Color Palette

If you desire to change the hover color of the thumbnail other than the default red, you can do so by adding any of our color palette classes.

.th. alt
.th. play1
.th. play3
.th. play5
.th. playbar
.th. sub
.th. connect-amp
.th. connect
.th. light
.th. dark
.th. amber

Optional JavaScript Configuration

Clearing supports data-options on-the-fly configuration:

{
  // specify the classes or IDs that will close clearing when clicked
  close_selectors: '.clearing-close',


  // specify the classes or IDs that will open clearing when clicked
  open_selectors: '',


  touch_label: '&larr; Swipe to Advance &rarr;'
}

Available JavaScript Events

Clearing supports several JavaScript events that you can listen to:

open.fndtn.clearing before a thumbnail is expanded
opened.fndtn.clearing after the large image has opened
close.fndtn.clearing before the large image is closed
closed.fndtn.clearing after the large image has closed
change.fndtn.clearing when the large image changes
resized.fndtn.clearing after the large image is resized, before it becomes visible

Here is an example of binding to the open event

$(document.body).on('open.fndtn.clearing', function(event) {
  console.info('About to open thumbnail with src ', $('img', event.target).attr('src'));
});