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：图片标题显示在图片的下面。