# js轻量级图片暗箱插件 - by：小枫

**Repository Path**: xfwlclub/lightweight-image-blackbox

## Basic Information

- **Project Name**: js轻量级图片暗箱插件 - by：小枫
- **Description**: xf-PictureBlackbox.js是小枫写的一套轻量级和简单易用的JavaScript暗箱插件，用来显示图像的放大，响应模态弹出和CSS3模糊淡入淡出动画，并自带图片懒加载功能。
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: https://www.xfabe.com
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2023-07-13
- **Last Updated**: 2024-10-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 图片放大, 图片暗箱插件, js淡出图片, js淡入图片, JS插件

## README

# js轻量级图片暗箱插件

#### 介绍
xf-PictureBlackbox.js是小枫写的一套 **轻量级和简单易用的JavaScript暗箱插件** ，用来显示图像的放大，响应模态弹出和CSS3模糊淡入淡出动画，并内置提示框组件和复制剪切版的功能。

 **文件压缩后6kb都不到** ，还在等什么？ :tw-1f60d: 

使用起来贼简单，真的有手就行~  :tw-1f448: 

### demo

 **演示** ：[https://player.xfyun.club/js/xf-Picture-Blackbox/demo.html](https://player.xfyun.club/js/xf-Picture-Blackbox/demo.html)

#### 使用教程（保姆级）

1.  引入cdn xf-PictureBlackbox.js文件， **无任何依赖** ，复制下面代码的即可【 **怕失效可以下载下面的文件放到本地** 】

```
<script src="https://player.xfyun.club/js/xf-Picture-Blackbox/xf-PictureBlackbox.min.js"></script>
```

2.  随便写个标签

```
<!-- 
    id/class：xf-PicBlackbox (必填)
    data-pic：设置图片路径 (必填)
    data-text：设置图片文本 (选填)
    data-src：data-src 具有懒加载功能可直接替代 src 属性，并且不用写 data-pic 属性，也会有图片暗箱功能（img标签必填）
    data-popUp: 添加该属性后img标签则不弹出图片，可不写值（选填）
-->

    <!-- 示例1： -->
    <img class="xf-PicBlackbox" width="200" data-src="./nitai5v1.png" data-text="我会弹出图片">

    <!-- 示例2： -->
    <a href="JavaScript:;" class="xf-PicBlackbox" data-pic="./myQQImg.png" data-text="扫一扫添加好友">点我淡出图片和文本</a>

    <!-- 示例3： -->
    <button class="xf-PicBlackbox" data-pic="./pexels-aarti-vijay-2693529.jpg">点我不带data-text属性</button>

    <!-- 示例4： -->
    <img class="xf-PicBlackbox" width="200" data-src="./nitai5v1.png" data-text="我不弹出图片"  data-popUp>

    <!-- 引入插件 -->
    <script src="https://player.xfyun.club/js/xf-Picture-Blackbox/xf-PictureBlackbox.min.js"></script>

...
```

 **3.  标签里面有3个属性分别代表的是** 

> id/class="xf-PicBlackbox"       **注意：这个名称'xf-PicBlackbox'一定要写，否则插件执行不了！！**  建议使用类名调用

> data-pic="图片路径"     ** 目前只能存放图片路径（外链）** ，不能放视频链接。

> data-text="图片文字"   点击文字就可以复制它（选填/可不填）

> data-src：data-src 具有懒加载功能可直接替代 src 属性，并且不用写 data-pic 属性，也会有图片暗箱功能（img标签必填）

> data-popUp: 添加该属性后img标签则不弹出图片，可不写值（选填）

#### 展示图

![图片展示0](https://foruda.gitee.com/images/1689179616698985541/bd20ea0d_8353399.gif "xf-Picture-Blackbox-gif.gif")

![图片展示1](https://foruda.gitee.com/images/1689179249069048353/25547ac7_8353399.jpeg "Picture-Blackbox.jpg")

![图片展示2](https://foruda.gitee.com/images/1689179268230087142/d5616172_8353399.jpeg "Picture-Blackbox-Code.jpg")

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)