# lightbox

The markup of every demo on <https://kuiper.oeds.it/lightbox/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## default

The component with no options set -- what the markup alone gives you, before any parameter is tuned. Read this one first: every other panel on the page is a departure from it.

Varies: 4 specimens.

```html
<div class="grid-xs" data-grid>
 <div class="width-1-1"><div class="grid-xs" data-grid data-lightbox="animation: slide;">
 <div class="width-1-1 width-1-1@s width-1-3@m width-1-3@l width-1-3@xl"><a href="/images/image-1.jpg" data-caption="A cropped landscape"><img src="/images/thumbnail-1.jpg" width="480" height="270" alt="A cropped landscape"></a></div>
 <div class="width-1-1 width-1-1@s width-1-3@m width-1-3@l width-1-3@xl"><a href="/images/image-2.jpg" data-caption="A second landscape"><img src="/images/thumbnail-2.jpg" width="480" height="270" alt="A second landscape"></a></div>
 <div class="width-1-1 width-1-1@s width-1-3@m width-1-3@l width-1-3@xl"><a href="/images/image-3.jpg" data-caption="A third landscape"><img src="/images/thumbnail-3.jpg" width="480" height="270" alt="A third landscape"></a></div>
 </div></div>
</div>
```

## data-lightbox-item

Varies: 4 specimens.

```html
<div class="grid-xs" data-grid>
 <div class="width-1-1"><div class="grid-xs" data-grid data-lightbox="animation: fade; counter: true;">
 <div class="width-1-1 width-1-1@s width-1-3@m width-1-3@l width-1-3@xl"><a href="/images/image-1.jpg" data-caption="A cropped landscape" data-lightbox-item><img src="/images/thumbnail-1.jpg" width="480" height="270" alt="A cropped landscape"></a></div>
 <div class="width-1-1 width-1-1@s width-1-3@m width-1-3@l width-1-3@xl"><a href="/images/image-2.jpg" data-caption="A second landscape" data-lightbox-item><img src="/images/thumbnail-2.jpg" width="480" height="270" alt="A second landscape"></a></div>
 <div class="width-1-1 width-1-1@s width-1-3@m width-1-3@l width-1-3@xl"><a href="/images/image-3.jpg" data-caption="A third landscape" data-lightbox-item><img src="/images/thumbnail-3.jpg" width="480" height="270" alt="A third landscape"></a></div>
 </div></div>
</div>
```