我爱水煮鱼» 图像

jQuery 图片放大镜效果插件：jQZoom

Denis — Sun, 18 Jul 2010 17:56:11 +0000

在一些产品演示网站，常常需要这样的效果，把鼠标移到小图的上面，旁边出现这这部分的放大效果，通过这种方式让用户能够详细了解产品的细节。

jQZoom 就是这样的一个 jQuery 插件，它能够让你网站的图片实现放大镜效果，把鼠标移到小图上，旁边出现大图的局部放大的部分，如下演示：

jQZoom 演示

RSS 用户需要返回页面才能看到效果。

jQZoom 使用说明

下面介绍下简单使用：

1. 在你的页面中包含 jqzoom.css

<link rel="stylesheet" href="your_path/jqzoom.css" type="text/css" media="screen">

2. 包含 jQzoom 和 jQuery JS 代码：

<script type="text/javascript" src="your_path/jquery.js">script>
<script type="text/javascript" src="your_path/jquery.jqzoom.js">script>

3. 现在创建一个放图片的容器（最好是 DIV），并给 class 赋值为 jqzoom，然后给每张图片设置一个 jqimg 属性，它的值为大图的地址。

<div class="jqzoom"><img src="images/shoe4_small.jpg" alt="shoe" jqimg="images/shoe4_big.jpg">div>

4. 当页面导入的时候，载入 jQZoom 插件。

$(document).ready(function(){ $(".jqzoom").jqueryzoom(); });

好了基本设置好了，当然你也可以自己做些简单的设置：

$(document).ready(function(){
    $(".jqzoom").jqueryzoom({
        xzoom: 300, //设置放大 DIV 长度（默认为 200）
        yzoom: 300, //设置放大 DIV 高度（默认为 200）
        offset: 10, //设置放大 DIV 偏移（默认为 10）
        position: "right", //设置放大 DIV 的位置（默认为右边）
         preload:1,
        lens:1
    });
});

下载：jQZoom。
演示：jQuery 图片放大镜效果插件：jQZoom

>>>继续阅读全文 ...

延迟加载图片的 jQuery 插件：Lazy Load

Denis — Wed, 07 Jul 2010 08:26:04 +0000

网站的速度非常重要，现在有很多网站优化的工具，如 Google 的 Page Speed，Yahoo 的 YSlow，对于网页图片，Yahoo 还提供 Smush.it 这个工具对图片进行批量压缩，但是对于图片非常多的网站，载入网页还是需要比较长的时间，这个时候我们可以使用 Lazy Load 这个 jQuery 插件来延迟加载图片。

Lazy loader 是一个延迟加载图片的 jQuery 插件，在一些图片非常多的网站中非常有用，在在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它们所在的位置才加载，这样对于含有很多图片的比较长的网页来说，可以加载的更快，并且还能节省服务器带宽。

Lazy Loader 使用也非常简单，首先确保你的页面已经加载 jQuery Javascript 库，然后在加载 Lazy Load 的 Javascript 文件：

然后在页面的 header 添加如下代码即可：


