Foundation

Clearing

Tired of trying to use Orbit to display images with different size content? So were we! Since this wasn't the original intent for Orbit, we wrote a whole new plugin! Clearing gives you the ability to create responsive lightboxes that are easy.

Using Clearing

To take advantage of Clearing, you'll simply need to gather some images, decide which order you want them in and plop them into a <ul data-clearing>. From there, you have some options for adding captions with, <data-caption="">.

You can optionally choose to only show a single image from the gallery by adding a class of .clearing-feature to the <li> of your choice. When you click that image, the rest in the list will show up in the gallery carousel.

  • 
    <ul class="block-grid three-up" data-clearing>
      <li><a href="http://placekitten.com/g/1000/800"><img data-caption="Maecenas sed diam eget risus varius blandit sit amet non magna." src="http://placekitten.com/g/100/100"></a></li>
      <li><img data-caption="Maecenas sed diam eget risus varius blandit sit amet non magna." src="http://placekitten.com/g/1000/800"></li>
      <li><a href="http://placekitten.com/g/1000/800"><img data-caption="Maecenas sed diam eget risus varius blandit sit amet non magna." src="http://placekitten.com/g/100/100"></a></li>
      <li><img data-caption="Maecenas sed diam eget risus varius blandit sit amet non magna." src="http://placekitten.com/g/1000/800"></li>
      <li><a href="http://placekitten.com/g/1000/800"><img data-caption="Maecenas sed diam eget risus varius blandit sit amet non magna." src="http://placekitten.com/g/100/100"></a></li>
      <li><img data-caption="Maecenas sed diam eget risus varius blandit sit amet non magna." src="http://placekitten.com/g/1000/800"></li>
    </ul>
    
Styling the on-page gallery

We've used our block-grid to position and style the thumbnails in the example above. You can style the list however you want as long as it has the data-clearing attribute on it.


Take a Joyride

Create jQuery Feature Tours in a Breeze. Setting up Joyride is simple, just attach the needed files, drop in your markup and choose your settings.
Learn about Joyride »

Grab the copy of Foundation best for you, whether that's Scss or CSS, everything or just bits and pieces.

Install Foundation

Awesome product jobs:
via ZURBjobs