javascript - Photoswipe:如何在显示页面上显示没有拇指的照片的标题

Question

我在这个页面上有一个非常简单的 Photoswipe 图库:http://neighborhoodpets.wink1733.com

如何为主页上没有显示缩略图的照片添加说明？

我只希望它在 Photoswipe 画廊被激活时显示。

现在“Snoop Ray”的第二张图片没有标题。

感谢您提供有关解决此问题的任何建议。

Answer 1

您可以在第二个 Snoop Ray a 元素上添加一个 data-title 属性，如下所示:

<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>

然后，在您的脚本中，将此更改为:

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

为此(只插入一个title行):

// 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')
};

就是这样!

对于第二张 Snoop Ray 图片，标题现在将是 Snoop Ray 4877 Jewell 加上作者，同时不会更改其他图片的标题。

确实(如果您想知道的话)，在您的脚本中，这会将它们的标题设置为位于 figure 元素中的图片标题:

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)
  }
}