I use Photoswipe Ver 4.1.1 to view images. In the HTML markup I have an attribute called 'star-rating' that contins a number. In Photoswipe initialization I am adding this value to the Item[] array like so...
code is approx line #835
// create slide object
item = {
src: el.getAttribute('href'),
w: parseInt(size[0], 10),
h: parseInt(size[1], 10),
author: el.getAttribute('data-author'),
star: el.getAttribute('star-rating'),
};
In below function to change index indicator, I get the star rating value and display it in upper left of photoswipe light box.
ui.updateIndexIndicator = function()
if(_options.counterEl) {
_indexIndicator.innerHTML = (pswp.getCurrentIndex()+1) +
_options.indexIndicatorSep +
_options.getNumItemsFn();
}
//THESE LINES DISPLAYS THE STAR RATING FOR THE IMAGE FROM ITEMS[] ARRAY.
var s = document.getElementById("txtStarRating");
s.innerHTML = pswp.currItem.star || '';
};
I also have an Icon next to the Zoom Button at upper right. Clicking this icon displays a popup and the star rating can be changed. I can update the txtStarRating, but I am stumped on how to update the Items[] array.
I have tried creating a Listener for 'txtStarRating' change event, but I am unable to access the items[] variable for the current image using "pswp.currItem.star". This would keep data in sync for PREV and NEXT buttons. I would also update the HTML attribute 'star-rating' and save the value using Ajax to database.
It is either a scoping problem or lack of knowledge as to how to create an accessible function to do this. Or, maybe it is a syntax issue on the variable name 'pswp.currItem.star'.
Any ideas?