Gallery

JavaScript gallery. Categorize, sort, and filter a responsive grid of items

Default Gallery

2 columns

<div class="lightbox simple-gallery portfolio-grid portfolio-animation-std">
  <div class="simple-gallery-grid clearfix">
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-2-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-2-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-2-col double-width">
      <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"></div>
      </figure>
    </div>
  </div>
</div>

3 columns

<div class="lightbox simple-gallery portfolio-grid portfolio-animation-std">
  <div class="simple-gallery-grid clearfix">
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-3-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-3-col double-width">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-3-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-3-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-3-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-3-col ">
      <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"></div>
      </figure>
    </div>
  </div>
</div>

4 columns

<div class="lightbox simple-gallery portfolio-grid portfolio-animation-std">
  <div class="simple-gallery-grid clearfix">
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-4-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-4-col double-width">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-4-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-4-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-4-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-4-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-4-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-4-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-4-col ">
      <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"></div>
      </figure>
    </div>
  </div>
</div>

5 columns

<div class="lightbox simple-gallery portfolio-grid portfolio-animation-std">
  <div class="simple-gallery-grid clearfix">
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-5-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-5-col double-width">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-5-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-5-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-5-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-5-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-5-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-5-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-5-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-5-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-5-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-5-col ">
      <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"></div>
      </figure>
    </div>
  </div>
</div>

6 columns

<div class="lightbox simple-gallery portfolio-grid portfolio-animation-std">
  <div class="simple-gallery-grid clearfix">
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col double-width">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col ">
      <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"></div>
      </figure>
    </div>
  </div>
</div>

Square Images

2 columns

<div class="lightbox simple-gallery portfolio-grid portfolio-animation-std">
  <div class="simple-gallery-grid clearfix">
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-2-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-2-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-2-col cell-square double-width">
      <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"></div>
      </figure>
    </div>
  </div>
</div>

3 columns

<div class="lightbox simple-gallery portfolio-grid portfolio-animation-std">
  <div class="simple-gallery-grid clearfix">
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-3-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-3-col cell-square double-width">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-3-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-3-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-3-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-3-col cell-square ">
      <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"></div>
      </figure>
    </div>
  </div>
</div>

4 columns

<div class="lightbox simple-gallery portfolio-grid portfolio-animation-std">
  <div class="simple-gallery-grid clearfix">
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-4-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-4-col cell-square double-width">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-4-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-4-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-4-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-4-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-4-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-4-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-4-col cell-square ">
      <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"></div>
      </figure>
    </div>
  </div>
</div>

5 columns

<div class="lightbox simple-gallery portfolio-grid portfolio-animation-std">
  <div class="simple-gallery-grid clearfix">
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-5-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-5-col cell-square double-width">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-5-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-5-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-5-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-5-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-5-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-5-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-5-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-5-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-5-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-5-col cell-square ">
      <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"></div>
      </figure>
    </div>
  </div>
</div>

6 columns

<div class="lightbox simple-gallery portfolio-grid portfolio-animation-std">
  <div class="simple-gallery-grid clearfix">
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col cell-square double-width">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col cell-square ">
      <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"></div>
      </figure>
    </div>
    <div class="gallery-cell simple-gallery-cell simple-gallery-cell-6-col cell-square ">
      <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"></div>
      </figure>
    </div>
  </div>
</div>