TYPECHO WIKI
每一个作品都值得被记录

Typecho 弹窗相册插件 HighSlide

Typecho维基君插件列表 • 4041次浏览 • 发布 2019-04-12 • 更新 2019-04-12

插件简介

这是一款功能特别棒的Typecho平台的图片弹窗插件,带有附件截取缩略图功能的无缝集成和云储存API支持等功能,该插件基于HighSlide这款经典的原生js灯箱效果库,支持图片、flash、html及ajax页面内容的弹出和拖拽浏览,其API功能丰富且平台兼容性稳定,问世多年来在全球网站前端应用十分广泛。

插件说明

基本功用还是将目标地址为图片的链接实现点击弹窗。像这样的源码(Markdown链接同理):

<a href="http://yzmb-1252422232.file.myqcloud.com/usr/uploads/highslide/young_life.jpg" title="小图链大图">
<img src="http://yzmb-1252422232.file.myqcloud.com/usr/uploads/highslide/young_life_s.jpg" alt="图片链接" />
</a>
<a href="http://yzmb-1252422232.file.myqcloud.com/usr/uploads/highslide/young_life.jpg" title="文字链大图">
文字链接
</a>

新版支持编辑文章时在附件选项卡下点击缩略图模式按钮预览图片并进行裁切。该模式不会显示非图片附件,拖选区域后即可通过下方图标确认截取并插入图片链接,再次点击按钮可返回普通模式进行附件的编辑或删除操作。1.4.7后缩略图也会归档至文章附件里,和原图一起方便查找和管理。之前版本生成的附件缩略图不支持预览,但可以通过重新截取将其替换并归档。

2183826002 (1).jpg

如果在插件设置的弹窗模式中勾选“所有图片”则无链接图片也会实现原图弹窗。应用范围设置能让你灵活地选择加载效果的页面类型。其他选项就不细说了,背景遮罩和角标文字支持留空,注意分界线下方部分只对全功能版核心有效。

898562135.png

接下来是另一个重点功能:页面相册。首先插件启用后会在数据库新增一行typecho_gallery并在管理菜单内添加独立面板入口如下:

3662523769.jpg

通过面板右上方的预览区域可以方便地进行图片上传与缩略图截取操作,然后填写各项信息录入左侧列表。其中图片名称用于后台标识,描述则可以在前台显示。录入完毕后即可在页面内容里写入[GALLERY-相册组数字]发布显示。默认每个相册组第一张图片为封面,可通过拖拽调整排序。多个相册支持[GALLERY-数字,数字,...](半角逗号隔开)形式联合输出,方便横排显示和加速解析。

右侧顶部的相册设置选项卡下可选择8套风格并进行缩略图尺寸设置。新版集成了有免费额度的4家云储存sdk,支持按API直接生成云端缩略图。同时云储存选项底部也可勾选应用到文章附件缩略。

最后一项功能便是html弹窗标签<hs></hs>的解析。简单说用该标签括住的内容即会出现在弹窗内,而触发弹窗的链接文字可以通过写入text参数指定。若文章内有多个html弹窗需指定id参数(只有一个可不写),插件设置里勾选html弹窗下的“标题栏”后还可用title参数指定标题文字,width和height参数用于指定弹窗大小(单位px可不带)。附上一个完整实例:

<hs id="pop1" text="点我看MM" title="窗中窗效果演示" width="500" height="310">
    <div style="text-align:center;">
        <span style="color:#666;font-weight:bold;">点击下图换MM</span>
        <a href="http://yzmb-1252422232.file.myqcloud.com/usr/uploads/highslide/mm2.gif" title="">
            <img src="http://yzmb-1252422232.file.myqcloud.com/usr/uploads/highslide/mm1.gif" alt="" />
        </a>
    </div>
</hs>

特别提到的是ajax参数,它可以异步调取指定页面内容到弹窗内(必须为同域名下或开启跨域许可的页面),并支持接#元素id显示锚点区域。

<hs text="点我看演示" ajax="http://www.yzmb.me/links.html#comments" title="“LINK有情”页面评论区" height="600">
ajax模式调用目标页面做弹窗内容,故此处文字不会显示。
</hs>

插件更新

1.4.7 使用5.0.0packed双内核; 附件栏内集成缩略图模式; 附件缩略图支持归档联动; 优化相册的修改模式机制; 支持4家免费云储存及API; 增加html弹窗编辑器按钮; 修正MD转义等bug。

1.4.6 可预览附件截取缩略图; 相册列表实现异步加载; 相册标签可无参数解析; 相册可自定义上传目录; 相册集成3家云储存sdk; 增加角标显示方位设置; 增加缩略图多规格设置; 修正ajax参数兼容bug; 优化代码结构添加注释。

1.4.5 可手动拖拽截取缩略图; 增加自动翻页效果设置; 相册面板支持组别切换; 相册标签支持联合解析; 相册使用独立上传目录; 修正相册皮肤效果bug。

1.4.4 增加替换应用范围选择; 相册图片上传自动归档; 修正若干判断和样式bug。

1.4.3 兼容旧版附件链接替换; 修正角标默认链接地址;

1.4.2 增加角标文字自定义设置; 增加无链接图片替换模式; 增加hs标签ajax参数支持。

1.4.1 修正换行链接替换bug; 修正Markdown兼容问题。

1.4.0 使用4.1.13packed双内核; 代码重写兼容typecho0.9; 增加相册数据库及面板支持; 增加html弹窗标签参数解析。

1.3.0 使用4.1.9full-packed内核; 优化表情弹窗效果并兼容IE6; 增加页面相册功能和皮肤选择。

1.2.0 使用4.0.8full-min内核; 解析摘要并增加模版判断。

1.1.0 使用4.0.5html-packed内核; 为Smilies提供表情弹窗支持。

1.0.0 使用HighSlide3.3.18内核; 实现文章图片链接弹窗效果。

广告声明:文内含有的对外跳转链接(包括不限于超链接、二维码、口令等形式),用于传递更多信息,节省甄选时间,结果仅供参考,Typecho.Wiki所有文章均包含本声明。
下载地址

  更新时间:2019年04月12日

  软件作者:羽中

  下载链接: 链接

厂商投放

【腾讯云】🎉五一云上盛惠!云服务器99元/月续费同价!

腾讯云五一劳动节海量产品 · 轻松上云!云服务器首年1.8折起,买1年送3个月!超值优惠,性能稳定,让您的云端之旅更加畅享。快来腾讯云选购吧!

广告
添加新评论 »