FullSize：一个新的IMG标签属性（附带jQuery实现）

“img标签添加了一个新属性么？”，看到标题你也许会惊奇的问。呵呵，千万莫误会，这只是一位国外Web设计师的主张而已。为了推销他的想法，他建立了这个主题网站（你可以在这个页面的下方签名，表示支持），而且用Jquery插件模拟了它。他的这个想法真的很有意思，也很有意义。我这里对它的想法做个简单翻译，略表支持。

FullSize属性是什么？

我们在网页设计中，经常会使用这样一种解决方案：当点击页面中的某否图片时，使用Javascript/Ajax技术用弹出层等方式获取这张图片的原始图片（或大尺寸图片）。我们可以注意到，这在当前的网页设计中，尤其是图片展示站点的设计中被广泛应用。既然这样，为什么这项功能不能成为一个标准，为什么不是由浏览器实现而是让设计师费尽心思去设计。所以我建议能够在img标签中添加一个fullsize属性，可以用来指定”src”中图片的大尺寸图片，浏览器可以原生支持点击图片时弹出大尺寸的图片。

我希望这样一个提议能够得到W3C组织的关注，在下一个html版本中的img标签中添加fullsize属性，从而使他成为一个标准。我认为这绝不仅是一个貌似好听的主意，它将对Web设计师有很大的帮助。如果你有什么好的想法或更好的建议，可以在Fullsize Google Group中讨论。

关于Fullsize属性设想的一些问答

-为什么要添加Fullsize属性，而不是用javascript实现？

Fullsize属性是希望这样一个常用功能能够轻松实现。当我们想实现这个功能时，仅仅是记住在img标签中加入fullsize属性就可以了。当然，如果你不愿意使用fullsize属性，你也可以自己用javascript实现。

-如果Javascript被禁用，fullsize属性会不会失效？

我的建议是fullsize属性可以得到浏览器的原生支持，所以它与javascript是否禁用是不相干的。

-我不需要浏览器加入这样的功能，因为我对图片的弹出样式无法控制？

如果fullsize属性可以加入到下个版本的html中，它也应当能得到css的支持。如果你不喜欢浏览器这样去实现你也可以自己使用javascript实现。虽然能够得到css的支持会更好些，但我认为它并不是十分必要。

模拟这一想法的jQuery插件

尽管这一想法目前还不能通过html实现，不过我创建了一个jquery插件可以实现它。因为目前img标签中没有fullsize属性，我使用longdesc（不知道img中的longdesc属性？了解一下）来代替它。longdesc是img标签的合法属性，它原本是用来指向一个图片详细描述的url。这款Jquery插件非常容易就可以上手的，而且它在Safari,Firefox,Chrome,IE8,IE7,IE6中都测试通过。

下载这款插件：Fullsize Jquery Plugin [大小：23.59 KB – 下载次数：125]

它的压缩版本仅有8kb！注释版本是12kb。如何使用它：

1.   下载插件后，引用插件包中的js和css文件（当然，在这之前你要引用jquery代码文件），如下：

   
    
    <
    link 
    href
    ="your_path_here/fullsize/fullsize.css"
     media
    ="screen"
     rel
    ="stylesheet"
     type
    ="text/css"
     
    />
    

    <
    script 
    type
    ="text/javascript"
     src
    ="your_path_here/fullsize/jquery.fullsize.js"
    ></
    script
    >
   

2.   为页面中所有img标签绑定fullsize功能：

   
    
    $("img").fullsize();
   

3.   在html的img标签中指定longdesc属性，例如：

   
    
    <
    img 
    src
    ="me.jpg"
     alt
    ="me"
     longdesc
    ="me-big.jpg"
     
    />
   

这款插件同时可以设定一些参数，例如弹出图片是否有阴影，图片弹出速度等等，详细内容可以在作者网站找到

我这里做了一个例子，可以直观的看一下它的效果。

例子的源代码下载：Fullsize Plugin Example