基于jQuery ，Gzip后不足 1kb 的響應(yīng)式極簡燈箱插件。

• 項(xiàng)目介紹：詳情
• 項(xiàng)目地址：Github
• 第三方介紹：詳情

ViewImage.js

基于jQuery ，Gzip后不足 1kb 的響應(yīng)式極簡燈箱插件

在頁底提供的下載文件中獲取：

view-image.js?or?view-image.min.js

引用

首先確保你的頁面已經(jīng)正確引用jQuery（建議2.0+），然后再引用ViewImage.js。

<script src="http://tokinx.github.io/ViewImage/view-image.min.js"></script>

啟用

我們?yōu)槟峁┝朔浅：啽愕某跏蓟椒ǎ奖隳鷮Τ绦蜻M(jìn)行一些個(gè)性化設(shè)置并正確啟用

<script>
    jQuery(document).ready(function () {
        jQuery.viewImage({
            'target' : '.view-image img', //需要使用ViewImage的圖片
            'exclude': '.exclude img',    //要排除的圖片
            'delay'  : 300                //延遲時(shí)間
        });
    });
</script>

示例 ：

我們提供了幾個(gè)DEMO，方便您進(jìn)一步了解ViewImage

<script>
    jQuery(document).ready(function () {
        jQuery.viewImage({
            'target': '.view-image img,.view-image2 a,.view-image3 a',
            'exclude': '.exc',
            'delay': 300
        });
    });
</script>

[圖片]

<ul class="view-image">
    <li><img src="原圖"></li>
    <li><img src="原圖"></li>
    <li><img src="原圖"></li>
    <li><img src="原圖" class="exc"></li>
</ul>

[鏈接] + [文字]

<ul class="view-image2">
    <li><a href="原圖">可用</a></li>
    <li><a href="原圖" class="exc">不可用</a></li>
</ul>

[鏈接] + [縮略圖]

<ul class="view-image3">
    <li><a href="原圖"><img src="縮略圖 或 原圖"></a></li>
    <li><a href="原圖" class="exc"><img src="縮略圖 或 原圖"></a></li>
</ul>

兼容性：

如果您需要一款功能更加豐富的燈箱，那么還可以看看這篇：

Fancybox - 用于顯示圖像，視頻等的jQuery燈箱腳本

Muze

• 19年6月17日
• 喜歡：0
• 瀏覽：588