当前位置:网站首页 / 建站知识 / 网站制作知识

WordPress文章内图片添加点击放大的灯箱效果

来源:未知时间:2014-07-24 07:19点击:

有时更新的文章可能会插入一些附带图片,但为了适应页面布局及方便阅读,插入的图片都有一定的宽高度限制。所以如何解决好文章内图片浏览的问题,也是一种增加用户体验感的方式。在此济南网站建设讲下如何为WordPress文章内图片添加点击放大的灯箱效果。无论是以前的网站还是新站点,都适用于此方式。

第一步:安装、启用Auto Highslide插件。将下载的Auto Highslide插件解压好,用FTP上传至服务器的web/wp-content/plugins/目录文件夹下。上传后,在WordPress后台启用。

WordPress灯箱效果设置

第二步:设置图片自动添加原图的链接对于站点以前发布的图片,主题默认不添加链接到原图,所以需要添加一段代码,让程序自己为图片添加链接。用Dreamweaver打开主题文件夹下的 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>

添加的效果如图所示:

WordPress灯箱效果源码

第三步:讲修改好的header.php覆盖上传即可。给济南做网站的朋友可能发现了,济南网站建设近来更新的文章,像为wordpress添加网站加载进度条、workpress更换域名的处理流程、wordpress更换新域名后跳转老域名的处理、wordpress换新域名后,修改自定义栏目thumb缩略图的处理、用简洁代码,三步处理好WordPress后台加载慢的问题,解决思路都是以“三步走”为主。方便那些WordPress初学的朋友更好的使用好WordPress博客。