给博客配置灯箱-ViewImage

之前做lonesome主题的时候,用的是zoom.js,当时用的时候觉得还不错,具体呈现方式为本文中第一种显示方式。用的时间长了后,发现这个zoom.js有点问题,估计是我部署的问题。在一篇文章内图片过多而在点击浏览的时候,浏览器会卡死,所以我在chopstack上一直没用zoom.js灯箱。今天发现了这一款灯箱,推荐给大伙试一试。这款灯箱的名字叫做:ViewImage.js

第一种显示方式

这是一张图 点击前面的文字试一试。这种方式并不会直接加载原图,只有在点击前面的字显示大图的时候才会加载原图,我是用火狐浏览器网络检测测试的,你们也可以来测试一下。


第二种种显示方式

下方小图为缩略图,点击图片进去为原图。这种方式可以拿来做相册使用比较好。之前用zoom.js灯箱处理这种问题的时候我觉得挺棘手,至少在我这种小白眼睛里确实比较棘手。还好找到了此方法。这才真正的用到本主题上。


本主题相册html结构

<!--三张图片一列,a标签里放原图链接,img标签里放缩略图-->
<ul class="lonesome-img gallery-3">
    <li>
    <a href="原图链接"><img src="缩略图链接(可以使用oss图片规则)" alt="bingImg"></a>
    </li>
    <li>
    <a href="原图链接"><img src="缩略图链接(可以使用oss图片规则)" alt="bingImg1"></a>
    </li>
    <li>
    <a href="原图链接"><img src="缩略图链接(可以使用oss图片规则)" alt="bingImg2"></a>
    </li>
</ul>

<!--两张图片一列,a标签里放原图链接,img标签里放缩略图-->
<ul class="lonesome-img gallery-2">
    <li>
    <a href="原图链接"><img src="缩略图链接(可以使用oss图片规则)" alt="bingImg3"></a>
    </li>
    <li>
    <a href="原图链接"><img src="缩略图链接(可以使用oss图片规则)" alt="bingImg4"></a>
    </li>
</ul>

第二种方式最适合用来做相册了,原图尺寸太大,又不甘于压缩图片质量,那就让缩略图显示出来,需要看什么图就点击了再看。

利用火狐浏览器查看

火狐浏览器加载的图片

火狐浏览器里并没有加载原图,只加载了这个缩略图。带!view后缀的是我提前设置好的oss图片规则,直接利用图片规则来自动生成缩略图。

以上两种种显示方式均来自ViewImage.js。大家可以试一试,很不错的一个灯箱。具体怎么部署的,看下方链接,这里就不多说了。大神的教程很清楚了,我只是来推荐的。

灯箱来自:https://github.com/Tokinx/ViewImage

93年的一只单身狗,为了生活而在厦门努力挣扎的半吊子UI。

发表评论

已有 9 条评论

  1. 从良未遂 从良未遂说道:

    可以增加下一张这样的功能,否则图片多的话要多点很多次

    1. 枫叶 枫叶说道:

      用的别人的viewimagesjs,也不会添加这个需求。尴尬~

  2. 趋小势 趋小势说道:

    我用了怎么没发实现图片在同一个页面弹出呢?

    1. 枫叶 枫叶说道:

      额,你还没更新下主题,昨晚不是发你了嘛。

      1. 趋小势 趋小势说道:

        还没来的及更新,今天更新

  3. 云武 云武说道:

    这篇 Typecho 内容

    编辑器手动写进去吗?也就是第三种方式。

    1. 枫叶 枫叶说道:

      对。html写进去的。目前md写不了。