Squarespace Example - Featherlight Pop-Up

Gallery Test


1.  Remove your current Featherlight code and instead put these lines of code in the HEADER of your page (or your entire site)

<link href="//cdn.rawgit.com/noelboss/featherlight/1.7.9/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<link href="//cdn.rawgit.com/noelboss/featherlight/1.7.9/release/featherlight.gallery.min.css" type="text/css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.9/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.9/release/featherlight.gallery.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/detect_swipe/2.1.1/jquery.detect_swipe.min.js"></script>

2. Add a Code block and add to the bottom of the page, then insert this code

<script>
    $('a.gallery').featherlightGallery({
        previousIcon: '«',
        nextIcon: '»',
        galleryFadeIn: 300,

        openSpeed: 300
    });
</script>

3.  Add a Code block and use this as a starting block for your image gallery

<section
      data-featherlight-gallery
      data-featherlight-filter="a"
    >
      <h2>Gallery Test</h2>
      <a href="https://noelboss.github.io/featherlight/assets/images/feed.jpg"><img src="https://noelboss.github.io/featherlight/assets/images/feed.thumb.jpg"></a>
      <a href="https://noelboss.github.io/featherlight/assets/images/blue.jpg"><img src="https://noelboss.github.io/featherlight/assets/images/blue.thumb.jpg"></a>
    </section>