HighSlide是一款经典的原生js灯箱效果库，支持图片、flash、html及ajax页面内容的弹出和拖拽浏览，其API功能丰富且平台兼容性稳定，问世多年来在全球网站前端应用十分广泛。

它的插件也是我比较早就为typecho写的，主要用于实现博客的链接弹窗与相册效果，也曾参考wordpress的插件为Smilies提供过特效支持。后来页面相册部分升级为独立的上传与数据库配置，从列表录入到分组输出更为便捷自如，再加上附件截取缩略图功能的无缝集成和云储存API支持等，也算是blog程序中发挥HS效能相当全面的一件了。

highslide_typecho.jpg

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

  1. <a href="https://www.yzmb.me/usr/uploads/highslide/young_life.jpg" title="小图链大图"><img src="https://www.yzmb.me/usr/uploads/highslide/young_life_s.jpg" alt="图片链接" /></a>
  2. <a href="https://www.yzmb.me/usr/uploads/highslide/young_life.jpg" title="文字链大图">文字链接</a>

插件启用后会自动套用效果，如»

图片链接

文字链接

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

highslide_attach_v.1.4.7.jpg

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

highslide_panel_v1.4.7_s.png

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

highslide_gallery_v1.4.7_s.jpg

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

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

相册风格在默认主题下的演示页面

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

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

以上代码效果如» (标签内使用Markdown语法内容同理)

点我看MM
点击下图换MM

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

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

启用插件(全功能版)后效果如»

点我看演示
ajax模式调用目标页面做弹窗内容，故此处文字不会显示。

1.4.7版还针对typecho1.1做了一些重写优化，包括异步截图的反馈效果，GD库生成的图像画质及数据库的调用逻辑等等，在稳定性和效率方面有更好的表现。主要更新记录都列在下方的changlog里。也在此致谢插件编写过程中参考的所有开源作品。欢迎大家下载试用并提出宝贵的意见建议！:)

附件 HighSlide_v1.4.7.zip (250.7 KB, 下载次数: 8536, 最后修改: 2018-07-16 17:26)

Changlog

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内核；
实现文章图片链接弹窗效果。

(Last modified: 2018-07-16 22:04)