基于 BootStrap 4 的图片灯箱效果

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

思路

1. 灯箱效果利用的是BootStrap 模态框 写的插件
2. 利用JS修改我们需要的Html结构

灯箱效果 HTML 结构

* 灯箱效果使用的 Html 代码结构
*
* @author 智慧宫
* @link https://lerm.net
*/
<a href="lerm.png" data-toggle="lightbox" data-gallery="entry-gallery">
    <img src="lerm.png" alt="灯箱效果">
</a>

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

灯箱效果 JS

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

/**
* 修改图片Html结构
* @author 智慧宫
* @link   https://lerm.net
*
*/
$(function() {
    $('.entry img').each(function(i) {
        if (this.parentNode.href == false) {
            $(this).wrap("<a href="" + this.src + "" data-toggle="lightbox" data-gallery="entry-gallery"></a>");
         } else {
             $(this).parent().attr({'href':this.src, 'data-toggle': 'lightbox', 'data-gallery':'entry-gallery'});
        }
    });
});

其次，我们将灯箱效果绑定到img标签上即可

/**
* 绑定标签
* @author 智慧宫
* @link   https://lerm.net
*
*/
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
    event.preventDefault();
    return $(this).ekkoLightbox({
        onShown: function() {
            if (window.console) {
                return console.log('Checking our the events huh?');
            }
        },
        onNavigate: function(direction, itemIndex) {
            if (window.console) {
                return console.log('Navigating ' + direction + '. Current item: ' + itemIndex);
            }
        }
    })
});

效果展示

下载地址

小智将这些整理成了一下，请自行下载研究
百度网盘
官网下载