---
title: Clearing
---
***
{{> examples_clearing_basic}}
***
## 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 an ul with a `.clearing-thumbs` class. In order to get Clearing to build itself properly, you'll need to have JavaScript properly included. We outline [Clearing JS](#js) a bit further down the page.
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:
HTML
{{> examples_clearing_basic_rendered}}
### Styling the List
We're using the `.th` class from Foundation to style the thumbnails in the Clearing example at the top of the page. You can also use `@include thumb;` in SCSS to use those same styles.
***
## 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 `` 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;`.
HTML
{{> examples_clearing_featured}}
***
## 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! Here's the code example:
**Note:** You can now use HTML inside the data-caption attribute.
HTML
{{> examples_clearing_captions}}
***
## Accessibility
This component is not yet accessible. Stay tuned for updates in future releases.
***
## Available SCSS Variables
We opted not to create mixins for this plugin because it relies on classes in the JS to work. These variables should give you the control you need to change styles as you see fit:
SCSS
{{> examples_clearing_variables}}
***
## Using the Javascript
Before you can use Clearing you'll want to verify that jQuery and `foundation.js` are available on your page. You can refer to the [Javascript documentation]({{relative absolute 'dist/docs/javascript.html'}}) on setting that up.
Just add `foundation.clearing.js` AFTER the `foundation.js` file. Your markup should look something like this:
HTML
{{> examples_clearing_javascript}}
Required Foundation Library: `foundation.clearing.js`
### Optional Javascript Configuration
Clearing supports `data-options` on-the-fly configuration:
JS
{{> examples_clearing_data_options}}
### 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.
JS
{{> examples_clearing_events}}
***
### Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
{{#markdown}}
```scss
@import "foundation/components/clearing";
```
{{/markdown}}