Question

我正在使用Photoswipe创建一个动态图库，我已按照官方网站上的说明进行操作：http://photoswipe.com/documentation/getting-started.html

我想在每个图片缩略图的顶部添加一个标题，如此屏幕截图所示：http://oi64.tinypic.com/vndsno.jpg。

我在<figure class='my-gallery-fig' .... >标记内使用了此代码，触发了Photoswipe厨房。

<center>
    <p class='gall_title'>
        <a href='http://www.google.it' class='link_gall'>TITLE</a>
     </p>
</center>

但是，通过这种方式，即使单击超链接，Photoswipe全屏图像也会打开！应该有一个选项，只有在点击<img>标记而不是整个<figure>标记时才能打开“照片”，但我无法使其正常工作。

也许我应该通过一些Photoswipe选项实现这一目标？

画廊的结构如下：

<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">

[.. FOR LOOP ..]
<figure class='my-gallery-fig' itemprop='associatedMedia'   itemscope         itemtype='httschema.org/ImageObject'>

    <center>
      <p class='gall_title'>
        <a href='http://www.google.it' class='link_gall'>TITLE</a>
      </p>
    </center>

    <a href='/img/gallery/PHOTO.JPG'        itemprop='contentUrl'   data-size='600x400'>
      <img src='/img/thumbs/PHOTO.JPG'      itemprop='thumbnail'    alt='TITLE' />
    </a>

    <figcaption class='pswp_title' itemprop='caption description'>
       TITLE
       <small>SUBJECT</small>
    </figcaption>

</figure>;
[.. END FOR LOOP ..]

</div>

其中“PHOTO”，“TITLE”和“SUBJECT”是每个循环中变化的变量。只有在点击<figure>（<a>）的第二个孩子时才会激活相片，而不是点击<center><p>标签时（点击整个{{1}时实际点击触发） }标签）。

注意：figcaption不会出现在缩略图下面，但只有在全屏查看时才会出现（点击缩略图后）。

Photoswipe：在缩略图上写下标题

0 个答案: