Support basic JS-free lightbox

2 files changed, 12 insertions, 2 deletions

diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 74515c4..2af8b0a 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -69,12 +69,21 @@
         }
 
         @include iro.bem-elem('img') {
+            display:    none;
             box-sizing: border-box;
             grid-area:  content;
             max-width:  100%;
             max-height: 100%;
             margin:     auto;
             padding:    fn.dim(--pad);
+
+            &:target {
+                display: block;
+            }
+
+            @include iro.bem-is('visible') {
+                display: block;
+            }
         }
 
         @include iro.bem-elem('thumbnails') {
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index 7298ed9..5091565 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -6,14 +6,15 @@ mixin lightbox(images)
             .s-links.s-links--colored
                 block
             +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn')
-        img.o-lightbox__img(src=images[0])
+        each img, i in images
+            img.o-lightbox__img(src=images[i] id='image-' + i)
         if images.length > 1
             +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
             +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
         .o-lightbox__thumbnails
             each img, i in images
                 - classes = i === 0 ? 'is-selected' : ''
-                button.o-lightbox__thumbnail(class=classes)
+                a.o-lightbox__thumbnail(class=classes href='#image-' + i)
                     img.o-lightbox__thumbnail-img(src=img)
             button.o-lightbox__thumbnail
                 +icon('volume-2')(class='o-lightbox__thumbnail-icon')