Photoswipe Gallery Sample


Making a Gallery

  • Kubernetes 知识图谱
  • 云原生导航
  • 谷歌搜索
  • Raft 协议动画演示
  • 搬瓦工

    Beautiful Hugo adds a few custom shortcodes created by Li-Wen Yip and Gert-Jan van den Berg for making galleries with PhotoSwipe .

    Example

    The above gallery was created using the following shortcodes:

    {{< gallery caption-effect="fade" >}}
      {{< figure thumb="-thumb" link="/img/hexagon.jpg" >}}
      {{< figure thumb="-thumb" link="/img/sphere.jpg" caption="Sphere" >}}
      {{< figure thumb="-thumb" link="/img/triangle.jpg" caption="Triangle" alt="This is a long comment about a triangle" >}}
    {{< /gallery >}}
    

    Usage

    For full details please see the hugo-easy-gallery GitHub page. Basic usages from above are:

    • Create a gallery with open and close tags {{< gallery >}} and {{< /gallery >}}
    • {{< figure src="image.jpg" >}} will use image.jpg for thumbnail and lightbox
    • {{< figure src="thumb.jpg" link="image.jpg" >}} will use thumb.jpg for thumbnail and image.jpg for lightbox
    • {{< figure thumb="-small" link="image.jpg" >}} will use image-small.jpg for thumbnail and image.jpg for lightbox
    • All the features/parameters of Hugo’s built-in figure shortcode work as normal, i.e. src, link, title, caption, class, attr (attribution), attrlink, alt
    • {{< gallery caption-effect="fade" >}} will fade in captions for all figures in this gallery instead of the default slide-up behavior
    • Many gallery styles for captions and hover effects exist; view the hugo-easy-gallery GitHub for all options
    • Note that this theme will load the photoswipe gallery theme and scripts by default, no need to load photoswipe on your individual pages

    -------他日江湖相逢 再当杯酒言欢-------

    「真诚赞赏,手留余香」

    米开朗基杨

    真诚赞赏,手留余香

    使用微信扫描二维码完成支付


    相关推荐