baguetteBox.js is a JavaScript library that allows you to easily implement a Lightbox-style gallery display.
In this article, we will explain in detail how to easily create an attractive gallery page using baguetteBox.js.
Introduction: What is baguetteBox.js?
baguetteBox.js is a library that enables you to easily implement a responsive, touch-friendly Lightbox gallery.
Compared to the original Lightbox, it is lightweight yet feature-rich, and supports modern browsers.
CSS Setup: Styling the Gallery
First, set up the CSS required to properly display baguetteBox.js by loading the baguetteBox.css file.
Below is an example of basic styling targeting the .gallery class.
With this CSS, images will be aligned with proper size and margins, and a shadow effect will appear on hover.
<link rel="stylesheet" href="baguetteBox.css">
<style>
* {
padding: 0;
margin: 0;
}
body {
font-weight: bold;
font-size: 20px;
text-align: center;
}
h1{
text-align: center;
font-size: 20px;
padding: 20px 0 40px 0;
line-height: 1.8em;
}
.gallery img {
height: 100%;
}
.gallery a {
width: 240px;
height: 180px;
display: inline-block;
overflow: hidden;
margin: 4px 6px;
box-shadow: 0 0 4px -1px #000;
}
</style>
HTML Structure: Creating the Gallery Layout
Next, define the basic structure of the gallery using HTML.
In this sample, three images (1.jpg, 2.jpg, 3.jpg) are placed in the gallery display area.
<h1>Displaying a Lightbox-style gallery page using baguetteBox.js.<br>Click on the thumbnails below.</h1>
<div class="baguetteBoxOne gallery">
<a href="1.jpg" data-caption="Image 1"><img src="1.jpg" alt="Image 1"></a>
<a href="2.jpg" data-caption="Image 2"><img src="2.jpg" alt="Image 2"></a>
<a href="3.jpg" data-caption="Image 3"><img src="3.jpg" alt="Image 3"></a>
</div>
JavaScript Setup: Using baguetteBox.js Features
Next, load the baguetteBox.js file.
Use JavaScript to apply baguetteBox.js functionality to the gallery.
Once the page finishes loading, initialize the baguetteBox.
<script src="baguetteBox.js" async></script>
<script>
window.onload = function() {
baguetteBox.run('.baguetteBoxOne');
};
</script>
Demo Page: Displaying a Lightbox-style Gallery Using baguetteBox.js
You can check the demo of the created gallery page from the link below.
Demo page displaying a Lightbox-style gallery using baguetteBox.js
Source: baguetteBox.js
For more detailed information and additional configuration options, please refer to the official documentation below.
Conclusion
This concludes the explanation on how to easily create a Lightbox-style gallery page using baguetteBox.js.
By implementing this method, you can add an attractive gallery to your own website or blog.
*If you reuse this content, please do so at your own risk.
Do not reuse the Google Analytics tag within the head tag of the demo page.
