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

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

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

javascript

photoswipe