Lightbox

Small-thumbs gallery that has wide range of use across the website

Embedded videos included

Single Item

  <div class="lightbox portfolio-grid portfolio-button-drop portfolio-animation-std">
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="/img/portfolio/20.jpg" >
          <img src="/img/portfolio/small/20.jpg" alt="Portfolio Item 9">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-angle-double-right"></i></button>
        </div>
      </figure>
    </div>
  </div>
  <div class="lightbox portfolio-grid portfolio-button-drop portfolio-animation-std">
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="#" data-type='html' data-video='<div class="video-wrapper"><div class="video-inner"><iframe class="pswp-video" width="960" height="640" src="//www.youtube-nocookie.com/embed/M9ITWjBPwDA?rel=0" allowfullscreen></iframe></div></div>'>
          <img src="/img/portfolio/small/10.jpg" alt="Portfolio Youtube Video">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-youtube-play"></i></button>
        </div>
      </figure>
    </div>
  </div>
  <div class="lightbox portfolio-grid portfolio-button-drop portfolio-animation-std">
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="/img/portfolio/11.jpg" >
          <img src="/img/portfolio/small/11.jpg" alt="Portfolio Item 11">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-plus"></i></button>
        </div>
      </figure>
    </div>
  </div>
  <div class="lightbox portfolio-grid portfolio-button-drop portfolio-animation-std">
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="#" data-type='html' data-video='<div class="video-wrapper"><div class="video-inner"><iframe class="pswp-video" width="960" height="640" src="//player.vimeo.com/video/183181421" allowfullscreen></iframe></div></div>'>
          <img src="/img/portfolio/small/12.jpg" alt="Portfolio Vimeo Video">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-play"></i></button>
        </div>
      </figure>
    </div>
  </div>
  <div class="lightbox portfolio-grid portfolio-button-drop portfolio-animation-std">
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="/img/portfolio/13.jpg" >
          <img src="/img/portfolio/small/13.jpg" alt="Portfolio Item 13">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-plus"></i></button>
        </div>
      </figure>
    </div>
  </div>
  <div class="lightbox portfolio-grid portfolio-button-drop portfolio-animation-std">
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="/img/portfolio/14.jpg" >
          <img src="/img/portfolio/small/14.jpg" alt="Portfolio Item 14">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-plus"></i></button>
        </div>
      </figure>
    </div>
  </div>
  <div class="lightbox portfolio-grid portfolio-button-drop portfolio-animation-std">
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="/img/portfolio/pc.jpg" >
          <img src="/img/portfolio/small/pc.jpg" alt="Portfolio Item 15">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-plus"></i></button>
        </div>
      </figure>
    </div>
  </div>
  <div class="lightbox portfolio-grid portfolio-button-drop portfolio-animation-std">
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="/img/portfolio/2.jpg" >
          <img src="/img/portfolio/small/2.jpg" alt="Portfolio Item 16">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-angle-double-right"></i></button>
        </div>
      </figure>
    </div>
  </div>
  <div class="lightbox portfolio-grid portfolio-button-drop portfolio-animation-std">
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="#" data-type='html' data-video='<div class="video-wrapper"><div class="video-inner"><iframe class="pswp-video" src="//www.dailymotion.com/embed/video/x4to82q" allowfullscreen></iframe></div></div>'>
          <img src="/img/portfolio/small/pc2.jpg" alt="Portfolio Item 17">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-play"></i></button>
        </div>
      </figure>
    </div>
  </div>
  <div class="lightbox portfolio-grid portfolio-button-drop portfolio-animation-std">
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="/img/portfolio/24.jpg" >
          <img src="/img/portfolio/small/24.jpg" alt="Portfolio Item 18">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-plus"></i></button>
        </div>
      </figure>
    </div>
  </div>

Gallery

