<header data-record-id="ed7ec991-3828-fdb0-10e0-a71a504ca304" data-copilot="true" class="section utility-padding-all-0 utility-text-on-overlay">
    <div class="w-layout-grid grid-layout"> 
      <div id="w-node-_83130efd-cc89-3e63-e012-238651cb9c90-51cb9c8e" class="utility-position-relative utility-min-height-100dvh w-node-_96fd2722-e9c1-daac-a142-9395711fa117-76ee1c84"><img class="cover-image utility-position-absolute" src="<?= base_url(); ?>uploads/<?= !empty($business['banner_image']) ? $business['banner_image'] : 'default-banner.jpg'; ?>" width="1216" height="832" alt="<?= htmlspecialchars($business['name']); ?>" sizes="100vw" loading="lazy">
        <div class="overlay utility-mask-top"></div>
      </div>
      <div id="w-node-_83130efd-cc89-3e63-e012-238651cb9c93-51cb9c8e" class="container utility-position-relative utility-padding-bottom-4rem w-node-_96fd2722-e9c1-daac-a142-9395711fa123-76ee1c84">
        <div class="w-layout-grid grid-layout tablet-1-column grid-gap-lg y-bottom">
          <h1 class="h1-heading utility-margin-bottom-0"><?= htmlspecialchars($business['name']); ?></h1>
        </div>
      </div>
    </div>
  </header>
  <header data-copilot="true" class="section" style="padding-top: 0px;">
    <div class="container">
      <div class="w-layout-grid grid-layout tablet-1-column grid-gap-xxl">
        <div id="w-node-_1a4e2b76-4ff4-9917-3a06-ea31ddf44bd1-ddf44bce" class="w-node-ccec2e56-18bd-5553-1511-7d2176f79687-76ee1c84">
          <h1 class="h1-heading"><?= htmlspecialchars($business['intro_title']); ?></h1>
          <p class="subheading"><?= $business['intro_content']; ?></p>
        </div>
        <div class="w-layout-grid grid-layout tablet-1-column grid-gap-xs">
          <?php if(!empty($business['intro1_image'])): ?>
            <img width="270" height="" alt="<?= htmlspecialchars($business['name']); ?>" src="<?= base_url(); ?>uploads/<?= $business['intro1_image']; ?>" loading="lazy" id="w-node-_1a4e2b76-4ff4-9917-3a06-ea31ddf44bde-ddf44bce" class="cover-image utility-tablet-aspect-3x2-1-2-3-4-5 w-node-ccec2e56-18bd-5553-1511-7d2176f79688-76ee1c84">
          <?php endif; ?>
          <?php if(!empty($business['intro2_image'])): ?>
            <img class="cover-image utility-tablet-aspect-3x2-1-2-3-4-5 w-node-ccec2e56-18bd-5553-1511-7d2176f79689-76ee1c84" src="<?= base_url(); ?>uploads/<?= $business['intro2_image']; ?>" width="270" height="" alt="<?= htmlspecialchars($business['name']); ?>" sizes="(max-width: 479px) 100vw, 270px" id="w-node-_1a4e2b76-4ff4-9917-3a06-ea31ddf44be0-ddf44bce" loading="lazy">
          <?php endif; ?>
          <?php if(!empty($business['intro3_image'])): ?>
            <img class="cover-image utility-tablet-aspect-3x2-1-2-3-4-5 w-node-ccec2e56-18bd-5553-1511-7d2176f7968a-76ee1c84" src="<?= base_url(); ?>uploads/<?= $business['intro3_image']; ?>" width="270" height="" alt="<?= htmlspecialchars($business['name']); ?>" sizes="(max-width: 479px) 100vw, 270px" id="w-node-_1a4e2b76-4ff4-9917-3a06-ea31ddf44be2-ddf44bce" loading="lazy">
          <?php endif; ?>
        </div>
      </div>
    </div>
  </header>
  <section data-copilot="true" class="section secondary-section" style="padding-top: 0px;">
    <div class="container">
      <div class="w-layout-grid grid-layout mobile-landscape-1-column grid-gap-xs y-bottom utility-margin-bottom-3rem">
        <div>
          <h2 class="h2-heading"><?= htmlspecialchars($business['facility_title']); ?></h2>
          <p class="utility-margin-bottom-0"><?= $business['facility_subtitle']; ?></p>
        </div>
      </div>
      <div class="w-layout-grid grid-layout mobile-landscape-1-column grid-gap-sm">
        <?php if(!empty($business['facility1_title'])): ?>
        <a href="#" class="utility-link-content-block w-inline-block">
          <?php if(!empty($business['facility1_image'])): ?>
          <div id="w-node-c5675721-f773-8905-e0d0-506b0d86399d-0d86398c" class="utility-aspect-3x2 utility-margin-bottom-1rem w-node-dab6edac-c6ae-b2e9-0742-ccc96228115a-76ee1c84"><img width="" height="" alt="<?= htmlspecialchars($business['facility1_title']); ?>" src="<?= base_url(); ?>uploads/<?= $business['facility1_image']; ?>" loading="lazy" class="image cover-image"></div>
          <?php endif; ?>
          <h3 class="h4-heading"><?= htmlspecialchars($business['facility1_title']); ?></h3>
          <p><?= $business['facility1_subtitle']; ?></p>
          <div class="text-button secondary-text-button"></div>
        </a>
        <?php endif; ?>
        <?php if(!empty($business['facility2_title'])): ?>
        <a href="#" class="utility-link-content-block w-inline-block">
          <?php if(!empty($business['facility2_image'])): ?>
          <div id="w-node-c7acdf99-9899-6fce-696b-b91f736cad98-0d86398c" class="utility-aspect-3x2 utility-margin-bottom-1rem w-node-dab6edac-c6ae-b2e9-0742-ccc96228116d-76ee1c84"><img class="image cover-image" src="<?= base_url(); ?>uploads/<?= $business['facility2_image']; ?>" width="" height="" alt="<?= htmlspecialchars($business['facility2_title']); ?>" sizes="(max-width: 680px) 100vw, 680px" loading="lazy"></div>
          <?php endif; ?>
          <h3 class="h4-heading"><?= htmlspecialchars($business['facility2_title']); ?></h3>
          <p><?= $business['facility2_subtitle']; ?></p>
          <div class="text-button secondary-text-button"></div>
        </a>
        <?php endif; ?>
        <?php if(!empty($business['facility3_title'])): ?>
        <a href="#" class="utility-link-content-block w-inline-block">
          <?php if(!empty($business['facility3_image'])): ?>
          <div id="w-node-c7acdf99-9899-6fce-696b-b91f736cad98-0d86398c" class="utility-aspect-3x2 utility-margin-bottom-1rem w-node-f58d53ee-3be3-668a-9788-6db1a9969a54-76ee1c84"><img class="image cover-image" src="<?= base_url(); ?>uploads/<?= $business['facility3_image']; ?>" width="" height="" alt="<?= htmlspecialchars($business['facility3_title']); ?>" sizes="(max-width: 570px) 100vw, 570px" loading="lazy"></div>
          <?php endif; ?>
          <h3 class="h4-heading"><?= htmlspecialchars($business['facility3_title']); ?></h3>
          <p><?= $business['facility3_subtitle']; ?></p>
          <div class="text-button secondary-text-button"></div>
        </a>
        <?php endif; ?>
        <?php if(!empty($business['facility4_title'])): ?>
        <a href="#" class="utility-link-content-block w-inline-block">
          <?php if(!empty($business['facility4_image'])): ?>
          <div id="w-node-c7acdf99-9899-6fce-696b-b91f736cad98-0d86398c" class="utility-aspect-3x2 utility-margin-bottom-1rem w-node-_8e9083f0-39e1-67f0-f0ca-3a998cb96fe3-76ee1c84"><img class="image cover-image unsplash-image" src="<?= base_url(); ?>uploads/<?= $business['facility4_image']; ?>" width="5472" height="3648" alt="<?= htmlspecialchars($business['facility4_title']); ?>" style="color:#d9d9d9;background-color:#d9d9d9" sizes="100vw" loading="lazy"></div>
          <?php endif; ?>
          <h3 class="h4-heading"><?= htmlspecialchars($business['facility4_title']); ?></h3>
          <p><?= $business['facility4_subtitle']; ?></p>
          <div class="text-button secondary-text-button"></div>
        </a>
        <?php endif; ?>
      </div>
    </div>
  </section>
  <section data-record-id="5cd9e4d4-d225-bf65-3d9b-8d2801de3d43" data-copilot="true" class="section utility-overflow-hidden" style="padding-top: 0px; padding-bottom: 0px;">
    <div class="utility-width-125 centered">
      <div class="w-layout-grid grid-layout desktop-1-column grid-gap-sm">
        <div class="w-layout-grid grid-layout desktop-10-column grid-gap-sm">
          <?php if(!empty($business['gallery1_image'])): ?>
          <div id="w-node-_68223040-239a-9e1a-9ad0-b648cbfa87c7-cbfa87c3" class="utility-aspect-1x1 w-node-cc7ea93d-ac2d-1a61-1a8f-4532518ea605-76ee1c84">
            <a href="<?= base_url(); ?>uploads/<?= $business['gallery1_image']; ?>" class="popup-gallery">
              <img width="1216" height="832" alt="<?= htmlspecialchars($business['name']); ?>" src="<?= base_url(); ?>uploads/<?= $business['gallery1_image']; ?>" loading="lazy" class="cover-image">
            </a>
          </div>
          <?php endif; ?>
          <?php if(!empty($business['gallery2_image'])): ?>
          <div id="w-node-_68223040-239a-9e1a-9ad0-b648cbfa87c9-cbfa87c3" class="utility-aspect-1x1 w-node-cc7ea93d-ac2d-1a61-1a8f-4532518ea607-76ee1c84">
            <a href="<?= base_url(); ?>uploads/<?= $business['gallery2_image']; ?>" class="popup-gallery">
              <img width="1216" height="832" alt="<?= htmlspecialchars($business['name']); ?>" src="<?= base_url(); ?>uploads/<?= $business['gallery2_image']; ?>" loading="lazy" class="cover-image">
            </a>
          </div>
          <?php endif; ?>
          <?php if(!empty($business['gallery3_image'])): ?>
          <div id="w-node-_68223040-239a-9e1a-9ad0-b648cbfa87cb-cbfa87c3" class="utility-aspect-1x1 w-node-cc7ea93d-ac2d-1a61-1a8f-4532518ea609-76ee1c84">
            <a href="<?= base_url(); ?>uploads/<?= $business['gallery3_image']; ?>" class="popup-gallery">
              <img class="cover-image" src="<?= base_url(); ?>uploads/<?= $business['gallery3_image']; ?>" width="1216" height="832" alt="<?= htmlspecialchars($business['name']); ?>" sizes="100vw" loading="lazy">
            </a>
          </div>
          <?php endif; ?>
          <?php if(!empty($business['gallery4_image'])): ?>
          <div id="w-node-_68223040-239a-9e1a-9ad0-b648cbfa87cd-cbfa87c3" class="utility-aspect-1x1 w-node-cc7ea93d-ac2d-1a61-1a8f-4532518ea60b-76ee1c84">
            <a href="<?= base_url(); ?>uploads/<?= $business['gallery4_image']; ?>" class="popup-gallery">
              <img class="cover-image" src="<?= base_url(); ?>uploads/<?= $business['gallery4_image']; ?>" width="1216" height="832" alt="<?= htmlspecialchars($business['name']); ?>" sizes="100vw" loading="lazy">
            </a>
          </div>
          <?php endif; ?>
          <?php if(!empty($business['gallery5_image'])): ?>
          <div id="w-node-_68223040-239a-9e1a-9ad0-b648cbfa87cf-cbfa87c3" class="utility-aspect-1x1 w-node-cc7ea93d-ac2d-1a61-1a8f-4532518ea60d-76ee1c84">
            <a href="<?= base_url(); ?>uploads/<?= $business['gallery5_image']; ?>" class="popup-gallery">
              <img class="cover-image" src="<?= base_url(); ?>uploads/<?= $business['gallery5_image']; ?>" width="1216" height="832" alt="<?= htmlspecialchars($business['name']); ?>" sizes="100vw" loading="lazy">
            </a>
          </div>
          <?php endif; ?>
        </div>
        <div class="w-layout-grid grid-layout desktop-10-column grid-gap-sm">
          <div id="w-node-_68223040-239a-9e1a-9ad0-b648cbfa87d2-cbfa87c3" class="w-node-cc7ea93d-ac2d-1a61-1a8f-4532518ea60f-76ee1c84"></div>
          <?php if(!empty($business['gallery6_image'])): ?>
          <div id="w-node-_68223040-239a-9e1a-9ad0-b648cbfa87d3-cbfa87c3" class="utility-aspect-1x1 w-node-cc7ea93d-ac2d-1a61-1a8f-4532518ea611-76ee1c84">
            <a href="<?= base_url(); ?>uploads/<?= $business['gallery6_image']; ?>" class="popup-gallery">
              <img width="1216" height="832" alt="<?= htmlspecialchars($business['name']); ?>" src="<?= base_url(); ?>uploads/<?= $business['gallery6_image']; ?>" loading="lazy" class="cover-image">
            </a>
          </div>
          <?php endif; ?>
          <?php if(!empty($business['gallery7_image'])): ?>
          <div id="w-node-_68223040-239a-9e1a-9ad0-b648cbfa87d5-cbfa87c3" class="utility-aspect-1x1 w-node-cc7ea93d-ac2d-1a61-1a8f-4532518ea613-76ee1c84">
            <a href="<?= base_url(); ?>uploads/<?= $business['gallery7_image']; ?>" class="popup-gallery">
              <img class="cover-image" src="<?= base_url(); ?>uploads/<?= $business['gallery7_image']; ?>" width="1216" height="832" alt="<?= htmlspecialchars($business['name']); ?>" sizes="100vw" loading="lazy">
            </a>
          </div>
          <?php endif; ?>
          <?php if(!empty($business['gallery8_image'])): ?>
          <div id="w-node-_68223040-239a-9e1a-9ad0-b648cbfa87d7-cbfa87c3" class="utility-aspect-1x1 w-node-cc7ea93d-ac2d-1a61-1a8f-4532518ea615-76ee1c84">
            <a href="<?= base_url(); ?>uploads/<?= $business['gallery8_image']; ?>" class="popup-gallery">
              <img class="cover-image" src="<?= base_url(); ?>uploads/<?= $business['gallery8_image']; ?>" width="1216" height="832" alt="<?= htmlspecialchars($business['name']); ?>" sizes="100vw" loading="lazy">
            </a>
          </div>
          <?php endif; ?>
          <?php if(!empty($business['gallery9_image'])): ?>
          <div id="w-node-_68223040-239a-9e1a-9ad0-b648cbfa87d9-cbfa87c3" class="utility-aspect-1x1 w-node-cc7ea93d-ac2d-1a61-1a8f-4532518ea617-76ee1c84">
            <a href="<?= base_url(); ?>uploads/<?= $business['gallery9_image']; ?>" class="popup-gallery">
              <img class="cover-image" src="<?= base_url(); ?>uploads/<?= $business['gallery9_image']; ?>" width="1216" height="832" alt="<?= htmlspecialchars($business['name']); ?>" sizes="100vw" loading="lazy">
            </a>
          </div>
          <?php endif; ?>
        </div>
      </div>
    </div>
    <div class="container utility-margin-top-4rem"></div>
  </section>

  <?php if(!empty($business['testimony1_title'])): ?>
  <section data-record-id="6072aa05-a55c-c1d8-3ef8-99f78d4dacc2" data-copilot="true" class="section" style="padding-top: 0px;">
    <div class="container">
      <div class="utility-text-align-center utility-margin-bottom-4rem">
        <p class="eyebrow">What Our Guests Say</p>
        <h2 class="utility-margin-bottom-0">Loved by Food Lovers Across Indonesia</h2>
      </div>
      <div class="w-layout-grid grid-layout tablet-1-column grid-gap-md">
        <?php if(!empty($business['testimony1_title'])): ?>
        <div id="w-node-d2f4d7e7-d8f6-d905-36d7-ab346a00ccdc-6a00ccd3" class="card w-node-_4c7f9c84-7622-6bc9-45dd-cbedbdf0d8e3-76ee1c84">
          <div class="card-body">
            <h3 class="utility-margin-bottom-2rem"><?= htmlspecialchars($business['testimony1_title']); ?></h3>
            <p class="utility-margin-bottom-2rem"><?= $business['testimony1_content']; ?></p>
            <div class="flex-horizontal y-center flex-gap-xs utility-margin-top-auto">
              <?php if(!empty($business['testimony1_image'])): ?>
              <div class="avatar"><img width="1024" height="1024" alt="<?= htmlspecialchars($business['testimony1_name']); ?>" src="<?= base_url(); ?>uploads/<?= $business['testimony1_image']; ?>" loading="lazy" class="cover-image"></div>
              <?php endif; ?>
              <div class="paragraph-sm"><?= htmlspecialchars($business['testimony1_name']); ?></div>
            </div>
          </div>
        </div>
        <?php endif; ?>
        <?php if(!empty($business['testimony2_title'])): ?>
        <div id="w-node-_08690b9a-768a-3d7f-339d-d0e2d4b7ef00-6a00ccd3" class="card w-node-_4c7f9c84-7622-6bc9-45dd-cbedbdf0d8ee-76ee1c84">
          <div class="card-body">
            <h3 class="utility-margin-bottom-2rem"><?= htmlspecialchars($business['testimony2_title']); ?></h3>
            <p class="utility-margin-bottom-2rem"><?= $business['testimony2_content']; ?></p>
            <div class="flex-horizontal y-center flex-gap-xs utility-margin-top-auto">
              <?php if(!empty($business['testimony2_image'])): ?>
              <div class="avatar"><img width="1024" height="1024" alt="<?= htmlspecialchars($business['testimony2_name']); ?>" src="<?= base_url(); ?>uploads/<?= $business['testimony2_image']; ?>" loading="lazy" class="cover-image"></div>
              <?php endif; ?>
              <div class="paragraph-sm"><?= htmlspecialchars($business['testimony2_name']); ?></div>
            </div>
          </div>
        </div>
        <?php endif; ?>
        <?php if(!empty($business['testimony3_title'])): ?>
        <div id="w-node-b2a21099-61ef-ecea-1485-74e9f52f1ff3-6a00ccd3" class="card w-node-_4c7f9c84-7622-6bc9-45dd-cbedbdf0d8f9-76ee1c84">
          <div class="card-body">
            <h3 class="utility-margin-bottom-2rem"><?= htmlspecialchars($business['testimony3_title']); ?></h3>
            <p class="utility-margin-bottom-2rem"><?= $business['testimony3_content']; ?></p>
            <div class="flex-horizontal y-center flex-gap-xs utility-margin-top-auto">
              <?php if(!empty($business['testimony3_image'])): ?>
              <div class="avatar"><img width="1024" height="1024" alt="<?= htmlspecialchars($business['testimony3_name']); ?>" src="<?= base_url(); ?>uploads/<?= $business['testimony3_image']; ?>" loading="lazy" class="cover-image"></div>
              <?php endif; ?>
              <div class="paragraph-sm"><?= htmlspecialchars($business['testimony3_name']); ?></div>
            </div>
          </div>
        </div>
        <?php endif; ?>
        <?php if(!empty($business['testimony4_title'])): ?>
        <div id="w-node-d70e2d23-9d5a-2acc-4593-e0661b0cc83f-6a00ccd3" class="card w-node-_4c7f9c84-7622-6bc9-45dd-cbedbdf0d904-76ee1c84">
          <div class="card-body">
            <h3 class="utility-margin-bottom-2rem"><?= htmlspecialchars($business['testimony4_title']); ?></h3>
            <p class="utility-margin-bottom-2rem"><?= $business['testimony4_content']; ?></p>
            <div class="flex-horizontal y-center flex-gap-xs utility-margin-top-auto">
              <?php if(!empty($business['testimony4_image'])): ?>
              <div class="avatar"><img width="1024" height="1024" alt="<?= htmlspecialchars($business['testimony4_name']); ?>" src="<?= base_url(); ?>uploads/<?= $business['testimony4_image']; ?>" loading="lazy" class="cover-image"></div>
              <?php endif; ?>
              <div class="paragraph-sm"><?= htmlspecialchars($business['testimony4_name']); ?></div>
            </div>
          </div>
        </div>
        <?php endif; ?>
      </div>
    </div>
  </section>
  <?php endif ?>

  <section data-copilot="true" class="section secondary-section" style="padding-top: 0px;">
    <div class="container">
      <h2 class="eyebrow">Contact information</h2>
      <h2 class="h2-heading"><?= htmlspecialchars($business['contact_title']); ?></h2>
      <p class="subheading"><?= $business['contact_subtitle']; ?></p>
      <div class="w-layout-grid grid-layout tablet-1-column grid-gap-lg">
        <?php if(!empty($business['contact_image'])): ?>
        <img class="image cover-image utility-aspect-1x1 w-node-bb7a1ef8-284f-ddef-4ebb-5272ba398d6d-76ee1c84" src="<?= base_url(); ?>uploads/<?= $business['contact_image']; ?>" width="" height="" alt="<?= htmlspecialchars($business['name']); ?>" sizes="(max-width: 720px) 100vw, 720px" id="w-node-fb82df46-e6fd-d36d-c2da-e67d246d1bfd-4326ca96" loading="lazy">
        <?php endif; ?>
        <ul role="list" class="flex-horizontal flex-vertical y-space-between flex-gap-xs utility-margin-bottom-0 w-list-unstyled">

        <?php if(!empty($business['contact_phone'])): ?>
          <li class="utility-margin-bottom-0">
            <div class="icon-large utility-margin-bottom-1rem"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewbox="0 0 24 24" fill="none">
                <path d="M12.5 18.25C16.2279 18.25 19.25 15.2279 19.25 11.5C19.25 7.77208 16.2279 4.75 12.5 4.75C8.77208 4.75 5.75 7.77208 5.75 11.5C5.75 12.6007 6.01345 13.6398 6.48072 14.5578L5 19L9.71819 17.6519C10.5664 18.0361 11.5082 18.25 12.5 18.25Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"></path>
              </svg></div>
            <h4 class="h5-heading">Phone</h4>
            <p class="utility-text-secondary">Available during business hours.</p>
            <div><?= htmlspecialchars($business['contact_phone']); ?></div>
          </li>
          <?php endif; ?>
          
          <?php if(!empty($business['contact_email'])): ?>
          <li class="utility-margin-bottom-0">
            <div class="icon-large utility-margin-bottom-1rem"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewbox="0 0 24 24" fill="none">
                <path d="M5.25 6.75H18.75V17.25H5.25V6.75Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"></path>
                <path d="M5.25 6.75L12 12L18.75 6.75" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"></path>
              </svg></div>
            <h4 class="h5-heading">Email</h4>
            <p class="utility-text-secondary">We respond within one business day.</p>
            <div class="utility-display-block">
              <a href="mailto:<?= $business['contact_email']; ?>" class="text-link secondary-text-link"><?= htmlspecialchars($business['contact_email']); ?></a>
            </div>
          </li>
          <?php endif; ?>
          
          <?php if(!empty($business['contact_address'])): ?>
          <li>
            <div class="icon-large utility-margin-bottom-1rem"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewbox="0 0 24 24" fill="none">
                <path d="M12 13.25C13.7949 13.25 15.25 11.7949 15.25 10C15.25 8.20507 13.7949 6.75 12 6.75C10.2051 6.75 8.75 8.20507 8.75 10C8.75 11.7949 10.2051 13.25 12 13.25Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"></path>
                <path d="M19.25 10C19.25 15.25 12 20.25 12 20.25C12 20.25 4.75 15.25 4.75 10C4.75 6.27208 7.77208 3.25 12 3.25C16.2279 3.25 19.25 6.27208 19.25 10Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"></path>
              </svg></div>
            <h4 class="h5-heading">Location</h4>
            <?php if(!empty($business['contact_address'])): ?>
            <p class="utility-text-secondary"><?= $business['contact_address']; ?></p>
            <?php endif; ?>
          </li>
          <?php endif; ?>
        </ul>
      </div>
    </div>
  </section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

<script>
$(document).ready(function() {
  $('.popup-gallery').magnificPopup({
    type: 'image',
    gallery: {
      enabled: true,
      navigateByImgClick: true,
      preload: [0,1]
    },
    image: {
      tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
      titleSrc: function(item) {
        return item.el.attr('title') || '';
      }
    }
  });
});
</script>