Lightbox fallback without :target

2 files changed, 8 insertions, 5 deletions

diff --git a/tpl/objects/backdrop.pug b/tpl/objects/backdrop.pug
index 227700c..f577961 100644
--- a/tpl/objects/backdrop.pug
+++ b/tpl/objects/backdrop.pug
@@ -8,7 +8,10 @@ mixin backdrop
             classes[attributes.class] = true;
         }
 
-        let styles = { width: '100%', 'min-height': '5em', 'max-height': '40em' }
+        let styles = { width: '100%', 'min-height': '5em' }
+        if (attributes.maxHeight) {
+            styles['max-height'] = '40em';
+        }
         if (attributes.pad) {
             styles['padding'] = '2em';
         }
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index 02a3200..85c468f 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -4,6 +4,7 @@ mixin lightbox(images)
     -
         let classes = {
             'o-lightbox': true,
+            'o-lightbox--interactive': attributes.interactive,
         }
         let linksClasses = {
             's-links': true,
@@ -19,15 +20,14 @@ mixin lightbox(images)
             div(class=linksClasses)
                 block
             +action-button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn')
+
         each img, i in images
-            img.o-lightbox__img(src=images[i] id='image-' + i)
-            +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
-            +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
+            img(src=images[i] id=('image-' + i) class=`o-lightbox__img ${attributes.interactive && !i ? 'is-visible' : ''}`)
 
-        img.o-lightbox__img.o-lightbox__img--default(src=images[0])
         if images.length > 1
             +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
             +action-button(theme=attributes.theme pill=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' : ''