Examples

Basic example

<a href="image.jpg" data-robroy>
    <img src="thumbnail.jpg" height="141" width="188">
</a>

Image with data-robroy-caption attribute

<a href="image.jpg" data-robroy data-robroy-caption="Curabitur viverra enim nunc, sit amet euismod mauris luctus eget.">
    <img src="thumbnail.jpg" height="125" width="188">
</a>

Image with <figcaption> inside link

Nunc mi quam, molestie vitae est sed.
<a href="image.jpg" data-robroy>
    <figure>
        <img src="thumbnail.jpg" height="251" width="188">
        <figcaption>Nunc mi quam, molestie vitae est sed.</figcaption>
    </figure>
</a>

Image with <figcaption> outside link

Quisque elementum, enim ultrices euismod tempus.
<figure>
    <a href="image.jpg" data-robroy>
        <img src="thumbnail.jpg" height="251" width="188">
    </a>
    <figcaption>Quisque elementum, enim ultrices euismod tempus.</figcaption>
</figure>

Image with alt attribute

Suspendisse et vehicula justo, a maximus augue <a href="image.jpg" data-robroy>
    <img alt="Suspendisse et vehicula justo, a maximus augue" src="thumbnail.jpg" height="282" width="188">
</a>

Image with really long caption, including HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida dictum nisl, et venenatis tortor condimentum a. Etiam vel ligula condimentum mi tristique viverra id nec urna. Mauris rhoncus odio quis dolor pellentesque, sit amet tempus elit consequat. Nunc ultrices vel arcu sit amet tincidunt. Nam quis leo nulla. Maecenas a enim magna. Aenean at augue ac nunc consectetur lobortis. Maecenas sit amet dui auctor enim condimentum vestibulum. Vivamus commodo diam augue, at volutpat lacus pharetra vitae. In tristique vel nibh ac sagittis. Aenean tincidunt neque risus, sit amet molestie dui ultricies nec.

Integer placerat sit amet purus id suscipit. Vivamus tempor rhoncus sapien vitae tempus. Sed neque quam, rutrum at dui vel, ullamcorper vehicula nisl. Nam sit amet neque eu nulla fermentum congue. Maecenas lacinia mattis massa ac tempor. Pellentesque posuere varius mattis. Fusce nec ante eget dolor blandit volutpat ac et nibh. Maecenas fermentum, turpis ac sagittis posuere, mi erat ornare enim, ac cursus felis lacus quis felis. Nam tempus ex ut risus feugiat ullamcorper.

Source

<figure>
    <a href="image.jpg" data-robroy>
        <img src="thumbnail.jpg" height="125" width="188">
    </a>
    <figcaption>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc gravida dictum nisl, et venenatis tortor condimentum a. Etiam vel ligula condimentum mi tristique viverra id nec urna. Mauris rhoncus odio quis dolor pellentesque, sit amet tempus elit consequat. Nunc ultrices vel arcu sit amet tincidunt. Nam quis leo nulla. Maecenas a enim magna. Aenean at augue ac nunc consectetur lobortis. Maecenas sit amet dui auctor enim condimentum vestibulum. Vivamus commodo diam augue, at volutpat lacus pharetra vitae. In tristique vel nibh ac sagittis. Aenean tincidunt neque risus, sit amet molestie dui ultricies nec.</p>
        <p>Integer placerat sit amet purus id suscipit. Vivamus tempor rhoncus sapien vitae tempus. Sed neque quam, rutrum at dui vel, ullamcorper vehicula nisl. Nam sit amet neque eu nulla fermentum congue. Maecenas lacinia mattis massa ac tempor. Pellentesque posuere varius mattis. Fusce nec ante eget dolor blandit volutpat ac et nibh. Maecenas fermentum, turpis ac sagittis posuere, mi erat ornare enim, ac cursus felis lacus quis felis. Nam tempus ex ut risus feugiat ullamcorper.</p>
        <p><cite><a href="https://lipsum.com">Source</a></cite></p>
    </figcaption>
</figure>

Image with alternate link in data-robroy-href

<a href="thumbnail.jpg">
    <img src="thumbnail.jpg" height="125" width="188">
</a>

Image with an arbitrary number of parent elements

<a href="image.jpg" data-robroy>
    <figure>
        <div>
            <img src="thumbnail.jpg" height="141" width="188">
        </div>
    </figure>
</a>

Image with pre-set height/width

<a href="image.jpg" data-robroy data-robroy-height="1000" data-robroy-width="667">
    <img src="thumbnail.jpg" height="282" width="188">
</a>

Dynamically added images

<button id="dynamic-button" type="button">Add an image</button>

<p id="dynamic-container"></p>

<script>
document.getElementById('dynamic-button').addEventListener('click', () => {
    const a = document.createElement('a');
    a.setAttribute('href', 'image.jpg');
    a.setAttribute('data-robroy', true);
    document.getElementById('dynamic-container').appendChild(a);

    const img = document.createElement('img');
    img.setAttribute('src', 'thumbnail.jpg');
    a.appendChild(img);

    window.robroy();
});
</script>