Overlays
Lightbox
Click a small picture to see the large one, and step through a gallery.
Gallery
Links with the same data-pw-lightbox value belong together.
HTML
<div class="demo-thumbs">
<a href="assets/img/dunes.svg" data-pw-lightbox="trip" data-caption="Dunes at sunrise"><img src="assets/img/dunes.svg" alt="Orange dunes under a low sun"></a>
<a href="assets/img/fjord.svg" data-pw-lightbox="trip" data-caption="The fjord in the morning"><img src="assets/img/fjord.svg" alt="Blue hills around a fjord"></a>
<a href="assets/img/forest.svg" data-pw-lightbox="trip" data-caption="Hills behind the forest"><img src="assets/img/forest.svg" alt="Green hills"></a>
<a href="assets/img/dusk.svg" data-pw-lightbox="trip" data-caption="Dusk"><img src="assets/img/dusk.svg" alt="Purple hills at dusk"></a>
</div>One picture
HTML
<div class="demo-thumbs">
<a href="assets/img/mesa.svg" data-pw-lightbox data-caption="A single picture has no arrows"><img src="assets/img/mesa.svg" alt="A mesa in warm light"></a>
</div>Options
Set them as attributes on the element.
| Attribute | Default | What it does |
|---|---|---|
data-pw-lightbox | On a link to the large picture. The value is the gallery name; leave it empty for one picture. | |
data-caption | Text under the picture. | |
data-alt | Text for screen readers. Without it, the alt of the small picture. |
Events
Listen with addEventListener. Details are in event.detail.
| Event | When |
|---|---|
pw:open | On the link, with index. |
pw:close | On the link of the last picture shown. |
From your script
Partwise.lightbox.open(linkElement);
Partwise.lightbox.close();Keyboard
| Key | Action |
|---|---|
| Left Right | Previous and next picture |
| Home End | First and last picture |
| Esc | Close |
Good to know
- Swipe left or right on a touch screen.
- The next and the previous picture are loaded ahead.
- Without JavaScript, and with Ctrl or Cmd held down, the link opens the picture as usual.
- When it closes, the focus goes to the small picture you were looking at.
- Pictures only. No video and no zoom.
Files
Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/30-carousel.css, js/30-carousel.js.