Как заставить Photoswipe распознавать всю галерею из списка миниатюр?

Я настроил свои миниатюры Photoswipe 4, используя формат блочной сетки Zurb Foundation 5, но при нажатии на большой палец загружается только одно изображение в photoswipe. Есть ли способ заставить photoswipe распознавать, что галерея изображений - это все те, которые содержатся в сетке ul миниатюр?

<ul class="my-gallery small-block-grid-1 large-block-grid-3" itemscope itemtype="http://schema.org/ImageGallery">
<li>
    <figure itemscope itemtype="http://schema.org/ImageObject">
    <a href="assets/images/image01.jpg" itemprop="contentUrl" data-size="2000x1125">
      <img src="assets/images/image01.jpg" itemprop="thumbnail" alt="Image description" /></a>
    <figcaption itemprop="caption description">Image caption 1</figcaption>
    </figure>
</li>
<li>
<figure itemscope itemtype="http://schema.org/ImageObject">
<a href="assets/images/image02.jpg" itemprop="contentUrl" data-size="2000x1125">
      <img src="assets/images/image02.jpg" itemprop="thumbnail" alt="Image description" /></a>
<figcaption itemprop="caption description">Image caption 1</figcaption>
</figure>
</li>
</ul>

html jquery zurb-foundation thumbnails photoswipe
person hubbell    schedule 08.01.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Самый простой вариант — переключить теги figure на теги li.

<ul class="my-gallery small-block-grid-1 large-block-grid-3" itemscope itemtype="http://schema.org/ImageGallery">
  <li itemscope itemtype="http://schema.org/ImageObject">
    <a href="assets/images/image01.jpg" itemprop="contentUrl" data-size="2000x1125">
      <img src="assets/images/image01.jpg" itemprop="thumbnail" alt="Image description" />
    </a>
    <div class="caption" itemprop="caption description">Image caption 1</div>
  </li>

  <li itemscope itemtype="http://schema.org/ImageObject">
    <a href="assets/images/image02.jpg" itemprop="contentUrl" data-size="2000x1125">
      <img src="assets/images/image02.jpg" itemprop="thumbnail" alt="Image description" />
    </a>
    <div class="caption" itemprop="caption description">Image caption 1</div>
  </li>
</ul>

Затем в вашем js (при условии, что вы используете пример с веб-сайта photoswipe) измените следующую строку:

return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');

to

return (el.tagName && el.tagName.toUpperCase() === 'LI');

Затем, наконец, обновите свой CSS.

person bobwal    schedule 13.01.2015
comment
Спасибо за этот отзыв. Я попробую это прямо сейчас. - person hubbell; 15.01.2015