$(document).ready(function(){
    $("img").lazyload({
        placeholder : "/images/grey.gif",
        effect : "fadeIn"
    });
}

当然 Lazy Load 也有更多复杂的设置，你可以参考 Lazy Load 原文介绍或者 mg12 的翻译。

我爱水煮鱼已经增加了这个功能，你可以在一些图片较多的日志页面预览下。

>>>继续阅读全文 ...

使用 Smush.it 在线无损压缩网页图片

Denis — Mon, 14 Dec 2009 04:20:04 +0000

网页图片优化是网页加速中非常重要的一步，对图片进行压缩，不仅能够节约带宽，并且加快网页的速度。我们常用的图片编辑软件都可以在压缩图片。而使用 Smush.it 则可以大幅压缩图片，并且它还是一个无损的压缩工具。

Smush.it 介绍

Smush.it 是 YUI 团队制作的一款基于 YUI 的在线图片优化工具。

它是基于以上四条图片优化建议制作的服务：

移除 JPEG 中的 meta 数据。
优化 JPEG 的压缩率。
转化特定 GIF 图片到可索引的 PNG 格式图片。
从可索引的图片中移除没用到颜色信息。

所以使用 Smush.it 压缩图片可以删除图片中多余的字节而不改变图片的视觉效果和质量。

Smush.it 使用

Smush.it 比较简单，登录 Smush.it 的网站，直接把你压缩的图片贴到输入框中，点击 Smush 就可以进行图片压缩，然后 Smuch.it 就会提供一个优化报表，显示图片压缩比率和节省了多少字节，并且提供一个可下载包含压缩后的图片文件的压缩包。

如果你是 YSlow 的用户，那么 Smush.it 已经包含在了 YSlow 里面，你可以直接在 YSlow 里面使用 Smush.it 来压缩你网站或博客的图片。

Smush.it 的 WordPress 插件

任何开放的好用的服务，就会有 WordPress 插件，Smush.it 也不例外，Smush.it 也有 WordPress 插件，使用 Smuch.it 的 WordPress 插件可以在 WordPress 后台直接优化图片，无需再次上传和下载，使用上非常方便。

安装好 Smuch.it 的 WordPress 插件之后，在 WordPress 后台 > 媒体库，就会多了一列叫做，Smush.it，它显示当前图片是否被压缩和压缩比，以及压缩按钮。如下图所示：

Smuch.it 的 WordPress 插件

下载：Smuch.it 的 WordPress 插件。

>>>继续阅读全文 ...

Category Image 2.0

Denis — Fri, 07 Aug 2009 09:21:32 +0000

把 Category Image 这个插件更新一下，使他适应 WordPress 2.3，同时也对 2.3 以下版本不在支持！所以如果你 WordPress 在 2.3 以前，请使用以前的版本。

适应2.3版本的下载地址：category-image-2.0.zip

对这个插件，还有新的开发计划，主要有以下几点：

后台管理界面
添加自动图片，而不用 FTP 上传
控制在什么页面出现

你有什么建议请给我留言！

把 WordPress 表情秀这个插件也更新了一下，只是修正一点错误，对这个插件未来的开发的计划可能只是添加一个后台管理界面。

新版本下载地址：wordpress-emotions-show-1.3.zip

还有一些新的插件的开发计划，但是这些都在我们中文团队的讨论之中，日后加分晓！

>>>继续阅读全文 ...

Advanced Post Image Plugin

Denis — Sun, 31 May 2009 19:40:12 +0000

English

Advanced Post Images plugin can generate thumbnails of the first image of latest (number is set by user) posts and link back to the them.

Installation and Usage

Upload the advanced-post-image.php to to the /wp-content/plugins/ directory
Activate the plugin through the ‘Plugins’ menu in WordPress
Place in your templates
create the folder thumb under the directory wp-content/uploads/, and set it to 777

If you want to control the number, the thumb image’s width and height, you can use the following four parameters in the function

$image_number = 10 // the image number, default is 10
$thumb_width = 50 // the thumb image's width, default is 50px
$thumb_height = 50 // the thumb image's height, default is 50px
$type = "recent" // the list's type,  "recent" displays latest posts's image while "random" display random posts's image

You can use the ul.post-image-list CSS selector to stlye the images list.

Download: Advanced Post Image Plugin

Demo:

You can donate via payapl to support the plugin’s development,

中文

这是该插件的初始版本，Advanced Post Image 插件会生成最新日志（数字由用户设定）的第一张图片的缩略图，然后产生一个链回原来日志的列表。
安装和使用

上传 advanced-post-image.php 到 /wp-content/plugins/ 目录下
在插件菜单下激活插件
在模板文件中适当的位置插入模板函数
在 wp-content/uploads/ 目录下创建 thumb 文件夹并将其设置为 777

你可以使用函数的以下四个参数：

$image_number = 10 // 设置显示图片个数，默认为10 张
$thumb_width = 50 // 设置所略图的宽度，默认为 50 像素，如果为 0，则会根据高度自动修改，但是宽度和高度至少填一个
$thumb_height = 50 // 设置所略图的高度，默认为 50 像素，如果为 0，则会根据宽度自动修改，但是宽度和高度至少填一个
$type = "recent" // 设置列表的类型，"recent" 显示最近日志的图片， "random" 则显示随机日志的图片

你可以根据 ul.post-image-list 这个 CSS selector 去样式化图片列表

下载：Advanced Post Image Plugin

演示：

>>>继续阅读全文 ...

WordPress 插件推荐：论坛签名图自动生成插件

Denis — Sun, 15 Mar 2009 05:03:33 +0000

论坛签名图自动生成插件能够生成一个论坛签名图片，在该图片上自动显示你的 WordPress 博客上的最新文章。这样我们就可以在论坛上更加吸引大家的眼球，通过论坛签名吸引更多的人来看自己的博客。

安装和使用

下载该插件 1.0版
解压缩后上传传到你博客的 /wp-content/plugins/ 目录下
将 /wp-content/plugins/ 目录下的 titletopng 目录权限设为777 （即让该目录可写，WINDOWS 服务器请忽略该步）
在后台插件管理处选择开启”图片签名插件”
在后台设置处选择 title2png 进行设置
该插件目录下的 title.png 即为生成后的图片文件，在论坛签名中请用如下代码 [img]http://www.px234.cn/wp-content/plugins/titletopng/title.png[/img] 则可自动显示你的 WordPress 博客的最新文章。

演示

论坛签名图自动生成插件

常见问题

如何修改背景图片
请用你的 PNG 格式的图片替换掉插件目录下的 pic.png 文件
如何修改字体?
用你的字体文件替换掉本插件目录中的 msyh.ttf 文件即可
如何修改字体颜色？
在后台设置中有 3 组数字供大家设置颜色。
怎么生成不了图片？
请检查你的插件目录权限，若没开启写权限的话，则图片无法生成

下载及该插件发布页面：论坛签名图自动生成插件。

>>>继续阅读全文 ...

Super Image Plugin 1.5

Denis — Tue, 22 Jul 2008 14:20:21 +0000

好友 askie 把 Super Image Plugin 更新到 1.5 版本，现在不需要修改代码即可完成对本地图片和远程图片保存和打水印的动作，并还增加了如下功能：

增加文章内容中存在的图片打水印时间起点，可以自由设置时间
可以下载文章内容中链接中的图片到本地，并打水印
改变了安装方式，不需要修改wp代码即可完成本地图片打水印功能

所以现在该插件有如下功能：

本插件能够实现 WordPress 上传图片自动增加水印
可以添加图片水印和文字水印两种类型
可以对已经存在的图片进行批处理添加水印
可以对文章内容中的外部引用图片自动下载并添加水印
本插件具有图片备份功能，即在图片添加前对图片进行备份，可以随时恢复到没有添加水印前的状态
添加了具有在线管理图片的功能，能够批量删除已经存在的图片
文字水印和图片水印可以进行位置精确操作
可以设置水印的随机位置
可以根据图片大小设置判断是否给图片添加水印

详细配置页面请点击查看此图。

>>>继续阅读全文 ...

Super Image Plugin

Denis — Mon, 07 Jul 2008 13:54:38 +0000

介绍

本插件能够实现 WordPress 上传图片自动增加水印
可以添加图片水印和文字水印两种类型
可以对已经存在的图片进行批处理添加水印
可以对文章内容中的外部引用图片自动下载并添加水印

另外：

本插件具有图片备份功能，即在图片添加前对图片进行备份，可以随时恢复到没有添加水印前的状态
添加了具有在线管理图片的功能，能够批量删除已经存在的图片
文字水印和图片水印可以进行位置精确操作
可以根据图片大小设置判断是否给图片添加水印

简单安装

注解：本安装只能实现博客内容中包括的图片添加水印，即只有博客内容中的标签引用的图片才会被添加水印，如果你上传了图片但是博客中使用了缩略图，那么只有缩略图添加水印！

下载zip文件，解压后把文件夹放入 wp-content/plugins 目录，然后在 Plugins 页面激活该插件。
在 Setting->Super Image Plugin -> ContentImageDown 菜单下的两个设置均设置为 Yes。

高级安装

注解：按照本方法安装能够实现上传图片源文件和缩略图均添加水印。

首先按照简单安装，第一步操作完毕然后进行如下操作：

打开/wordpress/wp-admin/includes/media.php查找（大约第108行）

 // Save the data
$id = wp_insert_attachment($attachment, $file, $post_parent);

在这段代码上面添加如下代码：

// INSERT HERE!!!
if (function_exists("IM_mark"))
{
IM_mark($file,$op="overwrite");
}

如果你要在你上传的图片缩略图和中型图片添加水印请进行如下操作，要求版本Wordpress v2.5.1，打开/wordpress/wp-includes/media.php查找如下代码（大约第230行）

imagedestroy( $newimage );

在这段代码上面添加如下代码：

// INSERT HERE!!!
if (function_exists("IM_mark"))
{
IM_mark($destfilename,$op="overwrite");
}

注意

安装完毕后替换mark.png为你自己的水印图片
fonts目录中的字体你可以自己替换，使用windows的ttf字体都可以
如果你使用文字水印而且使用中文，请选择字体chinese.ttf ，否会出现乱码

插件作者：askie
插件下载：Super Image Plugin

>>>继续阅读全文 ...

Image super tools

Denis — Wed, 11 Jun 2008 15:05:11 +0000

Image super tools 是一个 WordPress 图片水印和远程图片下载插件。它的主要功能有：

本插件能够实现wordpress上传图片自动增加水印
可以添加图片水印和文字水印两种类型
可以对已经存在的图片进行批处理添加水印
可以对文章内容中的外部引用图片自动下载并添加水印

简单安装使用：

下载 zip 文件，解压后把 imagesupertools 文件夹放入 wp-content/plugins 目录，然后在 Plugins 页面激活该插件。
在setting->ImageSuperTools->ContentImageDown菜单下的两个设置均设置为Yes。

更详细的是用请看 Askie 的文章：wordpress图片水印+远程图片下载插件image super tools

>>>继续阅读全文 ...

Advanced Post Image Plugin 0.2

Denis — Thu, 28 Feb 2008 11:54:59 +0000

好早之前就想把大家提出的修改意见加到该插件中，但是一直没有时间（其实是太懒）。今天把女儿的博客更新下，于是就把该插件也更新了一下，主要的修改有：

重新写了 get_post_image_list 这个函数，采用正则表达式，能够更快获取日志中的图片地址。

给函数 get_post_image_list 添加了四个参数以便方便使用：

$image_number = 10 // 设置显示图片个数，默认为10 张
$thumb_width = 50 // 设置所略图的宽度，默认为 50 像素，如果为 0，则会根据高度自动修改，但是宽度和高度至少填一个
$thumb_height = 50 // 设置所略图的高度，默认为 50 像素，如果为 0，则会根据宽度自动修改，但是宽度和高度至少填一个
$type = "recent" // 设置列表的类型，"recent" 显示最近日志的图片， "random" 则显示随机日志的图片

目前效果如下：

目前还是只支持 JPG,GIF,PNG 三种类型的图片，并且你可以根据 ul.post-image-list 这个 CSS selector 去样式化图片列表。其他功能，等有空的时候再说吧！目前我自己够用了，你有什么需求请给我留言！

下载请移步到：Advanced Post Image Plugin

>>>继续阅读全文 ...

WP SEO 技巧：图像命名

Denis — Sat, 15 Dec 2007 18:22:42 +0000

WordPress 生来就是一个很强的 SEO（search engine optimization）平台，这能够对 Google，Yahoo! 和 MSN 这些大型的工业搜索引擎非常有帮助。作为社区化生活的一部分，人们时常使用搜索引擎去搜索东西，最后他们可能到了一些 blog，可能就有您的。

但是，作为 Google 用户的我，我不仅仅使用网页搜索，同样也使用 Google 的图像搜索去查找自己想找的相关东西。这里就是我想说名字有意义的地方。

当我在 blog 上写篇文章的时候，我通常在文章的某个的地方会插入一张图片，我一般在每两三篇文章中至少插入一张图片。

由于我对 Google 比较熟悉，我将在所有的例子中使用 Google。Google 不仅是一家拥有九千多员工的公司，而在 Google 真正的能力是它背后的二十多万台服务器簇在一起。而这些服务器簇就像它所说的那样，aka 机器人。机器人没有像人们一样拥有能够阅读文字的研究，但是它们能够理解文字非常的清楚。

为什么图片命名很重要？ 因为 Google 爬虫只能看到你所写的，所以命名很重要，如果 Google 爬虫看一张关于红色鸟图片被命名为412414124124.jpg，这并不是非常好的提示去归类它，可能当人们在 Google 图像搜索‘4124′，这张图片被搜索到，或者完全被忽略。但是如果你将它命名为 red_bird_westcoast.jpg，Google 爬虫将会自动知道这是一张关于在西海岸的红色鸟的图片

不错，但是我依然不是很明白，为什么要命名图像如它们本身是什么？ 命名图像如它们本身是什么是非常好的，那样的话，Google Yahoo! MSN 等所有搜索引擎的爬虫机器人知道这张图片实际上是什么，这张图片就能得到正确的索引，搜索引擎就能因此引导访问者到你的站点。

现在，Google 能够给我带来大概一半的流量，并且 Google 图片搜索在搜索引擎提供的流量中占第二。这就是我为什么以这种方式命名图片。如果这是一篇关于 Google 地图如何显示评论，那么我将会把图片像下面方式命名 reviews_in_google_maps.jpg，搜索引擎将会知道这实际是一张什么样的图片

这篇文章翻译自 Weblog Tools Collection 的 WP SEO Tips: Names Have Meaning。
原文的作者 Jonathan 是这两个网站 Ginside.com 和 Fireside Media 的创始人，如果你对关于 SEO 有什么建议，您可以给原文作者或者给我提出你宝贵的意见。

>>>继续阅读全文 ...

Plugin：Category Image

Denis — Mon, 08 Oct 2007 05:46:06 +0000

把给自己的博客上的每个分类指定一张图片，然后在每篇日志内容的左上角或者右上角显示这篇日志所在分类的图片对应的图片。本想这么简单的插件应该网上到处都是，但是找来的好像不是太庞大，要不就是功能和自己要求的有些不一致。于是想想这个插件功能不是很难，就是自己写了，于是花了一天的时间做了如下这个插件。

介绍：

Category Image 这个插件就是在你的博客的每篇日志内容的左上角或者右上角显示这篇日志所在分类的图片对应的图片。没有任何其他作用，哈哈！

下载地址：category-image-1.0.zip（适应2.2及以前版本）
适应2.3版本：category-image-2.0.zip

安装和使用：

解压缩
在你的 WordPress 博客的 wp-content 目录下创建 category-images 文件夹。
把文件 category-image.php 上传到你插件目录下，激活即可。
制作你每个分类的图片，文件名格式为 category-xxx.gif，其中xxx为分类的id，上传到你刚才创建的 category-images 文件夹中。

默认情况下，如果没有创建某个分类的图片，那么是不显示该分类图片的。就这么多，如果你有什么问题，请给我留言！

>>>继续阅读全文 ...

WordPress 图片管理插件：IImage Browser

Denis — Thu, 13 Sep 2007 04:55:46 +0000

你是如何往你的文章中插入图片，IImage Browser 就是一个这方面的插件。具体的介绍看下面的译文：Weblog Tools Collection 的 APAD: IImage Browser

名称：
IImage Browser

插件页面：
http://fredfred.net/skriker/index.php/iimage-browser

特征：

创建和浏览目录
上传图片和创建缩略图
删除文件
生产插入图片到文章的代码

评论：

我已经使用过这个插件很久了，是从1.5版本开始。甚至当 WordPress 2.0 和 2.1 引入了新的图片上传功能之后，我还是继续使用这个插件。

在我看来，这个插件的安装过程有点麻烦，在使这个插件能够运行之前，你需要上传一个 PHP 文件到插件文件夹，另外一个 PHP 文件到 wp-admin 目录。

这个插件在 quitcktags 工具栏（当然也是 WordPress 2.1 的所见即所得编辑器的代码模式下的工具栏。）增加一个按钮。
点击这个按钮会启动一个图片浏览器，这个图片浏览器能够帮你上传图片，创建目录，创建缩略图，生成代码或者删除图片。

IImage Browser 给我相当多的组织图片的控制。我喜欢按类别分类图片，而不是默认 WP 提供的按照日期来分类。

一个额外使 IImage Browser 有用的特征是它能分别给图片和他的缩略图指定自定义代码。我已经使用这个特性，并结合 Open Picture Window 插件，在单击缩略图的时候显示全景图片。

重复声明下，这只是个人经验关于我如何在网站显示图片，但是我愿意听到你想法。

你在使用这个插件？你现在有了什么经验呢？
如果不是这个插件，你又是用什么往你的文章里面增加图片呢？

>>>继续阅读全文 ...

我爱水煮鱼» 图像

jQuery 图片放大镜效果插件：jQZoom

jQZoom 演示

jQZoom 使用说明

延迟加载图片的 jQuery 插件：Lazy Load

使用 Smush.it 在线无损压缩网页图片

Smush.it 介绍

Smush.it 使用

Smush.it 的 WordPress 插件

相关日志

Category Image 2.0

相关日志

Advanced Post Image Plugin

English

中文

相关日志

WordPress 插件推荐：论坛签名图自动生成插件

安装和使用

演示

常见问题

相关日志

Super Image Plugin 1.5

相关日志

Super Image Plugin

介绍

简单安装

高级安装

注意

Image super tools

相关日志

Advanced Post Image Plugin 0.2

相关日志

WP SEO 技巧：图像命名

相关日志

Plugin：Category Image

介绍：

安装和使用：

相关日志

WordPress 图片管理插件：IImage Browser

相关日志