ViewImage.js 小巧卓越的原生JavaScript灯箱插件

鼠子

Web前端

JavaScript

2024-09-16

冲浪时发现的JavaScript灯箱插件
上手体验了下感觉不错已经被我嵌入到MioV3主题里面了
### 插件下载
https://tokinx.github.io/ViewImage/
#### 以下是官方文档
##### 启用
我们为您提供了非常简便的初始化方法，方便您对程序进行一些个性化设置并正确启用
```javascript
<script>
    window.ViewImage && ViewImage.init('.content img');
</script>
```
使用 view-image 属性控制灯箱范围
使用 no-view 属性排除一些图片
##### 独立使用
```javascript
<script>
    ViewImage.display([图片URL数组], '当前展示的图片URL')
</script>
```
##### 示例
我们提供了几个DEMO，方便您进一步了解ViewImage
```javascript
<script>
    window.ViewImage && ViewImage.init('#DEMO-1 img, #DEMO-2 a, #DEMO-3 a');
</script>
```
```html
<ul id="DEMO-1" class="view-box pure-g" view-image>
    <li class="pure-u-1-4">
        <img src="static/BHPY1.jpg" alt="Bing Img">
    </li>
    <li class="pure-u-1-4">
        <img src="static/BHPY2.jpg" alt="Bing Img">
    </li>
    <li class="pure-u-1-4">
        <img src="static/BHPY3.jpg" alt="Bing Img">
    </li>
    <li class="pure-u-1-4 no-view">
        <img src="static/BHPY4.jpg" alt="Bing Img" no-view>
    </li>
</ul>
```
##### [链接] + [文字]
```html
<ul id="DEMO-2" class="view-box href-test pure-g" view-image>
    <li class="pure-u-1-2" style="padding: 10% 0;">
        <a href="static/BHPY2.jpg">
            可用
        </a>
    </li>
    <li class="pure-u-1-2 no-view" style="padding: 10% 0;">
        <a href="static/BHPY3.jpg" no-view>
            不可用
        </a>
    </li>
</ul>
```
##### [链接] + [缩略图]
```html
<ul id="DEMO-3" class="view-box href-test pure-g" view-image>
    <li class="pure-u-1-2">
        <a href="static/BHPY2.jpg">
            <img src="static/BHPY2.jpg" alt="Bing Img">
        </a>
    </li>
    <li class="pure-u-1-2 no-view">
        <a href="static/BHPY3.jpg" no-view>
            <img src="static/BHPY3.jpg" alt="Bing Img">
        </a>
    </li>
</ul>
```
#### 效果截图
![E769C3B96AD6F63C2CBC220204997A47.png](https://blog.miomoe.cn/uploads/2024/09/2710831261.png)

本文链接： https://blog.miomoe.cn/front-end/ViewImageJS.html

暂无评论

所有评论发表评论