Captions

When the captions option is enabled (the default), the captions are automatically created using the alt attribute of the images. If it doesn’t exist (or is empty), the caption is created using the title attribute of the entry (e.g. the link). Entries without an image don’t get a caption.

For example, the following entry has “I’m only in the alt” as caption:

<a href="imageurl.jpg">
  <img alt="I'm only in the alt" src="thumbnailurl.jpg" />
</a>

The following entry doesn’t have an alt, but it has a title. In this case the library will set “I’m only in the title” as caption:

<a href="imageurl.jpg" title="I'm only in the title">
  <img src="thumbnailurl.jpg" />
</a>

In this last example, we have both the title and the alt. In this case the library takes the text from the alt, and the caption will be “I’m in the alt”:

<a href="imageurl.jpg" title="I'm in the title">
  <img alt="I'm in the alt" src="thumbnailurl.jpg" />
</a>

The library creates the captions by appending, to each entry, an extra div element with the class jg-caption. To have custom captions you only need to insert this element on your own, with the content that you want. The library skips the creation of the caption for the entries that already have one:

<a href="imageurl.jpg">
  <img src="thumbnailurl.jpg" />
  <div class="jg-caption">
    I'm <span style="color:red">a</span> <strong>custom</strong> caption!
    <div>I'm a div</div>
  </div>
</a>

Showing the captions

The default stylesheet keeps the .jg-caption elements hidden, and shows them (semi-transparent, at the bottom of the entry) only when they also have the jg-caption-visible class. The library doesn’t add that class for you, so decide how captions should appear with a few lines of CSS. For example, to show them when the mouse is over an image:

.justified-gallery > .jg-entry:hover > .jg-caption {
  display: initial;
  opacity: 0.7;
}

The following demo shows all four cases — hover the images to see the captions:

I'm a custom caption!

I'm a div

To change how the captions look (colors, font, a gradient background…), see Styling & CSS Classes.

See how to use the captions with other input formats.