首页 » 建站技术 » WordPress » 浏览内容

WordPress取消裁剪图片用JS自动放缩


2013-08-18 20:55:12 2,578 0 发表评论 字体: 作者:C.K.

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

用Wordpress上传图片的时候有一个很烦恼的事情,就是会自动裁剪图纸成不同的尺寸让后保存到uploads中,本人在网上搜索并摸索了好久好多代码都不可用,现在介绍个可用用的。
首先取消Wordpress自动裁剪图片的功能,
就是在设置->媒体中把裁剪尺寸全部更改为0如下图.

2013-08-17_20-45-40

下面就要看你的主题中有没有.js文件如果有,直接把下面的代码复制到您主题的js文件中即可。

/*自动放缩图片js*/
  • $(document).ready(function(){
  • $(‘div’).autoResize({height:750});
  • });
  • jQuery.fn.autoResize = function(options)
  • {
  • var opts = {
  • ‘width’ : 700,
  • ‘height’: 750
  • }
  • var opt = $.extend(true, {},opts,options || {});
  • width = opt.width;
  • height = opt.height;
  • $(‘img’,this).each(function(){
  • var image = new Image();
  • image.src = $(this).attr(‘src’);   if(image.width > 0 && image.height > 0 ){
  • var image_rate = 1;
  • if( (width / image.width) < (height / image.height)){
  • image_rate = width / image.width ;
  • }else{
  • image_rate = height / image.height ;
  • }
  • if ( image_rate <= 1){
  • $(this).width(image.width * image_rate);
  • $(this).height(image.height * image_rate);
  • }
  • }
  • });
  • }
  • 如果主题没有js文件就需要自己创建js文件,如atuo_size_img.js,在把此文件放在主题目录下面即可。

    然后在主题的header.php文件合适位置添加如下代码,为了是使上面的JS代码能够在主题中加载。

    <script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/atuo_size_img.js”></script>

      网站统计 Statistics

      • 创建时间: 2005年1月3日 距今4941 天
      • 日志总数: 2461
      • 评论总数: 630
      • 标签总数: 654
      • 链接总数: 273
      • 最后更新: 2017-7-1 18:16:33
      • 您是本站第 13702633 位访客

      广告区 Guǎng Gào