Input Formats

The library accepts several markup formats for the gallery, so you can pick the one that best fits your needs.

The most important format, which is also accepted by many lightboxes, is the following:

<div id="gallery" class="justified-gallery">
  <a href="path/to/myimage1_original.jpg">
    <img alt="Title 1" src="path/to/myimage1_thumbnail.jpg" />
  </a>
  <a href="path/to/myimage2_original.jpg">
    <img alt="Title 2" src="path/to/myimage2_thumbnail.jpg" />
  </a>
  <!-- other images... -->
</div>

If you don’t need links on photos, or if you want the links only in your captions, you can also use <div> instead of <a>:

<div id="gallery" class="justified-gallery">
  <div>
    <img alt="Title 1" src="path/to/myimage1_thumbnail.jpg" />
  </div>
  <div>
    <img alt="Title 2" src="path/to/myimage2_thumbnail.jpg" />
  </div>
  <!-- other images... -->
</div>

Entries without an image: text or video

You can also have entries without an image inside, for example a text or a video entry. In this case the width and the height needed to resize the entry, keeping its aspect ratio, are taken from its rendered size, i.e. its CSS properties (rather than from an image). For example, this is a text entry:

<div id="gallery" class="justified-gallery">
  <!-- other images... -->
  <div style="height: 50px; width: 200px;">
    <a href="..." style="position: absolute; bottom: 10px; right: 10px;">Next entries...</a>
  </div>
</div>

Arbitrary format changing the selector

If you have a particular structure you can also change which children are considered entries with the selector option. For example, assume that you have the following structure:

<div id="gallery" class="justified-gallery">
  <figure>
    <a href="path/to/myimage1_original.jpg">
      <img src="path/to/image1_thumbnail.jpg" />
    </a>
    <figcaption class="jg-caption">my caption</figcaption>
  </figure>
  <!-- other images... -->
</div>

You can change the selector option to 'figure'. The default stylesheet already supports a, div and figure entries; if you use other elements (e.g. li), you also need to extend the Justified Gallery’s CSS rules to cover them.

Custom captions

If you want custom captions you can also insert the caption element (with the jg-caption class) inside the entries. If present, Justified Gallery doesn’t generate a caption, but uses the existing one. See Captions for how to make them visible.

<div id="gallery" class="justified-gallery">
  <a href="path/to/myimage1_original.jpg">
    <img alt="Title 1" src="path/to/myimage1_thumbnail.jpg" />
    <div class="jg-caption">my custom caption</div>
  </a>
  <a href="path/to/myimage2_original.jpg">
    <img alt="Title 2" src="path/to/myimage2_thumbnail.jpg" />
    <div class="jg-caption">my custom caption 2</div>
  </a>
  <!-- other images... -->
</div>

If you want to put links inside the captions you have to use the <div> format (links can’t be nested), as in the second format shown above:

<div id="gallery" class="justified-gallery">
  <div>
    <img alt="Title 1" src="path/to/myimage1_thumbnail.jpg" />
    <div class="jg-caption">my custom caption <a href="any path">link to somewhere</a></div>
  </div>
  <div>
    <img alt="Title 2" src="path/to/myimage2_thumbnail.jpg" />
    <div class="jg-caption">my custom caption <a href="any path">link to somewhere 2</a></div>
  </div>
  <!-- other images... -->
</div>

But if you still need a link on your image, and you also want to use links inside your captions, you can wrap the images with the anchor tag (i.e. <a>) in the following way:

<div id="gallery" class="justified-gallery">
  <div>
    <a href="path/to/myimage1_original.jpg">
      <img alt="Title 1" src="path/to/myimage1_thumbnail.jpg" />
    </a>
    <div class="jg-caption">my custom caption <a href="any path">link to somewhere</a></div>
  </div>
  <div>
    <a href="path/to/myimage2_original.jpg">
      <img alt="Title 2" src="path/to/myimage2_thumbnail.jpg" />
    </a>
    <div class="jg-caption">my custom caption <a href="any path">link to somewhere 2</a></div>
  </div>
  <!-- other images... -->
</div>