websites/dennogumi.org-archive
Archived
1
0
Fork 0
Code Releases Activity

Update to version 0.7

Browse source
This commit is contained in:
Moritz »mo.« Sauer 2014-09-15 21:03:49 +02:00
parent 897f0ff9a1
commit bd603dfa0e
17 changed files with 688 additions and 149 deletions
Download patch file Download diff file Expand all files Collapse all files

42
_posts/design/2014-09-15-gallery.md Normal file
View file

@ -0,0 +1,42 @@
---
layout: page
title: "A beautiful gallery"
subtitle: "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:
- layout
- design
image:
thumb: "unsplash_7_thumb.jpg"
header: "no"
permalink: "/design/gallery/"
---
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/