ZURB Menu

Foundation

Clearing

Since Orbit isn't intended for variable-height content, we decided it would be a great idea to create a plugin that would help in that regard. Clearing makes it easy to create responsive lightboxes with any size image.


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. We outline Clearing 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:

<ul class="clearing-thumbs" data-clearing>
  <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
  <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
  <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
</ul>
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 <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 once, 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 src="path/to/your/img-th"></a></li>
  <li class="clearing-featured-img"><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
  <li><a href="path/to/your/img"><img 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! Here's the code example:

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

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

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:

$include-html-clearing-classes: $include-html-classes;

/* We use these to set the background colors for parts of Clearing. */
$clearing-bg: #111;
$clearing-caption-bg: $clearing-bg;
$clearing-carousel-bg: #111;
$clearing-img-bg: $clearing-bg;

/* We use these to style the close button */
$clearing-close-color: #fff;
$clearing-close-size: 40px;

/* We use these to style the arrows */
$clearing-arrow-size: 16px;
$clearing-arrow-color: $clearing-close-color;

/* We use these to style captions */
$clearing-caption-font-color: #fff;
$clearing-caption-padding: 10px 30px;

/* We use these to make the image and carousel height and style */
$clearing-active-img-height: 75%;
$clearing-carousel-height: 150px;
$clearing-carousel-thumb-width: 175px;
$clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255);

Using the JavaScript

Before you can use Clearing you'll want to verify that both jQuery (or Zepto) and foundation.js are available on your page. You can refer to the javascript documentation on setting that up.

Just add foundation.clearing.js AFTER the foundation.js file. Your markup should look something like this:

<body>

  ...

  <script>
      document.write('<script src=/js/vendor/'
        + ('__proto__' in {} ? 'zepto' : 'jquery')
        + '.js><\/script>');
    </script>

  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.clearing.js"></script>
  <!-- Other JS plugins can be included here -->

  <script>
    $(document).foundation();
  </script>

</body>
        

Required Foundation Library: foundation.clearing.js

Optional JavaScript Configuration

As of Clearing 4.1.2, you can now pass in options to data-options when the clearing is initialized on the page.

<ul class="clearing-thumbs" data-clearing data-options={
    // specify the classes or IDs which will close clearing when clicked.
    close_selectors : '.clearing-close, myCloseButton'}>

Events

You can bind to the following events in your code.

Event Params Description
open.fndtn.clearing event, thumb-id Fires before a thumbnail is expanded. The thumb-id parameter contains the thumbnail id.
opened.fndtn.clearing event Fires after an expanded image has opened.
close.fndtn.clearing event Fires before a large image is closed
closed.fndtn.clearing event Fires after a large image is closed
change.fndtn.clearing event Fires when the large image is changed using the arrows at the side
Example

Here is an example of binding to the open event.

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

<script>
$("div#myClearingEx").on("open.fndtn.clearing", function(event, id) {
  console.info("About to open thumbnail with id " + id);
});
</script>

This is a modal.

Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Second Modal...

×

This is a second modal.

See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.

×

This modal has video

×