第一步引入lightbox的css和js文件

在模块head中加入 <link href="../lightbox/css/lightbox.min.css" rel="stylesheet" />
footer模块中引入 <script src="../lightbox/js/lightbox-plus-jquery.min.js"></script>

给图片加入js需要的连接与锚点

首先以txp官方模认的文章附图为例.
默认文章附图字段如下:

<img loading="lazy" itemprop="url contentUrl" src="<txp:image_url link='0' />" alt="<txp:image_info type='alt' />">

想让这个附图,点一下就弹出显示.只需要简单的修改为:

<a href="<txp:image_url />" data-lightbox="example-set">
<img src="<txp:image_url />" alt="<txp:image_info type="alt" wraptag="" class="" />" />
</a>

本博在文章内引入附图并实现点击弹出显示的代码.

先是建一个用文附图调用的相册模块,模块就命名为 -module--article--image-masonry 当然你也可以取个其它的名字.

<txp:output_form form="--variables--gallery" />
<section<txp:evaluate> class="<txp:if_yield name="align">align-<txp:yield name="align" /> </txp:if_yield><txp:if_yield name="padding-y">py-<txp:yield name="padding-y" /></txp:if_yield>"</txp:evaluate>>
    <div class="layout-text<txp:variable name="--gallery-columns" />col gallery<txp:if_variable name="--gallery-gap" not value=""> gap-<txp:variable name="--gallery-gap" /></txp:if_variable>">
        <!-- 以上内容涉及到本博客的版式模板控件,可以忽略. -->
        <txp:evaluate>
            <txp:images id='<txp:custom_field name="article_image" />' limit="0" break='' sort='date desc'>
                <a href="<txp:image_url />" data-lightbox="example-set">
                    <img loading="lazy" src="<txp:image_url />" alt="<txp:image_info type='alt' />" itemprop="image">
                </a>
            </txp:images>
        </txp:evaluate>
        <!-- 以下是最上面包裹标签,同样忽略 -->
    </div>
</section>

然后在 archive 模块 —文章显示位置— 内加入文章附图的输出标签 <txp:output_form form="-module--article--image-masonry" />

关于lightbox的使用说明和文档,可以到 github下载和查看