轻量级原生js lightbox灯箱插件

演示  website 下载

介绍

一个轻量级、快速的、js lightbox插件，用于图像缩放。

使用方法

1. 在页面中加载lightbox图像缩放插件js文件。

<script src="dist/image-zoom.js"></script>

2. 初始化插件。

imageZoom()

3. 设置在lightbox中打开哪些图像。

imageZoom('img, svg')

4.覆盖lightbox默认样式。

:root {
  overflow-x: hidden;
}

.image-zoom-wrapper::after {
  opacity: 0;
  transition: opacity 150ms cubic-bezier(.25, .1, .25 ,1);
  display: block;
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: black;
  z-index: 99998;
  pointer-events: none;
}

.image-zoom-wrapper.image-zoom-wrapper-zoomed::after {
  opacity: .6;
  cursor: zoom-out;
  pointer-events: all;
}

.image-zoom {
  transition: transform 300ms cubic-bezier(.25, .1, .25 ,1);
  cursor: zoom-in;
}

.image-zoom-zoomed {
  position: relative;
  z-index: 99999;
  cursor: zoom-out;
}