基于 BootStrap 4 的图片灯箱效果

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

基于BootStrap 4的灯箱效果
基于BootStrap 4的灯箱效果

思路

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

灯箱效果 HTML 结构

/**
* 灯箱效果使用的 Html 代码结构
*
* @author 智慧宫
* @link http://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文件。

/**
 *
 * @author Lerm
 * @link   http://lerm.net
 * @date   2018-07-14
 */
$(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 Lerm
 * @link   http://lerm.net
 * @date   2018-07-14
 */
$(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);
            }
        }
    })
});

效果展示


灯箱效果


灯箱效果


灯箱效果

下载地址

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

发表评论