I have several images inside <a>
tags whose click has been binded to get the correct index of the image for photoswipe. The problem is that the first image click opens the correct image, but the second click always opens the same image. This pattern continues, the alternate click opens the same image as the previous one. The relevant code is -
var init_photoswipe = function(){
var $index = parseInt($(this).attr("index"));
console.log($index)
var options = {index: $index};
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, photoswipe_items, options);
gallery.init();
}
load_photoswipe_items();
$("#gallery").on("click", ".full-image", init_photoswipe)
Where load_photoswipe_items()
just sets up the list of photoswipe_items
. I have already checked that the index is correct and it is only being clicked once. Any help would be appreciated
Preventing the default behavior of the button solved the problem. The code is -
var init_photoswipe = function(e){
e.preventDefault();
var $index = parseInt($(this).attr("index"));
var options = {index: $index};
gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, photoswipe_items, options);
gallery.init();
}