Customization #1 – Make your images responsive so they scale correctly on mobile devices
Note: If you are including an image that is too big when viewed on a mobile device (goes off screen), add CSS code to the image portion of your code like shown below. The CSS code added is style=”max-width:100%;”
<div style="display:none;">
<div id="clue-1" style="text-align:center;">
<img src="https://picture_url.jpg" alt="Picture of John Smith" style="max-width:100%;" />
</div>
</div>Customizations #2 – Add multiple lightboxes on the same page
Looking to add multiple lightboxes on the same page? Just make sure each corresponding lightbox has a different ID. See code example below of two lightboxes and each one having their corresponding ID. In ID #2, I swap out the two spots where I have bio-john with bio-george
ID #1 <a href="#/" data-featherlight="#bio-john">View John's Bio</a> <div style="display:none;"> <div id="bio-john"> <p>John Smith grew up in a small town in Michigan and later moved to Florida. He attended school at Vandelay Industries College and went on to work for the New York Yankees.</p> </div> </div> ID #2 <a href="#/" data-featherlight="#bio-george">View John's Bio</a> <div style="display:none;"> <div id="bio-george"> <p>John Smith grew up in a small town in Michigan and later moved to Florida. He attended school at Vandelay Industries College and went on to work for the New York Yankees.</p> </div> </div>
Customization #6 – Custom Width of Lightbox
To specify the size of the lightbox, you’ll need to add CSS code (width: 300px !important;). The example below sets the lightbox to 700px wide, you can adjust that to fit your needs.
<div style="display:none;">
<div id="bio-john" style="max-width:700px !important;">Customization #7 – Change color of button for lightbox
To change the color of the button to launch your lightbox, modify the HEX number in the “background-color:#0000FF” section of the code.. The color of the button I have is Blue but change the HEX number to a color you want instead.
<div style="text-align:center; padding:0;">
<a href="#/" data-featherlight="#bio-john" class="sqs-block-button-element--medium sqs-block-button-element" style="background-color:#0000FF; color:#fff; padding:20px 20px;">View John's Bio</a>
</div>