Javascript 如何从链接列表构建幻灯片阵列

我正在看一看新的。我以前用过放大弹出窗口，是同一个作者写的。放大弹出的方法创建一个画廊的项目是有点简单。您只需在每个图像链接中添加一个类，然后在js中启用一个库，而不是使用一个类为

MyGallery

的容器元素

像这样：

HTML:

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

在不需要容器的情况下添加链接列表的最佳方法是什么？因此，我可以通过保持大致相同的HTML结构，从放大切换到Photosweep

PS：我很确定上面的示例标记是“错误的”（不可靠）。

img

元素应该在

图

元素内，并且应该有一个

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>

或

---

文档已更新，以支持Schema.org的语义标记

图像标题
图像标题

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

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