Adding Thumbnails to PhotoSwipe [MY SOLUTION]

[drosendo]

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

[jewel50]

Hi drosendo,

You have the great solution. I try to use your code inside woocommerce product gallery as you know woocommerce 3.0+ using photoswipe for lightbox.

Can you please help me that how I can use this solution in woocommerce product gellery?

Thanks

[drosendo]

Hi,

I know WooCommerce (I built it specifically for my plugin Smart Variations Images PRO) has that but for photoswipe you have to wait until photoswipe is triggered so that you can append the thumbnail gallery. Since i cannot put a listener to the photoswipe, or dont know how to do it, I dequeue the woocomerce default photoswipe and enqueue my scripts that runs it, just like the code above.

Hope I clarify things,

Cheers, David

[mcpi-geoogz]

Hi drosendo,

I'm currently working on the PhotoSwipe Masonry plugin (https://wordpress.org/plugins/photoswipe-masonry/) with the thumbnails inside of it. Just like yours but I'am having trouble implementing it. Could you please help me.

Thanks

[mcpi-geoogz]

or please can somebody tell me how can i put a "active" class in .pswp__item(current item) and remove when you go next/prev.

My problem is to have a thumbnail in each of the modal.

Thanks

[drosendo]

Hi @mcpi-geoogz ,

So for your class "active":

     gallery.listen('afterChange', function () {
                    $('div.photoSwipe_innerthumbs img').removeClass("active");
                    $("div.photoSwipe_innerthumbs img").eq(gallery.getCurrentIndex()).addClass('active');
                });

FOor the thumbnails you jsut have to manipulate, and adjust:

    var thumb_items = [];

    $('div#thumbnails li').each(function (i, v) {    // build items array
        thumb_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, thumb_items, options);

    gallery.init();

The important part is to append on your page a element that will contain the thumbnails... In my case: $('body').append('<div class="photoSwipe_innerthumbs"></div>');

Then you must adjust the CSS for that element, some z-index: xxxx.

Hope it helps?

Cheers, David

[mcpi-geoogz]

Hi @drosendo

What i need to do for this instance is to make a thumbnail ONLY of the selected image at the bottom of the modal. On the other hand, clicking Prev and Next buttons will direct the user to the prev/next image in the selection also with its own thumbnail only. Thumbnails of the succeeding images in the selection should not sit side by side at the bottom of the modal.

Also, the modal image will change when prev/next button was clicked so will the thumbnail. And when the thumbnail was clicked, the modal image will change accordingly.

On the other hand, the images became distorted because the width and height that was collected was from main image.

Thanks

[mcpi-geoogz]

like this one. http://frescojs.com/ ( click on the image)

[chiragrana]

@mcpi-geoogz This is exactly I'm looking for to create my photography website. Each thumbnail represents its own gallery. This is not swipable though. :(

[drosendo]

nothing more to add here.

[Firsh]

@chiragrana you can do that with Justified Image Grid + PhotoSwipe: https://justifiedgrid.com/lightboxes/photoswipe/ "Lightbox Groups"

[Grawl]

Here's working example of how OP code works https://codepen.io/Grawl/pen/ExPpXeW

[Grawl]

here's my solution https://gist.github.com/Grawl/e67aeffbe5e3c09c5ca1acc95765df61

[deepakpant91]

@Grawl your solution is good .but have you checked this after closing the lightbox and then select image from gallery and then select the image from thubmnails it have some bug that it will not show featured image same as clicked thubmnail. After double click it will show correct image.can you solve this?

[Grawl]

your comment is hard to read and understand. if you want my help with this, please, describe how to reproduce your problem with step-by-step guide

[deepakpant91]

Hi, https://codepen.io/Grawl/pen/ExPpXeW in this codepan example, step1 - Click on any image. Popup is open. step2- Click on any thumbnail and then close the popup. step3 - Again click on any image. Popup is open. step4 - Now click on any thumbnail and now you can see there is some bug. That the clicked thumbnail does not show the right image.

[puremana]

@deepakpant91 @Grawl

After spending some time debugging, the issue was actually straight forward.

Drosendo's code has his swapping images function within the function that initiates Photoswipe. This means that the second time you open up the gallery there are two swapping functions that are active, and Photoswipe is very strange in how it tries to handle that.

If you take this function $('body').on('click', 'div.photoSwipe_innerthumbs img', function (e) out, and instead reference a global version of the gallery, then it works fine.

Here's a fork of Grawl's pen where I have made the changes I mentioned. https://codepen.io/puremana/pen/vYJerWg

[acwolff]

Thanks for sharing this implementation.

I added some improvements to the latest implementation Even with a lot of images, just one row is displayed. If you swipe to the next image, you see also the next image selected in the thumbnails strip. border around the active thumbnail. You can toggle the thumbnails strip with a button in the tool bar,

See also my demo album: https://andrewolff.jalbum.net/PS_JustifiedGallery_white/