Photoswipe: write caption on top of thumbnails

Question

I'm using Photoswipe to create a dynamic gallery, and I've followed the instruction on the official webiste: http://photoswipe.com/documentation/getting-started.html

I want to add a caption on top of each image thumbnail, as shown in this screenshot:

I used this code inside the <figure class='my-gallery-fig' .... > tag, which triggers the Photoswipe galley.

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

However, in this way, even when clicking on the hyperlinks, the Photoswipe full-screen image opens! There should be an option which lets Photoswipe open only when clicking on the <img> tag, not the whole <figure> tag, but I can't get it work.

Maybe should I achieve this through some Photoswipe options?

The structure of the gallery is the following:

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

where "PHOTO", "TITLE" and "SUBJECT" are variables changing at each loop. Photoswipe should activate only when clicking on the second child of <figure> (<a>), and not when clicking on the <center><p> tag (actually the click triggers when clicking on the entire <figure> tag).

NOTE: the figcaption is not appearing under the thumbnails, but only when viewing them at full screen (after clicking on the thumbnail).