1

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?

Wes
  • 11
  • 3

0 Answers0