Lightboxes (JS)
<ul class="grid-list">
<li class="grid-list__item">
<a class="thumbnail thumbnail__link" href="/assets/img/600x400.png" data-lightbox>
<img alt="" class="thumbnail__img" loading="lazy" src="/assets/img/600x400.png" height="150" width="225">
<div class="thumbnail__caption">div.thumbnail__caption: Dictum vel massa.</div>
</a>
</li>
<li class="grid-list__item">
<a class="thumbnail thumbnail__link" href="/assets/img/800x600.png" data-lightbox data-lightbox-caption="a[data-lightbox-caption]: Etiam eu urna.">
<img alt="" class="thumbnail__img" loading="lazy" src="/assets/img/800x600.png" height="150" width="200">
</a>
</li>
<li class="grid-list__item">
<a class="thumbnail thumbnail__link" href="/assets/img/500x500.png" data-lightbox>
<figure class="thumbnail__figure grid-list__figure">
<img alt="" class="thumbnail__img" loading="lazy" src="/assets/img/500x500.png" height="150" width="150">
<figcaption>figcaption: Quisque eu lacus auctor.</figcaption>
</figure>
</a>
</li>
<li class="grid-list__item">
<a class="thumbnail thumbnail__link" href="/assets/img/500x400.png" data-lightbox>
<img alt="img[alt]: Curabitur eu." class="thumbnail__img" loading="lazy" src="/assets/img/500x400.png" height="150" width="187">
</a>
</li>
<li class="grid-list__item">
<a class="thumbnail thumbnail__link" href="https://example.org" data-lightbox data-lightbox-href="/assets/img/700x400.png">
<figure class="thumbnail__figure grid-list__figure">
<img alt="" class="thumbnail__img" loading="lazy" src="/assets/img/700x400.png" height="150" width="273">
<div class="thumbnail__caption">Alternate URL (right click and open new tab)</div>
</figure>
</a>
</li>
<li class="grid-list__item">
<a class="thumbnail thumbnail__link" href="/assets/img/3000x4000.png" data-lightbox>
<img alt="Tall image with long caption: Quisque eu lacus auctor, mattis turpis sed, rutrum libero. Vestibulum erat elit, ullamcorper id dictum sed, pharetra id mi. Cras venenatis magna in mollis ullamcorper. Pellentesque pretium, elit et mattis volutpat, lacus velit auctor mauris, ut iaculis erat arcu at lacus. Morbi porta nibh nunc, at sodales diam ullamcorper sed. Praesent pulvinar justo dolor, ut elementum velit facilisis ut. Quisque dignissim elit magna. Quisque tincidunt lobortis finibus. Praesent in felis sit amet leo ultrices gravida." class="thumbnail__img" loading="lazy" src="/assets/img/3000x4000.png" height="200" width="150">
</a>
</li>
<li class="grid-list__item">
<a class="thumbnail thumbnail__link" href="/assets/img/4000x3000.png" data-lightbox>
<img alt="Wide image with long caption: Quisque eu lacus auctor, mattis turpis sed, rutrum libero. Vestibulum erat elit, ullamcorper id dictum sed, pharetra id mi. Cras venenatis magna in mollis ullamcorper. Pellentesque pretium, elit et mattis volutpat, lacus velit auctor mauris, ut iaculis erat arcu at lacus. Morbi porta nibh nunc, at sodales diam ullamcorper sed. Praesent pulvinar justo dolor, ut elementum velit facilisis ut. Quisque dignissim elit magna. Quisque tincidunt lobortis finibus. Praesent in felis sit amet leo ultrices gravida." class="thumbnail__img" loading="lazy" src="/assets/img/4000x3000.png" height="150" width="200">
</a>
</li>
<li class="grid-list__item">
<a class="thumbnail thumbnail__link" href="/assets/img/400x500.png" data-lightbox>
<img alt="" class="thumbnail__img" loading="lazy" src="/assets/img/400x500.png" height="187" width="150">
</a>
</li>
</ul>
div.thumbnail__caption: Dictum vel massa.
![img[alt]: Curabitur eu.](/assets/img/500x400.png)
Alternate URL (right click and open new tab)
