描述
在开发PageTalks的时候顺便写了一个给图片加注释说明的插件。当然由于PageTalks的整个脚本都是基于jQuery的，所以这个插件也就是基于jQuery的了。先看一个演示吧：
需求
- jQuery 脚本库, 你需要自行到jQuery的官方站点下载该文件
- imgDesc的脚本文件（废话……）
- 一点点JS和XHMTL的动手能力
功能
该插件能够将IMG标签的Title属性自动当作图片说明,并放置到底部显示。如果IMG外面没有A标签，这个插件会将IMG包装成链接，并转移标签属性。插件目前支持如下选项，均为可选参数：
- autohide 是否自动隐藏底部注释，如果选择”yes”则会隐藏注释，鼠标掠过时会渐现出来。默认是“yes”
- text 自定义注释文本，默认状态是IMG标签的Title属性值
Description
This plugin is written with the develpment of PageTalks, accidently. As PageTalks is based on jQuery Libary, jQuery code is required. Let’s start with a demostration:
Requirements
- jQuery Libary, just downlaod fromjQuery Offical Site
- imgDesc script file（oops……）
- a little knowledge on xhtml and js
Features
This plugin will automatically take title attribute in IMG tag as the description of the image. If IMG is not wrapped by a Anchor tag, the plugin will wrap it with one. This plugin currently support two parameters, all of which are optional.
- autohide if the plugin should automatically hide the description and show it when mouseover. Default “yes”
- text Customize the value of description. Default value is the title attribut of IMG tag
下载
imgDesc.1.1.5.rar (1.7 KiB, 6 hits)
You need to be a registered user to download this file.
imgDesc.rar (1.6 KiB, 34 hits)
You need to be a registered user to download this file.
用法
- 加载jQuery脚本库
- 你可以直接在<head>标签内部加入如下语句：
<script type="text/javascript" src="jquery..js"></script>
- 加载imgDesc插件
- <script type=”text/javascript” src=”jquery.imgdesc.js”></script>
- 指定对象
- 根据jQuery语法进行应用,应用默认样式：
$("img").imgDesc();进行自定义样：
$("img").imgDesc({autohide: "no"});在1.0.5中可用的新参数
- autohide (boolean)
- 提示文本是否自动隐藏，默认是 true
- source (String)
- 提示文本的来源，要求填写IMG标签的属性名，”title”或是”alt”，默认是title
- minHeight (Integer) , minWidth (Integer)
- 插件会根据图片大小判断是否对其进行处理，如果图片尺寸小于有这两个值规定的尺寸，插件就不会生效，默认是 100,100
- 禁用imgDesc效果
- 你可以使用imgDescDel()方法:
jQuery("img").imgDescDel();或者，在IMG标签里面加入”rel=’noDesc’”
<img src="sample.png" rel="noDesc" alt="" />
更新历史
可以到 jQuery Plugin 去获取详细的版本信息。
- 1.0.5参数有较大改动；修不了一些bug
- 1.0.4 添加了一个额外方法imgDescDel()来删除imgDesc的效果；你可以添加”rel=noDesc”到IMG标签，以此来禁用这个图片的imgDesc效果
- 1.0.2 修正了IE6下的一些问题
- 1.0.0 初版发布!
Download
imgDesc.1.1.5.rar (1.7 KiB, 6 hits)
You need to be a registered user to download this file.
imgDesc.rar (1.6 KiB, 34 hits)
You need to be a registered user to download this file.
Usage
- Load jQuery Libary
- You can directly add the following code in <head> tag：
<script type="text/javascript" src="jquery..js"></script>
- Load imgDesc Plugin
- <script type=”text/javascript” src=”jquery.imgdesc.js”></script>
- Assing the target object
- follow the jQuery code style：
$("img").imgDesc();You can, of course , apply some change, customizing the way it show up and the value of description：
$("img").imgDesc({autohide: "no"});Parameters Available in 1.0.5
- autohide (boolean)
- if the description will hide as the mouse move out of the image; default is ture
- source (String)
- where the description comes from, only two options availiable: “title” and “alt”; default is “title”
- minHeight (Integer) , minWidth (Integer)
- the minimum height and width of the picture; if the height of a picture is smaller than this size, the plugin shall have no effect on it; default is 100 and 100
- Disable imgDesc
- You can use imgDescDel() method
jQuery("img").imgDescDel();or you can add “rel=’noDesc’” to target IMG Tags
<img src="sample.png" rel="noDesc" alt="" />
Change Log
You can always refer to jQuery Plugin to trace the builds.
- 1.0.5Changes in parameters; fix some bugs
- 1.0.4 Extra method – imgDescDel() to disalbe imgDesc on some images; you can add “rel=noDesc” to IMG Tag to disable imgDesc on that image.
- 1.0.2 Fix a lot of problems in IE6
- 1.0.0 First Edition
7 Comments
注册被你关掉了，我该如何下载这个插件呢？
Sorry……后台设置错误……现在应该OK了！
我是马甲，我来测试！
效果不错的说~
什么风把你吹来了……
从你的 blog 上吹过来的啊……
不过有一点觉得有点别扭啊，就是鼠标移到图片上的时候那个描述层能出现，但鼠标移到描述层的时候却消失了……
嗯……算是“算法”上的不足吧，我是在IMG标签上面注册的hover事件，而不是注释的Span标签。还很作Fix的……
One Trackback
[...] slideView and imgDesc Plugins Updated Robin jQuery Comments (0) Views(8) 2009 Jul 5 A new version of slideView plugin and imgDesc plugin are avaliable now! See more detail in http://pagetalks.com/2009/03/09/jquery-slideview-plugin.html and http://pagetalks.com/2008/08/29/jquery-imgdesc-plugin.html [...]