---
layout: page
title:  "A Beautiful Gallery"
subheadline:  "Foundation Clearing Lightbox"
description: "Wanna create a responsive gallery to showcase your portfolio, recent photos or images? It's quite easy thanks to Foundation and <a href='http://foundation.zurb.com/docs/components/clearing.html'>Clearing Lightbox</a>."
categories:
    - design
image:
   thumb: "unsplash_7_thumb.jpg"
   header: "no"
---
You just need to choose a template like the [`page`][3]- or [`page-fullwidth`][4]-template and than use some foundation magic.

<ul class="clearing-thumbs small-block-grid-3" data-clearing>
  <li><a href="{{ site.url }}/assets/img/unsplash_1.jpg"><img  data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/assets/img/unsplash_1_thumb.jpg"></a></li>
  <li><a href="{{ site.url }}/assets/img/unsplash_2.jpg"><img  data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/assets/img/unsplash_2_thumb.jpg"></a></li>
  <li><a href="{{ site.url }}/assets/img/unsplash_3.jpg"><img  data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/assets/img/unsplash_3_thumb.jpg"></a></li>
  <li><a href="{{ site.url }}/assets/img/unsplash_4.jpg"><img  data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/assets/img/unsplash_4_thumb.jpg"></a></li>
  <li><a href="{{ site.url }}/assets/img/unsplash_5.jpg"><img  data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/assets/img/unsplash_5_thumb.jpg"></a></li>
  <li><a href="{{ site.url }}/assets/img/unsplash_6.jpg"><img  data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/assets/img/unsplash_6_thumb.jpg"></a></li>
</ul>

## Clearing Lightbox Code

[Clearing Lightbox][1] is so flexible especially when using the [block grid][2]. For extensive documentation visit the [foundation docs][1].

{% highlight html %}
<ul class="clearing-thumbs small-block-grid-3" data-clearing>
  <li><a href="path/to/your/img"><img data-caption="caption 1" src="path/to/your/thumbnail"></a></li>
  <li><a href="path/to/your/img"><img data-caption="caption 2" src="path/to/your/thumbnail"></a></li>
  <li><a href="path/to/your/img"><img data-caption="caption 3" src="path/to/your/thumbnail"></a></li>
</ul>
{% endhighlight %}



 [1]: http://foundation.zurb.com/docs/components/clearing.html
 [2]: http://foundation.zurb.com/docs/components/block_grid.html
 [3]: {{ site.url }}/design/page/
 [4]: {{ site.url }}/design/page-fullwidth/