如何从链接列表构建幻灯片数组

Question

我正在看@dimsemenov 编写的新的photowipe 脚本 。 我以前使用过由同一个作者编写的宏弹出式窗口。 宏伟的弹出窗口创建项目图库的方法要简单一些。 不必为容器元素添加一类my-gallery ，而只需向每个图像链接添加一个类，然后在js中启用图库即可。

像这样：

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

我非常喜欢这种方法，因为它允许在页面的任何位置包含链接。 例如，页面页眉中的图像可能是图库中的第一张图像，单击“下一步”可以转到页脚中的图像。 不需要容器。

不需要容器添加链接列表的最佳方法是什么？ 因此，我可以通过保持或多或少相同的HTML结构来从放大切换为光擦。

PS：我很确定http://photoswipe.com/documentation/getting-started.html上的示例标记是“错误的”（不语义）。 img元素应该在figure元素内部，并且也应该有一个figcaption元素。 所以这：

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

应该：

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

要么

<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

文档已更新，以支持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>