Featherlight lightbox and photo gallery example
//Added very lightweight lightbox feature with good functionality
//http://noelboss.github.io/featherlight/
<!-- /layout/theme.liquid -->
//Add inside head tags...after jQuery
//Add files with same name to assets folder
<!-- Featherlight lightbox plugin ================================================== -->
{{ 'featherlight.min.css' | asset_url | stylesheet_tag }}
{{ 'featherlight.min.js' | asset_url | script_tag }}
//use featherlight wherever needed, homepage, product page, etc
//add lightbox image to the files through Shopify admin
{% comment %} Adding sizing chart image as a light box {% endcomment %}
<div class="selector-wrapper grid quantity" name="">
<label for="Quanity"><a href="{{ 'Size_mens.jpg' | file_url }}" data-featherlight>Size Chart</a></label>
</div>
**Add a photo gallery
<div data-featherlight-gallery data-featherlight-filter="a">
{% for article in blog.articles %}
<a href="{{ article.image | img_url: '1024x1024' }}">
<img style="border: 1px solid #021a40;" src="{{ article.image | img_url: 'medium' }}" alt="{{ article.title }}" />
</a>
{% endfor %}
</div>