Img Directory
Thumbnail Width
Img Width
Img Height
# of Images
Overlay Color
Lightbox Name
Div Class
Alt
Title

AMP Lightbox Gallery Wizard

Place in "Head"

⧪
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
.{{ DivClass }}{width:{{ thumb }}px;float:left;margin:5px;padding:3px;border:1px solid {{ Overlay }};position:relative;
-webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.33);
-moz-box-shadow:3px 3px 5px 0px rgba(50, 50, 50, 0.33);
box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.33);
}
amp-image-lightbox{background:{{ Overlay }};}
.{{ DivClass }}:hover{cursor:pointer;left:1px;top:1px;
-webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0);
-moz-box-shadow:0px 0px 0px 0px rgba(255, 255, 255, 0);
box-shadow:0px 0px 0px 0px rgba(255, 255, 255, 0);
}
.{{ DivClass }}Wrapper{margin-right:auto;margin-left:auto;max-width:100%;}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>


Place right after <BODY> tag

⧪
<amp-image-lightbox id="{{ LightboxID }}"
layout="nodisplay"></amp-image-lightbox>

Place in the the DIV (section?) where the gallery goes

⧪
<!-- begin {{ DivClass }} lightbox gallery -->
<div class="{{ DivClass }}Wrapper">




<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 1"
src="{{ Directory }}/001.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 2"
src="{{ Directory }}/002.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 3"
src="{{ Directory }}/003.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 4"
src="{{ Directory }}/004.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 5"
src="{{ Directory }}/005.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 6"
src="{{ Directory }}/006.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 7"
src="{{ Directory }}/007.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 8"
src="{{ Directory }}/008.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 9"
src="{{ Directory }}/009.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 10"
src="{{ Directory }}/010.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 11"
src="{{ Directory }}/011.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 12"
src="{{ Directory }}/012.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 13"
src="{{ Directory }}/013.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 14"
src="{{ Directory }}/014.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 15"
src="{{ Directory }}/015.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 16"
src="{{ Directory }}/016.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 17"
src="{{ Directory }}/017.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 18"
src="{{ Directory }}/018.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 19"
src="{{ Directory }}/019.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 20"
src="{{ Directory }}/020.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 21"
src="{{ Directory }}/021.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 22"
src="{{ Directory }}/022.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 23"
src="{{ Directory }}/023.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 24"
src="{{ Directory }}/024.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 25"
src="{{ Directory }}/025.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 26"
src="{{ Directory }}/026.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 27"
src="{{ Directory }}/027.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 28"
src="{{ Directory }}/028.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 29"
src="{{ Directory }}/029.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

<div class="{{ DivClass }}">
<amp-img on="tap:{{ LightboxID }}"
role="button"
tabindex="0"
alt="{{ Alt }}"
title="{{ Title }} 30"
src="{{ Directory }}/030.jpg"
width="{{ ImgW }}"
height="{{ ImgH }}"
layout="responsive">
</amp-img>
</div>

</div>
<!-- end {{ DivClass }} lightbox gallery -->