html 灯箱效果,基于 BootStrap 4 的图片灯箱效果 | 智慧宫

智慧宫的 WordPress 的主题一直没有添加灯箱效果，近日得闲，在Github上了一个插件，并结合wordpress主题做了修改，实现了基于BootStrap 4 的灯箱效果，将经验写在这里，供大家参考，所需文件请在文章尾部下载。

基于BootStrap 4的灯箱效果

思路灯箱效果利用的是BootStrap 模态框 写的插件

利用JS修改我们需要的Html结构

灯箱效果 HTML 结构* 灯箱效果使用的 Html 代码结构

*

* @author 智慧宫

* @link https://www.hanost.com

*/

data-gallery相同的图片会循环显示，可以在不同的相册使用不同的属性值来区分。

灯箱效果 JS

首先修改Html结构，将其改成我们需要的结构，很明显这里需要加载jQuery文件和bootstrap.(min).js文件。/**

* 修改图片Html结构

* @author 智慧宫

* @link https://www.hanost.com

*

*/

$(function() {