PageTalks » imgDesc http://pagetalks.com Pure Web Development & Design Ideas Thu, 19 Jan 2012 12:06:33 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 slideView and imgDesc Plugins Updated http://pagetalks.com/2009/07/05/slideview-and-imgdesc-plugins-updated.html http://pagetalks.com/2009/07/05/slideview-and-imgdesc-plugins-updated.html#comments Sun, 05 Jul 2009 08:47:00 +0000 Robin http://pagetalks.com/?p=276 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

I Spent a whole day fixing bugs and beautify the UI. They now works much better than the previous versions.

See a demo of slideView at http://pagetalks.com/share/slideView;
A demo of imgDesc is accessible in the original post.

Comments are welcome!

slideview插件的新版本出来了！到这里看更多信息：http://pagetalks.com/2009/03/09/jquery-slideview-plugin.html 以及 http://pagetalks.com/2008/08/29/jquery-imgdesc-plugin.html

我花了一整天时间修补bug以及美化用户界面，这两个插件现在会看起来好很多。

SlideView的演示：http://pagetalks.com/share/slideView
imgDesc的演示在上面的发布链接内
欢迎大家留下意见！

]]> http://pagetalks.com/2009/07/05/slideview-and-imgdesc-plugins-updated.html/feed 2 jQuery imgDesc Plugin http://pagetalks.com/2008/08/29/jquery-imgdesc-plugin.html http://pagetalks.com/2008/08/29/jquery-imgdesc-plugin.html#comments Sat, 30 Aug 2008 03:25:09 +0000 Robin http://pagetalks.com/?p=73

描述

在开发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

下载

Note: There is a file embedded within this post, please visit this post to download the file.
Note: There is a file embedded within this post, please visit this post to download the 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

Note: There is a file embedded within this post, please visit this post to download the file.
Note: There is a file embedded within this post, please visit this post to download the 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
]]> http://pagetalks.com/2008/08/29/jquery-imgdesc-plugin.html/feed 8