RPeraltaJr
3/1/2017 - 7:56 PM

Lightbox Video Gallery (with navigating arrows)

// Magnific Popup
$('#employees').magnificPopup({
    delegate: 'a', // child items selector, by clicking on it popup will open
    type: 'iframe',
    // other options
    gallery:{
        enabled:true
    }
});
<!-- Magnific Popup -->
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css'>

<?php
  $employees = array(
      array(
          "name"      => "John Doe",
          "position"  => "Manager Operations Accounting",
          "vimeo_url" => "https://vimeo.com/VIDEO_ID"
      ),
      array(
          "name"      => "Jane Doe",
          "position"  => "Director National Sales",
          "vimeo_url" => "https://vimeo.com/VIDEO_ID"
      ),
      array(
          "name"      => "Bob Smith",
          "position"  => "eCommerce Developer I",
          "vimeo_url" => "https://vimeo.com/VIDEO_ID"
      )
  );
?>


<section id="employees" class="employees">
  <div class="container-fluid">
    <div class="col-lg-12">
      <h2 class="title text-white">Meet Our People</h2>
      <div class="people-carousel">

        <?php $x = 0; foreach($employees as $employee) { $x++; ?>
          <div class="item item--<?php echo $x; ?>">
            <div class="box">
              <div class="image">
                <a href="<?php echo $meet_employee['vimeo_url']; ?>" type="button">
                  <img src="assets/build/img/icon-playbtn.png" alt="Play button" />
                </a>
              </div>
            </div>
            <div class="title">
              <h4><?php echo $employee['name']; ?></h4>
              <p><?php echo $employee['position']; ?></p>
            </div>
          </div>
        <?php } ?>

      </div>
    </div>
  </div> <!-- /.container-fluid -->
</section>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Magnific Popup -->
<script src='https://cdn.rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js'></script>