Gallery: add navigation icons

Learn how to add navigation to your Gallery;

HTML:

<h3>Slideshow w/ Icons</h3>
<div id="gallery-slideshow">
  <a href="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_b.jpg"><img src="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_q.jpg" /></a>
  <a href="http://farm5.staticflickr.com/4005/4400559493_3403152632_o.jpg"><img src="http://farm5.staticflickr.com/4005/4400559493_f652202d1b_q.jpg" /></a>
  <a href="http://farm1.staticflickr.com/174/396673914_be9d1312b1_o.jpg"><img src="http://farm1.staticflickr.com/174/396673914_be9d1312b1_q.jpg" /></a>
</div>

CSS:

.featherlight .featherlight-content .navigation {
    display: block;
    margin: 10px auto 0;
    width: 100%;
    clear: both;
    text-align: center;
}
.featherlight .featherlight-content .navigation a {
    background: transparent none;
    border: 1px solid #000000;
    display: inline-block;
    margin: 0 10px;
    height: 10px;
    width: 10px;
}
.featherlight .featherlight-content .navigation a.active {
    background-color: #000000;
}

JavaScript

jQuery(function($){

    'use strict';
    
    $('#gallery-slideshow').featherlightGallery({
        filter: 'a',
        afterContent: function() {
            var $slideshow = this,
                $gallery = $(this.$currentTarget).parents('#gallery-slideshow'),
                $thumbs = $('> a', $gallery),
                $navigation = this.$navigation || $('<div>', {class:'navigation'});

            if (!this.$navigation) {
                // Navigation
                $thumbs.each(function(){
                    var $thumb = $('<a>', {alt:$(this).attr('alt'), href:'#'});
                    $thumb.on('click', function(e){
                        e.preventDefault();
                        $slideshow.navigateTo($(this).index());
                    });
                    $navigation.append($thumb);
                });
                $('a:eq(0)', $navigation).addClass('active');
                this.$content.after($navigation);
            }

            this.$navigation = $navigation;
        },
        afterNavigateTo: function(index){
            var $navigation = $('.navigation', this.$content.parent()),
                $thumb = $('> a:eq('+index+')', $navigation);
            $thumb.addClass('active');
            $thumb.siblings().removeClass('active');
        }
    });

});

See it in action; http://jsfiddle.net/esk6tt2p/9/