调用照片在图像列表上滑动的简单方法

Easy Way to Invoke PhotoSwipe On Images List

本文关键字:简单 方法 照片 图像 列表 调用      更新时间:2023-09-26

从PhotoSwipe的文档,我得到了下面的片段。

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

http://photoswipe.com/documentation/getting-started.html 的文档没有解释如何轻松地在图像上调用PhotoSwipe。它确实提供了一些很长的代码要做,但我不乐意使用它,因为它太复杂了。

文档说如果我使用jQuery,代码可以变得更简单。

如果你使用像jQuery或MooTools这样的框架,或者如果你不需要 支持IE8,代码可以大大简化。

但我无法在文档或搜索中找到它。那么我应该如何基于此调用 PhotoSwipe?

我在github上找到了这个

https://gist.github.com/di5abled/d8d84af3be5e1bf12507

希望这有帮助

  • 编辑-

我成功遵循了本教程,对不起第一个链接

http://webdesign.tutsplus.com/tutorials/the-perfect-lightbox-using-photoswipe-with-jquery--cms-23587