Thumbnail Images
Now with superpowers
Thumbnail on image
<img src="../static/img/chuck.jpg" class="image-thumbnail" width="150" />
Thumbnail on link
<a href="../static/img/chuck.jpg" class="image-thumbnail" data-fc-modules="modal">
<img src="../static/img/chuck.jpg" width="150" />
</a>
Video Thumbnail
<a href="https://www.youtube.com/embed/VsabFEisZ2Y" class="image-thumbnail _video" data-fc-modules="modal">
<img src="../static/img/chuck.jpg" width="150" />
</a>
Thumbnail group
<ul class="thumbnail-group">
<li>
<a href="../static/img/chuck.jpg" class="image-thumbnail">
<img src="../static/img/chuck.jpg" width="150" />
</a>
</li>
<li>
<a href="../static/img/chuck.jpg" class="image-thumbnail">
<img src="../static/img/chuck.jpg" width="150" />
</a>
</li>
<li>
<a href="../static/img/chuck.jpg" class="image-thumbnail">
<img src="../static/img/chuck.jpg" width="150" />
</a>
</li>
<li>
<a href="../static/img/chuck.jpg" class="image-thumbnail">
<img src="../static/img/chuck.jpg" width="150" />
</a>
</li>
<li>
<a href="../static/img/chuck.jpg" class="image-thumbnail">
<img src="../static/img/chuck.jpg" width="150" />
</a>
</li>
<li>
<a href="../static/img/chuck.jpg" class="image-thumbnail">
<img src="../static/img/chuck.jpg" width="150" />
</a>
</li>
</ul>Thumbnail group with actions
<ul class="thumbnail-group">
<li>
<a href="../static/img/chuck.jpg" class="thumbnail">
<img src="../static/img/chuck.jpg" width="150" />
</a>
<ul class="thumbnail-actions">
<li>
<a href="#" class="icon-trash-o"></a>
</li>
<li>
<a href="#" class="icon-pencil"></a>
</li>
<li>
<a href="#" class="icon-search-plus"></a>
</li>
</ul>
</li>
<li>
<a href="../static/img/chuck.jpg" class="thumbnail">
<img src="../static/img/chuck.jpg" width="150" />
</a>
<ul class="thumbnail-actions">
<li>
<a href="#" class="icon-trash-o"></a>
</li>
<li>
<a href="#" class="icon-pencil"></a>
</li>
<li>
<a href="#" class="icon-search-plus"></a>
</li>
</ul>
</li>
<li>
<a href="../static/img/chuck.jpg" class="thumbnail">
<img src="../static/img/chuck.jpg" width="150" />
</a>
<ul class="thumbnail-actions">
<li>
<a href="#" class="icon-trash-o"></a>
</li>
<li>
<a href="#" class="icon-pencil"></a>
</li>
<li>
<a href="#" class="icon-search-plus"></a>
</li>
</ul>
</li>
</ul>Thumbnail carousel JS
<section class="carousel" data-fc-modules="carousel" data-fc-device-items="1,3,5" data-fc-loop="false">
<article>
<a href="../static/img/chuck.jpg" class="group-1 image-thumbnail" data-fc-modules="modal">
<img src="../static/img/chuck.jpg" width="150" />
</a>
</article>
<article>
<a href="../static/img/chuck.jpg" class="group-1 image-thumbnail" data-fc-modules="modal">
<img src="../static/img/chuck.jpg" width="150" />
</a>
</article>
<article>
<a href="../static/img/chuck.jpg" class="group-1 image-thumbnail" data-fc-modules="modal">
<img src="../static/img/chuck.jpg" width="150" />
</a>
</article>
<article>
<a href="../static/img/chuck.jpg" class="group-1 image-thumbnail" data-fc-modules="modal">
<img src="../static/img/chuck.jpg" width="150" />
</a>
</article>
<article>
<a href="../static/img/chuck.jpg" class="group-1 image-thumbnail" data-fc-modules="modal">
<img src="../static/img/chuck.jpg" width="150" />
</a>
</article>
<article>
<a href="../static/img/chuck.jpg" class="group-1 image-thumbnail" data-fc-modules="modal">
<img src="../static/img/chuck.jpg" width="150" />
</a>
</article>
</section>