Photoswipe에서 미리보기 이미지의 전체 갤러리를 인식하도록하려면 어떻게합니까?

Question

Zirc Foundation 5 블록 격자 형식을 사용하여 Photoswipe 4 축소판을 설정했지만 엄지 손가락을 클릭하면 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> 

Answer 1

가장 쉬운 옵션은 li 태그의 그림 태그를 전환하는 것입니다.

당신의 js에서 다음

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

변경하려면 다음 줄을 (당신이 photoswipe 웹 사이트에서 예제를 사용하고있는 추정) :

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

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

에 그리고 마지막으로 당신의 CSS를 업데이트합니다.