Create photoswipe on UL>LI>FIGURE markup

Question

On photoswipe docs the markup is div/figure/img. But i want other markup.

How to "Creating an Array of Slide Objects" for this ul/li/figure/img markup. I know i need somehow to edit the "var initPhotoSwipeFromDOM = function(gallerySelector) {" function. But do not now what the changes i need to do?

This is my markup:

<ul class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<li>
    <figure>
        <a href="large-image.jpg" data-size="600x400">
            <img src="small-image.jpg" itemprop="thumbnail"/>
        </a>
        <figcaption itemprop="caption description">Image caption</figcaption>
    </figure>
</li>

</ul>

Related Q i so on the internet: https://codedump.io/share/Hc9do6CIJgwH/1/how-do-i-get-photoswipe-to-recognize-entire-gallery-from-list-of-thumbnail-images

TMMC · Answer 1 · 2019-01-21T23:19:33.673

1

You must correctly travers the DOM and pass proper elements, I am not able to explain it, it's just about understanding how and which nodes are selected - here's a gist: https://gist.github.com/TMMC/6ec51c46d9fa57e1fd6a480f0d5da86d - I had the same issue, exactly the same code. Look for comments starting with make it works with.

edited Jan 21 '19 at 23:19

answered Jan 21 '19 at 21:18

TMMC

301
3
5

sorry to report that this gist didn't work for me^^ this link here did work, however: https://gist.github.com/onizuka17/efff70f10b1af55c6c5fe661a034878d (of course, just the photoswipe part) – mtness Sep 08 '21 at 19:37
@mtness This is different markup - without `figure` element in the HTML. – TMMC Sep 13 '21 at 13:14

Ergec · Answer 2 · 2016-12-11T17:14:34.430

0

Try ".my-gallery > li > figure > a" as gallerySelector

edited Dec 11 '16 at 17:14

answered Dec 11 '16 at 17:01

Ergec

11,608
7
52
62

I also have a tiny jQuery plugin for photoswipe. Supports any html format like yours, including fancybox and does not requires image dimensions to be defined. https://ergec.github.io/jQuery-for-PhotoSwipe/ – Ergec Dec 11 '16 at 17:09

Create photoswipe on UL>LI>FIGURE markup

2 Answers2