前言

写文章的时候,经常会插入几张图片,而wordpress自带的相册功能有些满足不了我们对于美观的需求,有不少wordpress插件能实现相册的功能,在此小编推荐一款wordpress图片放大灯箱效果插件:auto-highslide优化版。

软件介绍

这款wordpress相册插件是由威严威语优化而来,直接启用后,,不需要任何插件设置,只需要在添加图片的时候,设置链接到原图就可以了。可以直观的显示下一张、上一张、放大查看、幻灯片放映等模式,而且要比原版的更加美观大方。

使用方法

FTP上传解压或者直接后台安装。用的时候在图片上面加个a 链接标签就行。举例:

<a href="你的图片地址">
<img alt="alt里面的文字会显示在图片底部" src="你的图片地址" title="你的图片标题" width="你的图片宽度" />
</a>

注意:原图可以很大,但是要定义width的大小,这样图片就会被压缩到页面合适的大小了,点击就能显示大图片。

如果你在图片里面定义了alt属性,那么当你点击图片显示效果的时候,你会发现你的alt属性里面的文字会显示在图片底部。

自定义遮罩背景颜色

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

.highslide-dimming{background:#fff;}

改为

.highslide-dimming{background:#000;}

当然你也可以设置成任意你喜欢的颜色。

可能遇到的问题

安装好插件之后,如果点击图片一直显示“正在加载”,就是不能显示展开效果的话,看看你使用的主题是否加载了jQuery,此插件是需要jQuery支持的。而且该插件会自动在WordPress主题的 wp_head() 钩子输出 js,所以请确保你的主题的 header.php 有 这行代码。

自动添加链接到原图的方法

如果你以前发布的文章图片没有添加链接到原图,或者你不想每次都手动添加链接,那你可以在主题的 header.php 或者 footer.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类。

相关下载

点击下载

参与评论