HighSlide一直以从图片、flash到html+ajax无所不能的快速响应弹窗效果著称,凭借完善的API、丰富的文档工具及出色的平台兼容性深受广大开源用户喜爱。

从最初参考Wordpress插件为Typecho实现插图弹窗,配合Smilies提供表情弹窗,到后来支持自写参数的相册套装,本作也算blog程序上集成HS功能较全面的一款插件。

highslide_typecho.jpg

基础功用依然是将全站目标地址为图片的链接实现点击弹窗,如:

  1. <a href="http://jzwalk.qiniudn.com/usr/uploads/highslide/young_life.jpg" title="小图链大图">
  2. <img src="http://jzwalk.qiniudn.com/usr/uploads/highslide/young_life_s.jpg" alt="图片链" />
  3. </a>
  4. <a href="http://jzwalk.qiniudn.com/usr/uploads/highslide/young_life.jpg" title="文字链大图">
  5. <strong>文字链</strong>
  6. </a>

启用插件后效果:

图片链

文字链

新版还支持在文章编辑页截取附件缩略图。只要上传的附件中有图片,点击“加载附件”即可显示原图预览,在上面拖选范围可截取缩略图,然后通过下方图标进行插入图链或删除操作:

highslide_146attach.jpg

插件设置中的应用模式还可以将全站没有链接的图片自动实现原图弹窗。除了增加新边框样式、角标文字和自动翻页等功能外,应用范围设置也可以限制js与css在特定类别页面的输出,选择基础版不会加载全功能版参数,最大限度保障大家对速度的要求。

highslide_panel146_s.jpg

原表情弹窗功能由于Smilies插件已有自带在1.4版本后移除。而为全功能版页面相册建立便捷的数据库(typecho_gallery)与配置面板支持作为新版改进重点,现在已取消相册数量上限,支持自定义上传目录和云储存,更新、移除和截图等操作均可自如进行。

启用插件后在管理菜单内可见相册面板入口:

highslide_gallery146_s.jpg

要添加图片到相册,首先必须填写原图与缩略图地址。图片名称用于后台标识,图片描述则可显示为前台效果。同样,上传图片后在原图预览上拖选范围,再点击左下角图标即可截取缩略图。

确定图片录入完毕后,编辑独立页面写入[GALLERY-相册组数字]发布即可显示相册。如[GALLERY-2]为相册组2的图片以第一张为封面弹出相册,改变封面只需拖拽面板左侧的图片列表调整排序。

多个相册还可以用[GALLERY-数字,数字,...](半角逗号隔开)联合解析,更方便横排和加速显示。面板右上角的相册设置内还有8套效果皮肤缩略图规格云储存(测试)等相关设置。

页面相册前台效果演示

另外,全功能版还支持html弹窗快捷标签<hs></hs>。只需几个简单参数就能让包含html、flash甚至ajax内容的弹窗也出现在你的blog中:

首先用标签括住的内容就是出现在弹窗中的内容,支持自写html。然后在<hs>里写入text=""为设置链接文字;id=""为设置弹窗id(文章有多个html弹窗时必要,仅一个可不写);title=""为设置弹窗标题(插件设置中勾选html特效的“标题栏”时有效,可不写);width=""height=""为控制弹窗大小(数字即可,单位px可不带)。

实用举例:

  1. <hs id="pop1" text="点我看MM" title="窗中窗~效果演示" width="500" height="310">
  2. <div align="center">
  3. <span style="color:#666;font-weight:bold;">点击图片换MM:)</span>
  4. <a href="http://jzwalk.qiniudn.com/usr/uploads/highslide/mm2.gif" title="">
  5. <img src="http://jzwalk.qiniudn.com/usr/uploads/highslide/mm1.gif" alt="" />
  6. </a>
  7. </div>
  8. </hs>

启用插件后效果:

点我看MM
点击图片换MM:)

写入ajax=""可开启ajax模式并目标url(可接#id调用锚点区域)。此时弹窗只显示目标页面内容。

使用举例:

  1. <hs text="点我看评论" ajax="#comments" title="本文评论" height="600">
  2. 调用本页的评论区id,这段标签内的文字不会显示
  3. </hs>

启用插件后效果:

点我看评论
调用本页的评论区id,这段标签里的文字不会显示

OK目前插件功能就酱紫了!下一页changlog会记录每次更新的改动细节。插件编写过程中学习参考了很多开源作品,在此一并致谢。也欢迎大家下载试用并提出宝贵建议。

attachment HighSlide_v1.4.6.zip (149.9 KB, 下载次数: 5946, 最后修改: 2014-05-15 12:37)

PS:使用Typecho1.0开发版(14.5.26)的童鞋请前往github获取RC版插件

(Last modified: 2014-05-15 12:44)