39 lines
2.4 KiB
Markdown
Executable file
39 lines
2.4 KiB
Markdown
Executable file
---
|
||
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"
|
||
---
|
||
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 }}/images/unsplash_1.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_1_thumb.jpg"></a></li>
|
||
<li><a href="{{ site.url }}/images/unsplash_2.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_2_thumb.jpg"></a></li>
|
||
<li><a href="{{ site.url }}/images/unsplash_3.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_3_thumb.jpg"></a></li>
|
||
<li><a href="{{ site.url }}/images/unsplash_4.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_4_thumb.jpg"></a></li>
|
||
<li><a href="{{ site.url }}/images/unsplash_5.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_5_thumb.jpg"></a></li>
|
||
<li><a href="{{ site.url }}/images/unsplash_6.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_6_bus_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/
|