Recently I decided that I needed to build a page on this site where I could put up all the new artwork I’ve recently been making during my Twitch streams.

I knew right off the bat that I wanted it to have some sort of lightbox functionality where a user can click an image thumbnail and view a larger version. I also knew that I needed it to be compatible with Foundation’s Flex Grid.

So after doing a few hours worth of digging and experimenting I came up with a neat solution that works exactly how I needed it to. Below you’ll find a step-by-step guide on how to implement this into your Foundation site as well as a link to view a working demo and a link to download the demo files.

Also as an added bonus, I included a brief explanation on how to get a dynamic image gallery powered by WordPress and the Gallery field in Advanced Custom Fields, which is exactly how its running on this page right here.

Step 1

First you need to set up your basic row and column structure.

<div class="row">
 <div class="large-4 medium-6 small-12 columns">
  <a href="image1.jpg"><img src="thumb1.jpg" /></a>
 </div>
 <div class="large-4 medium-6 small-12 columns">
  <a href="image2.jpg"><img src="thumb2.jpg" /></a>
 </div>
...
</div>

Step 2

Next thing you need to do is download Masonry and add the ID of “masonry-container” to the “row” div.


<div class="row" id="masonry-container">
 <div class="large-4 medium-6 small-12 columns">
  <a href="image1.jpg"><img src="thumb1.jpg" /></a>
 </div>
 <div class="large-4 medium-6 small-12 columns">
  <a href="image2.jpg"><img src="thumb2.jpg" /></a>
 </div>
...
</div>

Install Masonry and add this line of code under the foundation.js line in your footer.


<script src="path/to/masonry.pkgd.min.js"></script>

Now you need to initialize it and input the specific selector it needs to look for in order to work properly. So add this under the line you just added.


<script>
$(document).foundation();
 var container = document.querySelector('#masonry-container');
 var msnry = new Masonry( container, {
 itemSelector: '#masonry-container .columns'
});
</script>

Step 3

With that code in place you should now have a working version of Masonry. Next thing to do is install the lightbox using fancyBox3. Installation is incredibly easy and only requires you to copy and paste two lines of code under the foundation.js line in your footer.


<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>

Final Step

The final step you need to take is to add in data-fancybox="gallery" to all the anchor tags in your grid.


<a data-fancybox="gallery" href="image1.jpg"><img src="thumb1.jpg"></a>

Now putting all the code together you should end up with something like this


<div class="row" id="masonry-container">
 <div class="large-4 medium-6 small-12 columns">
  <a data-fancybox="gallery" href="image1.jpg"><img src="thumb1.jpg" /></a>
 </div>
 <div class="large-4 medium-6 small-12 columns">
  <a data-fancybox="gallery" href="image2.jpg"><img src="thumb2.jpg" /></a>
 </div>
 <div class="large-4 medium-6 small-12 columns">
  <a data-fancybox="gallery" href="image3.jpg"><img src="thumb3.jpg" /></a>
 </div>
 <div class="large-4 medium-6 small-12 columns">
  <a data-fancybox="gallery" href="image4.jpg"><img src="thumb4.jpg" /></a>
 </div>
 <div class="large-4 medium-6 small-12 columns">
  <a data-fancybox="gallery" href="image5.jpg"><img src="thumb5.jpg" /></a>
 </div>
 <div class="large-4 medium-6 small-12 columns">
  <a data-fancybox="gallery" href="image6.jpg"><img src="thumb6.jpg" /></a>
 </div>
</div>

BONUS

If you’re an avid WordPress user like I am and want to be able to put together a dynamic page where you can upload photos to a gallery, here’s a brief explanation on how to do that with the Advanced Custom Fields plugin.

What you’re going to want to do is grab a copy of ACF Pro if you don’t have one already. Reason being is because the Pro version has the Gallery plugin built in.

Once you have it installed, create a new Field Group and name it whatever you want. In this case I’ve named it Image Gallery

Then add a new field and select the Gallery option and then just select the location in which you want it to show up and hit save.

Next thing to do is add in the images you want to show up in your gallery then hit save.

Last part is to add this piece of code to whereever you want the gallery to show up using the same code we used above to achieve the masonry and lightbox effect.


<?php $images = get_field('image_gallery'); if( $images ): ?>
 <div id=“masonry-container” class=“row” style="padding: 0;">
  <?php foreach( $images as $image ): ?>
   <div class="large-4 medium-6 small-12 columns">
    <a data-fancybox="gallery" href="<?php echo $image['url']; ?>">
     <img src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>" />
    </a>
   </div>
  <?php endforeach; ?>
  </div>
<?php endif; ?>

That should be it! I wrote this tutorial in the hopes that it would help at least one person out. I ended up figuring all of this out on my own and wish there was a clear tutorial written that I could follow along when I needed to build this functionality for my site. So here’s my contribution to you all! Feel free to reach out over Twitter @raulativity or just comment here if you have any questions or concerns.

Thanks!