layer.photos 点击预览图在弹出前，能不能做一个判断？

[lixyz]

一直以来做移动端开发，最近自己搞了个小玩意儿，试着写了下 web 端的东西，一脸懵逼

需求是一个类似于相册的东西，网格展示图片的缩略图，正常状态下，点击缩略图会弹出大图，在编辑状态下，点击图片不弹出，而是 checkbox 选中 /取消。

大致代码如下

<div id="layer-photos-demo" class="layer-photos-demo">
    <th:block th:each="image,pro : ${image}">
        <div class="item_container">
            <img th:class="image"
                 th:layer-pid="${image.objectId}"
                 th:layer-src="@{'https://www.xxxxxxx.top:1443/'+ ${categoryName}+'/cover/' + ${image.coverFileName}}"
                 th:src="@{'https://www.xxxxxxx.top:1443/'+ ${categoryName}+'/thumbnail/' + ${image.thumbnailFileName}}"
                 th:alt="${image.originalFileName}"
                 th:onclick="showImage([[${pro}]],[[${image}]])">
            <input id="check-box" class="check-box" type="checkbox" name="checkbox" lay-skin="primary" title="写作"
                   style="display: none">
        </div>
    </th:block>
</div>

    let editable = false;

    function showImage(pro, image) {
        console.log(editable);
        if (editable) {
            let checkBox = document.getElementsByClassName("check-box")
            $(checkBox[pro.index]).prop("checked", !$(checkBox[pro.index]).prop("checked"));//正确选中
            let form = layui.form;
            form.render("checkbox");
        } else {
            // 调用示例
            layer.photos({
                photos: '#layer-photos-demo'
                , anim: 5 //0-6 的选择，指定弹出图片动画类型，默认随机（请注意，3.0 之前的版本用 shift 参数）
            });
        }
    }

现在遇到的情况是，即使是在编辑情况下（ editable = true ）的时候，点击缩略图，依旧会弹出大图，有没有大神给讲讲到底是啥原因啊。

或者说类似功能，有没有其他 UI 框架推荐？感谢感谢