Tutorials, Web Development

Create an Image Gallery with Flex Grid

Here’s a brief tutorial on how to go about building an image gallery with fancyBox3, Masonry, and Foundation’s Flex Grid. Here’s a demo link to see it working. Also here’s a link to grab the source 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.

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!