How to build array of slides from list of links

Question

I'm having a look at the new photoswipe script by @dimsemenov. I've used magnific popup before, written by the same author. Magnific popup's method of creating a gallery of items was a bit simpler. Rather than having a container element with a class of my-gallery you simply added a class to each image link, then enabled a gallery in js.

Like so:

HTML:

<a href="<?php echo $image_src; ?>" title="<?php echo $image_alt; ?>" data-mfp-src="<?php echo $image_src; ?>" class="image-link"><img src="<?php echo $image_src; ?>" alt="<?php echo $image_alt; ?>"></a>

JS:

$('.image-link').magnificPopup({
        type: 'image',
        closeOnContentClick: true,
        closeBtnInside: false,
        gallery: {
            enabled: true
        },
        etc

I prefer this method a lot, because it allows links to be included from anywhere in the page. E.g. an image in the page header could be the first image in the gallery and clicking next gets you to an image in the footer. There is no need for a container.

What would be the best method to add a list of links without the need for a container? So I could switch from magnific to photoswipe by keeping more or less the same HTML structure.

PS: I'm pretty sure the example markup on http://photoswipe.com/documentation/getting-started.html is "wrong" (unsemantic). the img element should be inside the figure element and there should be a figcaption element too. So this:

<a href="path/to/image1.jpg" data-size="1600x1600">
    <img src="path/to/thumbnail-image1.jpg" />
    <figure>This is dummy caption 1.</figure>
</a>

should be:

<a href="path/to/image1.jpg" data-size="1600x1600">
    <figure>
        <img src="path/to/thumbnail-image1.jpg" />
        <figcaption>This is dummy caption 1.</figcaption>
    </figure>
</a>

or

<figure>
    <a href="path/to/image1.jpg" data-size="1600x1600">
        <img src="path/to/thumbnail-image1.jpg" />
        <figcaption>This is dummy caption 1.</figcaption>
    </a>
</figure>

Answer 1

Documentation was updated to support semantic markup with Schema.org http://photoswipe.com/documentation/getting-started.html

<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">

    <figure itemscope itemtype="http://schema.org/ImageObject">
        <a href="large-image.jpg" itemprop="contentUrl" data-size="600x400">
            <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" />
        </a>
        <figcaption itemprop="caption description">Image caption</figcaption>
    </figure>

    <figure itemscope itemtype="http://schema.org/ImageObject">
        <a href="large-image.jpg" itemprop="contentUrl" data-size="600x400">
            <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" />
        </a>
        <figcaption itemprop="caption description">Image caption</figcaption>
    </figure>


</div>