CaptionerJs是一款简单实用的jQuery图片标题动画效果插件。网上有许多图片标题插件,但是CaptionerJs可以为你创建干净整洁并且带有语义的图片标题HTML代码。CaptionerJs不使用div
作为图片层,而是使用figure
和figcaption
元素来转换图片,使图片和图片标题有明确的语义。
你可以在书写图片代码的时候使用标准的HTML图片代码,CaptionerJs会使用title
和alt
属性来制作图片的标题。
使用方法
使用这个图片标题插件要先引入jQuery和CaptionerJs.js
文件。
<script src="js/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="js/CaptionerJs.js"></script>
图片的HTML代码可按下面格式来书写。
<img src="./images/chicory.jpg" role="caption" title="Chicory flower" alt="Common chicory, Cichorium intybus, is a somewhat woody, perennial herbaceous plant usually with bright blue flowers, rarely white or pink." />
CaptionerJs会将所有带有role="caption"
属性的图片进行转换。
配置参数
该图片标题插件可以通过HTML标签属性来配置参数。
- data-captioner-type:图片标题显示的类型,默认值为:
static
。 - data-captioner-class:容器上的CLASS名称,默认值为:
CaptionerJs
。 - data-captioner-start-closed:当显示和动画图片标题时是打开还是关闭。默认值为:
false
。
也可以通过js来配置参数:
$("img").CaptionerJs({ type: "...", cls : "...", options: { startClosed: ... } });
注意,如果使用javascript来设置该插件的参数,不要在图片元素中设置role="caption"
。
可用的图片标题类型有:
- static:图片标题在图片的底部。
- animated:图片标题在图片的底部,但是图片标题可以有打开和关闭动画效果。
- classic:图片标题显示在图片的下面。