2013年9月1日星期日

漂亮实用的wordpress图片放大灯箱特效插件Auto Highslide中文完善版

auto highslide图片插件
之前我用的是FancyBox for WordPress,它曾是我最满意的JS 图片灯箱效果。它有丰富的后台设置,可以按你的需求更改画框,背景色,透明度等。jak换掉它因为应为美中不足的是点击图片放大后只能按屏幕显示大小同比例缩放图片,不能放大至图片实际大小,当你插入一张比屏幕长的图片时点击图片后显示的图片效果也许比你页面中的图片还小。
Auto Highslide完美支持图片实际大小,可随意拖动观赏大图细节哦o(≧v≦)o~~好棒,当鼠标移动到图片时显示放大镜图标,这样不要特意写“点击图片放大”浏览者就知道是放大图片。此外还支持键盘“左”、“右”方向键,查看“上一张”、“下一张”图片快捷键功能。

FancyBox for WordPress效果演示

FancyBox for WordPress效果图

Auto Highslide使用方法及版本介绍

Auto Highslide作者是Showfom(现在已经访问不到它的主页了)。后来经过weisay修改,丰富了鼠标移至图片时的菜单及图片下方的标题,显示效果比原版好。在weisay修改的修改版上我又做了一些修改。使显示效果更帅气,图片以外蒙罩层具有拉丝效果。

原版Auto Highslide效果下图

原版auto-highslide显示效果图
原版auto highslide在超大图显示上虽然有按屏蔽比例缩放功能但点击几乎占据了整个页面。

weisay修改版Auto Highslide

演示如下图
weisay修改版auto highslide
weisay修改版使用说明
大家是否有疑问weisay的蒙罩层是暗灰色,为什么上图显示是白色?应为此修改版插件默认的蒙罩层是就是白色,如果你想换成黑色,可以修改插件里面的highslide.css,将里面最后的
.highslide-dimming{background:#fff;}
改为
.highslide-dimming{background:#000;}
当然你也可以定义成其他颜色,看你自己的喜好了。
如果你在图片里面定义了alt属性,那么当你点击图片显示效果的时候,你会发现你的alt属性里面的文字会显示在图片底部。

Auto Highslide中文jak完善版

演示如下图
auto highslide完善版演示
使用说明
蒙罩层默认Opacity值是0.8,可以根据你主题情况和喜好更改,比如我首页订阅的就是0.9,找到插件中auto-highslide.php文件将
hs.dimmingOpacity = 0.8;
改为
hs.dimmingOpacity = 0.9;
Opacity是什么?我来作下解释,透明度,解释完毕。
注意:
  • 任何图片放大插件要达到放大效果都必须使图片链接到原图地址,就是a标签。
  • 安装好插件之后,如果点击图片一直显示“正在加载”,就是不能显示展开效果的话,看看你使用的主题是否加载了jQuery,此插件是需要jQuery支持的。
  • 原图可以很大,但是要定义width的大小,这样图片就会被压缩到页面合适的大小了,点击就能显示大图片。比如我的文章页内容显示宽度是680像素。
    ”这里填写的文字会显示在图片底部”

没有评论:

发表评论