<div class="lightbox portfolio-grid portfolio-button-drop portfolio-animation-std">
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="/img/portfolio/1.jpg" >
          <img src="/img/portfolio/small/1.jpg" alt="Portfolio Item 1">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-plus"></i></button>
        </div>
      </figure>
    </div>
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="/img/portfolio/camera.jpg" >
          <img src="/img/portfolio/small/camera.jpg" alt="Portfolio Item 2">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-angle-double-right"></i></button>
        </div>
      </figure>
    </div>
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="/img/portfolio/3.jpg" >
          <img src="/img/portfolio/small/3.jpg" alt="Portfolio Item 3">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-plus"></i></button>
        </div>
      </figure>
    </div>
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="/img/portfolio/4.jpg" >
          <img src="/img/portfolio/small/4.jpg" alt="Portfolio Item 4">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-plus"></i></button>
        </div>
      </figure>
    </div>
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="/img/portfolio/5.jpg" >
          <img src="/img/portfolio/small/5.jpg" alt="Portfolio Item 5">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-plus"></i></button>
        </div>
      </figure>
    </div>
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="/img/portfolio/6.jpg" >
          <img src="/img/portfolio/small/6.jpg" alt="Portfolio Item 6">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-plus"></i></button>
        </div>
      </figure>
    </div>
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="/img/portfolio/7.jpg" >
          <img src="/img/portfolio/small/7.jpg" alt="Portfolio Item 6">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-angle-double-right"></i></button>
        </div>
      </figure>
    </div>
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="/img/portfolio/8.jpg" >
          <img src="/img/portfolio/small/8.jpg" alt="Portfolio Item 8">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-plus"></i></button>
        </div>
      </figure>
    </div>
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="/img/portfolio/20.jpg" >
          <img src="/img/portfolio/small/20.jpg" alt="Portfolio Item 9">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-angle-double-right"></i></button>
        </div>
      </figure>
    </div>
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="#" data-type='html' data-video='<div class="video-wrapper"><div class="video-inner"><iframe class="pswp-video" width="960" height="640" src="//www.youtube-nocookie.com/embed/M9ITWjBPwDA?rel=0" allowfullscreen></iframe></div></div>'>
          <img src="/img/portfolio/small/10.jpg" alt="Portfolio Youtube Video">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-youtube-play"></i></button>
        </div>
      </figure>
    </div>
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="/img/portfolio/11.jpg" >
          <img src="/img/portfolio/small/11.jpg" alt="Portfolio Item 11">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-plus"></i></button>
        </div>
      </figure>
    </div>
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="#" data-type='html' data-video='<div class="video-wrapper"><div class="video-inner"><iframe class="pswp-video" width="960" height="640" src="//player.vimeo.com/video/183181421" allowfullscreen></iframe></div></div>'>
          <img src="/img/portfolio/small/12.jpg" alt="Portfolio Vimeo Video">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-play"></i></button>
        </div>
      </figure>
    </div>
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="/img/portfolio/13.jpg" >
          <img src="/img/portfolio/small/13.jpg" alt="Portfolio Item 13">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-plus"></i></button>
        </div>
      </figure>
    </div>
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="/img/portfolio/14.jpg" >
          <img src="/img/portfolio/small/14.jpg" alt="Portfolio Item 14">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-plus"></i></button>
        </div>
      </figure>
    </div>
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="/img/portfolio/pc.jpg" >
          <img src="/img/portfolio/small/pc.jpg" alt="Portfolio Item 15">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-plus"></i></button>
        </div>
      </figure>
    </div>
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="/img/portfolio/2.jpg" >
          <img src="/img/portfolio/small/2.jpg" alt="Portfolio Item 16">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-angle-double-right"></i></button>
        </div>
      </figure>
    </div>
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="#" data-type='html' data-video='<div class="video-wrapper"><div class="video-inner"><iframe class="pswp-video" src="//www.dailymotion.com/embed/video/x4to82q" allowfullscreen></iframe></div></div>'>
          <img src="/img/portfolio/small/pc2.jpg" alt="Portfolio Item 17">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-play"></i></button>
        </div>
      </figure>
    </div>
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="/img/portfolio/24.jpg" >
          <img src="/img/portfolio/small/24.jpg" alt="Portfolio Item 18">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-plus"></i></button>
        </div>
      </figure>
    </div>
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="/img/portfolio/16.jpg" >
          <img src="/img/portfolio/small/16.jpg" alt="Portfolio Item 19">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-plus"></i></button>
        </div>
      </figure>
    </div>
    <div class="gallery-cell">
      <figure class="gallery-item">
        <a href="/img/portfolio/17.jpg" >
          <img src="/img/portfolio/small/17.jpg" alt="Portfolio Item 20">
        </a>
        <div class="figcaption">
          <button class="button button-borderless trigger-image" aria-hidden="true"><i class="fa fa-plus"></i></button>
        </div>
      </figure>
    </div>
</div>

⌃