2

Trying to get my gallery functioning properly. Right now I am using isotope.js to filter my gallery, and photoswipe.js as the lightbox.

My problem is that even though it is filtering the gallery properly, photoswipe still shows all of the images.

I found this:

// Use the shinybox only for  visible elements
var shinyboxInstance = $(".shinybox-isotope:not(.isotope-hidden .shinybox-isotope)").shinybox();

// Callback function that fire the refresh method, once the animation is finished
onAnimationCompleted = function(){
    shinyboxInstance.refresh();
};

I have it so when an item is hidden, the class .isotope-hidden is added to the element, so I'm halfway there. I just need the appropriate script to force photoswipe to only show the filtered images.

Photoswipe

Isotope

Any help would be appreciated. Thank you!

Morgan
  • 21
  • 4
  • 1
    Did you find a solution for this? I am not using isotope but rather shuffle.js, but I figure your solution will work for what I need as well. Thanks. – David Labbe Oct 10 '15 at 11:59

2 Answers2

0

For me, the problem was that my lightbox was using an array to decide what images to show. This array was being created on page load and not being edited upon clicking a filter.

So the solution is to create a new array when the user clicks on an image but before the light box is loaded.

Find the section of code that decides that objects to have in the lightbox array. for me is was:

var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);

This is saying to take the variable "items" as each array object to show in the lightbox. So just before this section i wrote custom code to create a new array that was to be used when lightbox was opened. Below is the whole code chuck that solved this for me: 

getFigures = function() {
                var filteredFigures = [];
                $pic.find('figure:visible > a').each(function() {
                    var $href   = $(this).attr('href'),
                        $size   = $(this).data('size').toString().split('x'),
                        $width  = $size[0],
                        $height = $size[1];

                var figures = {
                    src : $href,
                    w   : $width,
                    h   : $height
                };
                filteredFigures.push(figures);
            });
            return filteredFigures;
        };

Then in the variable lightbox I changed items to filteredFigures as that was how i chose to describe my new array.

This troubled me for a LONG time hope this can help!

Badetv
  • 81
  • 6
0

I have found a simple solution.

When clicking on filter I remove the photoswipe class from the images and i add the class only for the images whch have the filter class.

Hope this helps someone.

    $('.gallery-filters .filter-item').on('click', function () {
        var activeGallery = ($(this).data('filter')); //get the current filter 
        $(".photoswipe-gallery .gallery-item a").each(function () {
            $(this).removeClass('photoswipe'); //remove all photoswipe classes
        });
        $(".photoswipe-gallery .gallery-item" + activeGallery +" a").each(function () {
            $(this).addClass('photoswipe');  //add photoswipe class only for active images
        });
    });
thealgocalmin
  • 1