Photoswipe: How to show captions for a photo that doesn't have a thumb on display page

Question

I have a very simple Photoswipe gallery on this page: http://neighborhoodpets.wink1733.com

How do I add a caption to a photo that does not have a thumb showing on the home page?

I only want it to show when the Photoswipe gallery is activated.

Right now the second image of "Snoop Ray" doesn't have a caption.

Thank you for any advice on solving this.

Answer 1

You can add a data-title attribute on the second Snoop Ray a element like so:

<a data-title="Snoop Ray 4877 Jewell" href="images/snoopRay02_lg.jpg" itemprop="contentURL" data-size="750x1334" data-med="images/snoopRay02_med.jpg" data-med-size="750x1334" title="Snoop Ray" data-author="Todd Ray" alt="Snoop Ray"></a>

Then, in your script, change this:

// create slide object
item = {
    src: el.getAttribute('href'),
    w: parseInt(size[0], 10),
    h: parseInt(size[1], 10),
    author: el.getAttribute('data-author')
};

to this (only insert a title line):

// create slide object
item = {
    src: el.getAttribute('href'),
    w: parseInt(size[0], 10),
    h: parseInt(size[1], 10),
    author: el.getAttribute('data-author'),
    title: el.getAttribute('data-title')
};

And that's it!

For the second Snoop Ray image, the caption will now be Snoop Ray 4877 Jewell plus the author, while not changing the other pictures captions.

Indeed (in case you're wondering), in your script, this sets their captions to the picture title located in the figure element:

if(childElements.length > 0) {
  item.msrc = childElements[0].getAttribute('src'); // thumbnail url
  if(childElements.length > 1) {
      item.title = childElements[1].innerHTML; // caption (contents of figure)
  }
}