Adding Thumbnails to PhotoSwipe [MY SOLUTION]

Just to share…

How to add thumbnails to Photoswipe:

Add some css:

div.photoSwipe_innerthumbs{position: fixed; bottom: 0; width: 100%; text-align: center;z-index: 1000000;}
div.photoSwipe_innerthumbs img{max-width: 100px; cursor: pointer;}
.svifaded{opacity: 0.5;}

Custom JS:

var pswpElement = document.querySelectorAll('.pswp')[0];

$('body').on('click', 'div#mainimage img', function (e) {
    $('body').append('<div class="photoSwipe_innerthumbs"></div>');

    var svi_items = [];

    $('div#thumbnails li').each(function (i, v) {    // build items array
        svi_items.push({
            src: $(v).data('imgfull'),
            w: $(v).data('imgw'),
            h: $(v).data('imgv'),
            msrc: $(v).data('imgthumb'),
            title: $(v).find('img').attr('title')
        });
    });

    // define options (if needed)
    var options = {
        index: 0 // start at first slide
    };

    // Initializes and opens PhotoSwipe
    gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, svi_items, options);

    gallery.init();

// Gallery starts closing
    gallery.listen('close', function () {
        $('.photoSwipe_innerthumbs').remove();
    });

//Clone and append the thumbnail images
    $('div#thumbnails img').clone().appendTo("div.photoSwipe_innerthumbs");

//Get current active index and add class to thumb just to fade a bit
    $("div.photoSwipe_innerthumbs img").eq(gallery.getCurrentIndex()).addClass('svifaded');

//Handle the swaping of images
    $('body').on('click', 'div.photoSwipe_innerthumbs img', function (e) {
        $('div.photoSwipe_innerthumbs img').removeClass("svifaded");
        $(this).addClass('svifaded');
        gallery.goTo($("div.photoSwipe_innerthumbs img").index($(this)));
    });
});

Sample image:

I searched for other people doing this, but didn’t find… 👍

PS: The thumbnails are not responsive, if you want to share a solution for this will be welcomed… 😃

PS: Missing some type of animation on click, would be great if possible.

Thanks, David