Basic HTML5 Image Caption Plugin For jQuery - Caption.js

Caption.js is a dead simple jQuery plugin that allows you to add an HTML5 image caption (description, copyright, credit information) to any image with just one JS call.

How to use it:

1. Place both jQuery JavaScript library and the jQuery caption.js script at the end of your html document.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="jquery.caption.js"></script>

2. Add a custom caption to your image as this:

$("#demo").addCaption("@unsplash.it");

3. This will wrap your image into the HTML5 figure element and generate an image caption overlay using the figcaption tag:

<figure>
  <img id="demo" src="https://unsplash.it/460/300/?random">
  <figcaption>@unsplash.it</figcaption>
</figure>

4. Style the image caption overlay whatever you like:

.container figure {
  position: relative;
  border: 3px solid #fff;
}

.container figcaption {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 0.75em;
  text-align: center;
  background: rgba(0, 0, 0, 0.64);
}

---

This awesome jQuery plugin is developed by gerayzade. For more Advanced Usages, please check the demo page or visit the official website.