Question

我正在photoswipe script查看新的@dimsemenov。之前我曾使用过大型弹出窗口，由同一位作者撰写。 Magnific popup创建项目库的方法稍微简单一些。您只需在每个图像链接中添加一个类，而不是拥有类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结构从magnific切换到photoswipe。

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>

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

1 个答案: