Photoswipe: Closing Gallery Animates Wrong Rectangle (thumbnail)

I'm new to Javascript and I have a problem implementing PhotoSwipe plugin: I'm trying to implement PhotoSwipe plugin for a web page using jQuery. Most of it is working correctly (o

Solution 1:

Figured it out myself. I really screwed things up by using event.target. The correct way of working with PhotoSwipe requires me to provide actual DOM element instead of a fixed one (like event target).

The correct way of doing this is just like demo: save DOM element (selector) when creating itemArray use DOM element from itemArray in order to provide correct element to calculate bounding rectangle.

Correct jQuery code:

var gallerySelector ="#img-gallery";
var imageListSelector ="#imageList";
// parse server reply (JSON, imitated, saved into a tag)var itemArray = jQuery.parseJSON($(imageListSelector).html());

var index =1;
// HTML structure of gallery imagevar imageHTML ="<figure class=\"col-xs-12 col-sm-6 col-md-4\" "+"itemprop=\"associatedMedia\" itemscope "+"itemtype=\"http://schema.org/ImageObject\">\n"+"<a href=\"{imageSource}\" itemprop=\"contentUrl\" data-size=\"{imageSize}\">\n"+"<img class=\"img-responsive\" src=\"{imageThumb}\" itemprop=\"thumbnail\" />\n"+"</a>\n</figure>";
// generate images based on JSON request (imitated) and appended them to the page
itemArray.forEach(function(item) {
    var imageTags = imageHTML.replace("{imageSource}", item.src);
    var imageTags = imageTags.replace("{imageSize}", (""+item.w+"x"+item.h));
    var imageTags = imageTags.replace("{imageThumb}", item.msrc);
    $(gallerySelector).append(imageTags);
    item.el = $(gallerySelector +" figure:last img")[0];
});

$('.my-gallery').each( function() {
    var$pic= $(this);
    var$pswp= $('.pswp')[0];
    $pic.on('click', 'figure', function(event) {
        event.preventDefault();
        var$index= $(this).index();
        var options = {
            index: $index,
            getThumbBoundsFn: function(index) {
                // get element we clicked on to determine its position in window//var thumbnail = event.target;var thumbnail = itemArray[index].el;
                // get position of element relative to viewportvar rect = thumbnail.getBoundingClientRect();
                // get window scroll Yvar pageYScroll = window.pageYOffset ||
                    document.documentElement.scrollTop; 
                return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
            }
        }
        // Initialize PhotoSwipevar lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, itemArray, options);
        lightBox.init();
    });
});

Summary of changes:

added item.el property, which saves last added element when it is appended to the gallery (in my case - figure img, since I need the img object to calculate its bounding rectangle).

Replaced event.target with respective itemArray[index].el (previously saved node).

Hope this helps! It took me a couple of hours and some trial and error with PhotoSwipe demo page to figure this out.