10款最佳CSS/jQuery开源图片说明

Web开发者在HTML当中使用图片说明已经有很长的历史了，这涉及到典型的<figure>和<figcaption>图形元素，再附上一些额外的CSS样式。在大的开源项目中我们甚至能找到更多更大的用在构建图片说明上的插件和启动器脚本的案例。

本文收集了关于制作HTML图片说明所要的CSS3和jQuery的解决方案列表，以帮助开发者各取所需，创建更加优美的图片说明代码库。

一、CSS2/CSS3

构建带有CSS效果的个人图片说明会很难，有时候你不得不求助于浏览器hacks或借助一些额外的语法。这些方案是很好的案例，能够提供建立在CSS2属性和CSS3过渡动画基础上的图片说明效果。

1. Label.CSS

Label.CSS是CSS3图片标题库里最好的一个，它允许在被说明的图片上添加类名称，之后可以在HTML里更新。你可以把标题添加到图片上的任何地方。添加Label.CSS库可以让鼠标悬停在图片上时隐藏说明变得轻而易举。这项技术很不错，因为有时候你可能希望图片说明在网页上以静态文本的形式出现，而有的时候隐藏的动画效果更重要的。

2. Hongkiat图片标题

关于Hongkiat，我最喜欢的就是各种图片在使用不同的CSS3技术后显示的图片说明。它们都将被成对的放入一个大的图片标题库，你还可以挑选出你最喜欢的动画来打造一个崭新的界面。代码都已经通过新的浏览器测试并且支持所有的CSS3前缀。

不过最大的问题在于一些用户所使用的脚本不遵循<figure>和<figcaption> HTML结构。所有的标题内容都存放在div的范围内。很明显，标题内容被完美的呈现出来，但不会标记内容的确切类型。它的优点是只需5-10分钟来更新图形元素就能让它在更格式化的结构中工作。点击现场演示来观察这些图片标题的运行过程。

3. 动画的HTML5标题

来自Coalmarch的HTML5 figcaption示例是一个漂亮简单的CSS3图片说明教程。在短短几分钟之内完成几个步骤就可以得到一个炫耀的布局来展示隐藏的悬停字幕。脚本自身含有少量的jQuery，但它完全可以取代jQuery并使用CSS3图片过渡效果。

4. 幻灯片图片标题

CSS-Tricks博客在Web设计社区有很好的名声，他们制作的滑动图像说明教程已经在大量的浏览器上完美无瑕的测试过了。我对它的演示印象深刻，倒不仅仅是因为它的效果完美，还有它标准的HTML语法。<figure>和<figcaption>图形元素不仅仅意味着好的方法，还可以帮助浏览器区分不同页面元素之间的内容，点击现场演示来观察它的效果。

二、jQuery

使用jQuery的最大好处就是获得很高的浏览器支持率。任何使用JavaScript的人都应该像检查浏览器一样查看图片标题，CSS3使用起来更简单因为开发人员没有在其中加入脚本语言。这些方案都很重要，对前端体验有极大地促成作用。

1. Caption.js

不久前发现Caption.js，此库已经出色的为Web开发者提供优秀的来源。该脚本以图片为目标建立在jQuery选择器上并且能够自动加入<figure>和<figcaption>图形元素。这是非常重要的，因为最后页的渲染将会伴随着一些CSS的定位而被适当显示。Caption.js是开源的，可免费从Github下载。

2. Capty

Capty插件和Caption.js的不同之处在于Capty插件的默认设置将会隐藏你的初始文本。当用户将鼠标悬停在图片上的时候，图片会上滑或淡入标题，一旦移开鼠标时候它又会重新隐藏。这非常棒，因为你真的可以选择让这个标题固定或者隐藏，添加无数个插件选项。点击Capty现场演示参观更多的案例，同时提供可以连接到你自己网页的代码片段。

3. jQuery.imageCaption

现在我可以说jQuery.imageCaption是开发者运行CMS引擎的最完美解决方式，这个插件是超级简单为客户定制的，并能快速撤销建立在图像alt文本上的标题。因此这将呈现出<figure>和<figcaption>图形元素，这对SEO大有裨益。

通过调用函数imageCaption()你不需要传输任何参数到调用程序里。这仍将适当地呈现在页面上，还可以将此应用到任何WordPress博文当中。同样任何等级添加到img元素上将转移到现有的<figure>元素上，这意味着你有更多的控制经过CSS。

4. jQuery.caption

jQuery.caption 是另一个带有简单初始的解决方案。jQuery插件里的许多插件都是即插即用类型的，你只需要针对所有有标题的图片启动功能即可。jQuery.caption插件将自动执行<figure>和<figcaption>图形元素，再加上您可自定义的标题文本和HTML元素。该项目的Github页详细地介绍了您可能想要使用的各个选项。

5. Captionate

Captionate是由North Krimsly 开发的一个开源项目，目的是为了在各种CMS引擎中使用。你可以找到在你自己的网站中执行Captionate程序的教程指南。

基本上编写HTML5 img元素与类.caption将会被jQuery 脚本接收到，然后alt属性文本被转入figcaption元素，并写入HTML。浏览示例页面你可以看到Captionate的语法和其他解决方案相比起来是相当简约的。

6. HCaptions

这个jQuery插件是为处理所有的标题内容而开发的，它可以转换为HTML代码。点击现场演示页，你将看到一个美妙的样本收藏。同样，各个选项允许你控制每个标题的速度和定位。有一些更好的解决方案仅用于管理HTML图像，但HCaptions插件的确提供一个很棒的用途，专门为其他标准网页元素添加标题。

结尾

你也许会惊讶这些脚本原来是可以如此智能。当你使用有效的HTML5代码时，它就为谷歌提供了一个很好的机会——进入你的页面检索相关内容。