eriksilver
3/5/2016 - 8:11 PM

Featherlight lightbox and photo gallery example

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>