盘点那些惊艳好用的灯箱插件

主要分为两类:一个是代码法,一个是插件法

一、代码法

引入 ViewImage.js 项目,Gzip后仅 2kb,小巧卓越的原生JavaScript灯箱插件

背景璃模糊好评

灯箱演示

1、引用

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

2、启用

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

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

使用 view-image 属性控制灯箱范围

使用 no-view 属性排除一些图片

3、独立使用

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

详细文档请阅读:https://tokinx.github.io/ViewImage、

二、插件法

1、WordPress插件

Simple Fancybox

Simple Fancybox介绍:https://wordpress.transformnews.com/plugins/simple-fancybox-1437

已测试的设备:

  • Chrome
  • Firefox
  • IE10/11
  • Edge
  • iOS Safari
  • Android 7.0 Tablet

2、Typecho插件

效果演示:https://www.jq22.com/yanshi5523

(1)直接安装插件

插件安装启用后,选择jQuery库的加载方式

1、解压后得到Swipebox-master,把里面的Swipebox文件夹复制到网站usr/plugins

2、登录网站后台,在左上角控制台——插件——禁用的插件列表中启用Swipebox

3、在启用的插件列表中点击Swipebox插件的设置,进入设置界面:

若主题已调用jQuery,选择“手动加载”,否则选择“自动加载”,最后保存。

4、访问有图片的文章,点击图片,则有Lightbox弹框显示效果。

更详细的教程:https://cloud.tencent.com/developer/article/1844853

(2)手动引入 Swipebox

若不想使用插件,可以把 Swipebox.js 集成到自己使用的主题中。

原始插件主页:https://brutaldesign.github.io/swipebox/

Javascript
<script src="lib/jquery-3.5.2.js"></script>
<script src="src/js/jquery.swipebox.js"></script>
CSS

Include the swipebox CSS style in your head tags.

<link rel="stylesheet" href="src/css/swipebox.css">
HTML

Use a specific class for your links and use the title attribute as caption.

<a href="big/image.jpg" class="swipebox" title="My Caption">
激活使用插件
$( '.swipebox' ).swipebox();

若用此,建议使用公用CDN加速:https://www.bootcdn.cn/swipebox/

本文采用 CC BY-NC-SA 3.0 Unported 许可,转载请以超链接注明出处。
原文地址:盘点那些惊艳好用的灯箱插件 作者:松鼠小
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
Source: Telegram @AmashiroNatsukiEars_NoWord Sticker
Source: Github @zhheo/Sticker-Heo
Source: github.com/k4yt3x/flowerhd
颜文字
AmashiroNatsukiEars
Heo
小恐龙
花!
上一篇
下一篇