欢迎光临DaLoong’Blog
分享|软件|工具|教程|干货|交流

WordPress文章中图片设置点击放大

前言

由于看文章的时候发现图片太小,看不清。我在想,要是图片可以点击放大就好了


所以给本站添加了图片点击放大的功能

首先安装一个wordpress图片放大插件

auto-highslide

不知道什么原因该插件用WordPress下架了

文末会提供下载

安装启用完成后需要配置主题目录下的 header.php文件,在</head>之前加上下面的代码:

<!-- 自链图片+点击图片放大-ZZLZ.NET -->
<script src="https://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">  
$(function() {  
    $('.article-content img').each(function(i){  
        if (! this.parentNode.href) {  
            $(this).wrap("<a href='"+this.src+"' class='highslide-image' onclick='return hs.expand(this);'></a>");  
        }  
    });  
});  
</script> 
<script type="text/javascript">
jQuery(document).ready(function($){
 
$('.entry-content img,.entry-featured 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网站如果有用到相册灯箱等功能都需要图片自链

如果你之前有用过图片自链,请自行去除掉图片自链的代码

<script src="https://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">  
$(function() {  
    $('.article-content 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媒体文件被限制大小了

要关闭图片自动缩放功能其实很简单

  • 进入 控制板
  • 进入 设置 ——> 媒体 页面
  • 在 图片尺寸 下面清除不需要的尺寸设置(将其宽、高设置为 0),当然也可选择性地保留一些自动缩放的尺寸(见下图)
  • 保存更改

DaLoong下载面板

恭喜,此资源为免费资源,请先
注意:本站资源部分为网络收集,如涉及版权问题请及时与站长联系,我们会在第一时间内与您协商解决。如非特殊说明,本站所有资源解压密码均为:www.daloong.top。
赞(1) 讨口
如文章已失效请评论或联系管理员维护。文章来自互联网如有侵权请和管理员联系删除。未经允许不得转载:DaLoong博客 » WordPress文章中图片设置点击放大
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