The plugin accepts several formats for the gallery, and each of them is useful to solve your specific problem.
The most important format, which is also accepted by many lightboxes, is the following:
<div id="mygallery" >
<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="mygallery">
<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>You can also have entries without an image inside, for example to have a text or a video entry. In this case the height and the width needed to resize an entry, to maintain its correct aspect ratio, are taken from its CSS properties (rather than from image). For example, this could be an example of a text entry:
<div class="mygallery">
<!-- other images... -->
<div style="height: 50px; width: 200px;">
<a href="..." style="position: absolute; bottom: 10px; right: 10px;">Next entries...</a>
</div>
</div>
You can change the selector option with the following value 'div, div:not(.spinner)'. Note
that, in this case, you also need to extend the Justified Gallery's CSS rules.
If you have a particular structure you can also change the default behaviour of Justified Gallery changing the
default selector option.
For example, assume that you have the following structure:
<div class="mygallery">
<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 with the following value 'figure, div:not(.spinner)'. Note
that, in this case, you also need to extend the Justified Gallery's CSS rules.
If you want custom captions you can also insert the caption tag inside the entries. If present, Justified Gallery doesn't generate the caption tags, but it uses the existing one.
<div id="mygallery" >
<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>, in the
same way we have seen in the second format.
<div id="mygallery">
<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 in 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="mygallery">
<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/myimage1_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>