html PhotoSwipe - 结构

Posted 2021-05-11

<div id="gallery" class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://unsplash.it/1200/900/?image=695" data-caption="Sunset in the wheat field<br><em class='text-muted'>© Jordan McQueen</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <img src="https://unsplash.it/400/300/?image=695" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://unsplash.it/1200/900/?image=675" data-caption="Mysterious ocean<br><em class='text-muted'>© Barn Images</em>" data-width="1200" data-height="900" itemprop="contentUrl">
      <img src="https://unsplash.it/400/300/?image=675" itemprop="thumbnail" alt="Image description">
    </a>
  </figure>
  ...
</div>