How to add a photo gallery or lightbox

Follow these steps to add a photo carousel to a Webflow-designed profile page:

1) Connect the user "photos" field to the corresponding page in Tangram
2) Paste the following code into a custom code block (this element will be the button that opens the lightbox carousel)

‍

<div class="tangram-lightbox-trigger" onClick="openModal();showSlides(0);" style="background-color: white; padding: 5px 10px; z-index: 9999999; border-radius: 4px;border: thin solid black;">
<i class="fa fa-ellipsis-v" aria-hidden="true" style= "padding-right: 2px"></i><i style= "padding-right: 2px" class="fa fa-ellipsis-v" aria-hidden="true"></i><i style= "padding-right: 2px" class="fa fa-ellipsis-v" aria-hidden="true"></i>
Show all photos
</div>

‍
3) Add the html attribute tg-addon-id = "lightbox-trigger" to the custom code element you just created
4) Paste the following code into the header of the profile page in Webflow

<script src = 'https://[your.subdomain.com]/pages/[your page id]/profile_lightbox.js' type = 'text/javascript'></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" async = "async">

<style>
   .row>.column {
       padding: 0 8px;
   }
   .row:after {
       content: "";
       display: table;
       clear: both;
   }
   /* Create four equal columns that floats next to eachother */
   .column {
       float: left;
       width: 25%;
   }
   /* The Modal (background) */
   .modal {
       display: none;
       position: fixed;
       z-index: 999999999999999999;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       overflow: auto;
       background-color: black;
   }
   /* Modal Content */
   .modal-content {
       position: relative;
       background-color: #FEFEFE;
       margin: auto;
       padding: 0;
       width: 90%;
       max-width: 1200px;
       height: 100%;
   }
   /* The Close Button */
   .close {
       color: white;
       position: absolute;
       top: 10px;
       right: 25px;
       font-size: 35px;
       font-weight: bold;
       position: absolute;
       z-index: 100;
       right: 20px;
       top: 20px;
   }
   .close:hover,
   .close:focus {
       color: #999;
       text-decoration: none;
       cursor: pointer;
   }
   /* Hide the slides by default */
   .mySlides {
       position: relative;
       display: none;
       background-color: black;
       text-align: center;
       transform: translate(-50%, -50%);
       top: 50%;
       left: 50%;
   }
   .slides-container {
       height: 100%;
       width: 100%;
       background-color: black;
       z-index: 0;
       position: absolute;
   }
   /* Next & previous buttons */
   .prev,
   .next {
       cursor: pointer;
       position: absolute;
       top: 50%;
       width: auto;
       padding: 16px;
       margin-top: -50px;
       color: white;
       font-weight: bold;
       font-size: 20px;
       transition: 0.6s ease;
       border-radius: 0 3px 3px 0;
       user-select: none;
       -webkit-user-select: none;
       text-decoration: none;
   }
   /* Position the "next button" to the right */
   .next {
       right: 0;
       border-radius: 3px 0 0 3px;
   }
   /* On hover, add a black background color with a little bit see-through */
   .prev:hover,
   .next:hover {
       background-color: rgba(0, 0, 0, 0.8);
   }
   /* Number text (1/3 etc) */
   .numbertext {
       color: #F2F2F2;
       font-size: 12px;
       padding: 8px 12px;
       position: absolute;
       top: 0;
   }
   /* Caption text */
   .caption-container {
       text-align: center;
       background-color: black;
       padding: 2px 16px;
       color: white;
   }
   img.demo {
       opacity: 0.6;
   }
   .active,
   .demo:hover {
       opacity: 1;
   }
   img.hover-shadow {
       transition: 0.3s;
   }
   .hover-shadow:hover {
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   }
</style>

Follow these steps to add a photo carousel to a Webflow-designed listing details page:

For a listing lightbox, just connect the listing photos field instead of the user photos field in step 1 and replace /profile_lightbox.js with /listing_lightbox.js in step 4