Typecho弹窗相册插件HighSlide1.4.7
本文最后由豫见长安更新于2024 年 4 月 5 日,已超过282天没有更新。如果文章内容或图片资源失效,请留言反馈,将会及时处理,谢谢!
HighSlide是一款经典的原生js灯箱效果库,支持图片、flash、html及ajax页面内容的弹出和拖拽浏览,其API功能丰富且平台兼容性稳定,问世多年来在全球网站前端应用十分广泛。
基本功用还是将目标地址为图片的链接实现点击弹窗。像这样的源码(Markdown链接同理):
<a href="https://yzmb-1252422232.file.myqcloud.com/usr/uploads/highslide/young_life.jpg" title="小图链大图"><img src="https://yzmb-1252422232.file.myqcloud.com/usr/uploads/highslide/young_life_s.jpg" alt="图片链接" /></a>
<a href="https://yzmb-1252422232.file.myqcloud.com/usr/uploads/highslide/young_life.jpg" title="文字链大图">文字链接</a>
插件启用后会自动套用效果,如»
新版支持编辑文章时在附件选项卡下点击缩略图模式按钮预览图片并进行裁切。该模式不会显示非图片附件,拖选区域后即可通过下方图标确认截取并插入图片链接,再次点击按钮可返回普通模式进行附件的编辑或删除操作。1.4.7后缩略图也会归档至文章附件里,和原图一起方便查找和管理。之前版本生成的附件缩略图不支持预览,但可以通过重新截取将其替换并归档。
如果在插件设置的弹窗模式中勾选“所有图片”则无链接图片也会实现原图弹窗。应用范围设置能让你灵活地选择加载效果的页面类型。其他选项就不细说了,背景遮罩和角标文字支持留空,注意分界线下方部分只对全功能版核心有效。
接下来是另一个重点功能:页面相册。首先插件启用后会在数据库新增一行typecho_gallery并在管理菜单内添加独立面板入口如下:
通过面板右上方的预览区域可以方便地进行图片上传与缩略图截取操作,然后填写各项信息录入左侧列表。其中图片名称用于后台标识,描述则可以在前台显示。录入完毕后即可在页面内容里写入[GALLERY-相册组数字]发布显示。默认每个相册组第一张图片为封面,可通过拖拽调整排序。多个相册支持GALLERY-数字,数字,...形式联合输出,方便横排显示和加速解析。
右侧顶部的相册设置选项卡下可选择8套风格并进行缩略图尺寸设置。新版集成了有免费额度的4家云储存sdk,支持按API直接生成云端缩略图。同时云储存选项底部也可勾选应用到文章附件缩略。
相册风格在默认主题下的演示页面
最后一项功能便是html弹窗标签的解析。简单说用该标签括住的内容即会出现在弹窗内,而触发弹窗的链接文字可以通过写入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><br />
<a href="https://yzmb-1252422232.file.myqcloud.com/usr/uploads/highslide/mm2.gif" title=""><img src="https://yzmb-1252422232.file.myqcloud.com/usr/uploads/highslide/mm1.gif" alt="" /></a></div>
</hs>
文章标题:Typecho弹窗相册插件HighSlide1.4.7
文章链接:https://zhaojx.fun/archives/152/
最后编辑:2024 年 4 月 5 日 10:18 By 豫见长安
许可协议: 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)