How to Make a Baguette Image Box

Visuals play a massive role in your website, especially if your website's success weighs heavily on images. However, images are some of the biggest culprits in slowing down a website. 

Luckily for web developers, there are a number of options that showcase websites without making your site sluggish. One of the most effective ways to display those images are with Baguette boxes. The codebase is lightweight. The lightbox styles are easy to initiate for developers on a variety of skills. Web devs can install it via Node, and the image boxes are written in pure JavaScript which ultimately helps your page load faster and gets people to your content quickly. 

Lightbox plugins are all, generally, pretty big in their code base. However, this one is significantly more streamlined. Want to tap into another easy way to show off your handiwork? This tutorial will walk you through it: 

HTML

You can structure your photo gallery/repeater with some simple bootstrap. Give your overriding container the class of "tz-gallery" or any other name that will be targeted by the javascript. By giving each link the class of "lightbox", you're able to enable each link to display the "data-echo" property in the lightbox modal:

CSS

We're big fans of lightweight modules, and the CSS below shows that. You really only need one class to format your display images:

JS

The best part of Baguette Box? With the master include, you can initialize the lightboxes by simply targeting the overriding container:

Want to see how this functionality could look on your site before you invest the time in coding? Try it out first in the JSFiddle below! Don't forget to adjust the browser window at a variety of sizes to see exactly how the website responds in mobile format!