冲浪时发现的JavaScript灯箱插件
上手体验了下感觉不错已经被我嵌入到MioV3主题里面了

插件下载

https://tokinx.github.io/ViewImage/

以下是官方文档

启用

我们为您提供了非常简便的初始化方法，方便您对程序进行一些个性化设置并正确启用

<script>
    window.ViewImage && ViewImage.init('.content img');
</script>

使用 view-image 属性控制灯箱范围
使用 no-view 属性排除一些图片

独立使用

<script>
    ViewImage.display([图片URL数组], '当前展示的图片URL')
</script>

示例

我们提供了几个DEMO，方便您进一步了解ViewImage

<script>
    window.ViewImage && ViewImage.init('#DEMO-1 img, #DEMO-2 a, #DEMO-3 a');
</script>

<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>

[链接] + [文字]

<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>

[链接] + [缩略图]

<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>

效果截图