How to Make a Baguette Image Box


Who said the French get the monopoly on baguettes? Where they might excel in carbs, your website can excel in appetizing visual displays that make visitors want to consume your content even more.

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!

Author

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.