• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏幻天博客吧
  • 欢迎来到铃音的私人博客! QQ群

[插件推荐]WordPress图片灯箱效果插件:Auto Highslide(自动链接到原图)

兴趣 天空の铃音 5年前 (2014-08-08) 1192次浏览 已收录 0个评论 扫描二维码
文章目录[隐藏]

简介

以前只是用!今天就来介绍一款由@威言威语 修改的 Auto Highslide 灯箱效果插件吧!这款插件真的是非常的不错呢!

Auto Highslide 原版

Auto Highslide 是国人 @Showfom 制作的 WordPress 图片灯箱插件,直接启用后,不需要任何插件设置,只需要在添加图片的时候,设置链接到原图就可以了。
更多原版详情:http://zou.lu/auto-hishslide-wordpress-plugin/

Auto Highslide 修改版

@威言威语 添加了一些遮罩效果,和操作按钮。铃音殿下吾亲身体验,效果绝佳啊,推荐使用该版本。
修改版详情:http://www.weisay.com/blog/auto-highslide.html

使用方法

解压上传到插件文件夹,后台安装。用的时候在图片上面加个 a 链接标签就行。举例:

<a href="/wp-content/uploads/2014/08/rpgsky.net_2014-08-07_12-08-35.jpg">
<img alt="alt 里面的文字会显示在图片底部" src="/wp-content/uploads/2014/08/rpgsky.net_2014-08-07_12-08-35.jpg" title="Windows8" width="600" />
</a>

注意:原图可以很大,但是要定义 width 的大小,这样图片就会被压缩到页面合适的大小了,点击就能显示大图片。
如果米要是在图片里面定义了 alt 属性,那么当米点击图片显示效果的时候,你就会发现米的 alt 属性里面的文字会显示在图片底部了呢!

自定义遮罩颜色

此修改版插件默认的蒙罩层是白色的,如果米想要换成黑色的话,可以修改下插件里面的 highslide.css 哟,将里面最后的

.highslide-dimming{background:#fff;}

改为

.highslide-dimming{background:#000;}

当然米也可以定义成其他颜色呢,看米自己的喜好喽!

可能出现的问题

安装好插件之后,如果点击图片一直显示“正在加载”,就是不能显示展开效果的话,看看米使用的主题是否加载了 jQuery,此插件是需要 jQuery 支持的。而且该插件会自动在 WordPress 主题的

wp_head() 

钩子输出 js,所以请确保米的主题的 header.php 有

<?php wp_head(); ?>

这行代码。

自动链接到原图的方法

如果米以前发布的图片没有添加链接到原图,或者你不想每次都手动添加链接,那你可以在主题的 header.php 中添加下面的 js 代码:

<script type="text/javascript">
$(function() {
	$('.entry img').each(function(i){
		if (! this.parentNode.href) {
			$(this).wrap("<a href='"+this.src+"' class='highslide-image' onclick='return hs.expand(this);'></a>");
		}
	});
});
</script>

该脚本会检查文章中的图片是否包含了链接,如果没有,就会自动为图片添加链接到原图。这样,即使你以前的文章图片没有链接,那也不用愁了,现在直接就可以用灯箱效果了。
注意:请根据自己的实际,修改第 3 行的 .entry 为你主题内容的 CSS 类。

下载

文件下载

  文件名称:Auto Highslide  文件大小:未知
  下载声明:本站作品均有会员提供,如有侵犯您的版权请联系我们及时处理!
  下载地址:本地下载

转载请注明 - [插件推荐]WordPress 图片灯箱效果插件:Auto Highslide(自动链接到原图) - 幻想天空 - 魔王殿 - 铃音の小屋
喜欢 (0)
[不公开]
分享 (0)
关于作者:
美国服务器正在努力恢复中!目前系统升级完善,功能可以使用!现在来申请免费空间无需填表哟!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址