Hey there, fellow coders! Vishnu Rajoria here from CSLAB Computer Institute in Sikar. As a full-stack developer and coding instructor, I love breaking down complex concepts into bite-sized, easy-to-digest pieces. Today, we’re going to walk through creating an interactive image gallery using HTML, CSS, and JavaScript. Let’s dive in!
What We’re Building
Imagine a webpage where images appear one by one, and you can click on them to select your favorites. Sounds cool, right? That’s exactly what we’re going to build! Here’s what our gallery will do:
- Display a grid of images
- Animate images to appear one at a time
- Allow users to select images by clicking on them
- Keep track of how many images are selected
The Building Blocks
We’ll use three main technologies:
- HTML: This is our structure. It’s like the skeleton of our webpage.
- CSS: This is our style. It makes everything look pretty.
- JavaScript: This is our functionality. It makes things interactive and animated.
See the Pen Element selector and Changing styles usign JS by CSLAB Software Development and Computer Training (@CSLAB) on CodePen.
HTML CODE :
<!-- Counter for selected images -->
<div class="selected-counter">
Images Selected
<br>
<div class="count">0</div>
</div>
<!-- Image gallery container -->
<div class="gallery">
<!-- Multiple image elements -->
<img src="https://images.unsplash.com/photo-1425082661705-1834bfd09dca?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8YW5pbWFsfGVufDB8fDB8fHww" alt="Animal image">
<img src="https://images.unsplash.com/photo-1470093851219-69951fcbb533?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGFuaW1hbHxlbnwwfHwwfHx8MA%3D%3D" alt="">
<img src="https://images.unsplash.com/photo-1457140072488-87e5ffde2d77?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fGFuaW1hbHxlbnwwfHwwfHx8MA%3D%3D" alt="">
<img src="https://images.unsplash.com/photo-1503066211613-c17ebc9daef0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzB8fGFuaW1hbHxlbnwwfHwwfHx8MA%3D%3D" alt="">
<img src="https://images.unsplash.com/photo-1425082661705-1834bfd09dca?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8YW5pbWFsfGVufDB8fDB8fHww" alt="Animal image">
<img src="https://images.unsplash.com/photo-1470093851219-69951fcbb533?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGFuaW1hbHxlbnwwfHwwfHx8MA%3D%3D" alt="">
<img src="https://images.unsplash.com/photo-1457140072488-87e5ffde2d77?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fGFuaW1hbHxlbnwwfHwwfHx8MA%3D%3D" alt="">
<img src="https://images.unsplash.com/photo-1503066211613-c17ebc9daef0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzB8fGFuaW1hbHxlbnwwfHwwfHx8MA%3D%3D" alt="">
<img src="https://images.unsplash.com/photo-1425082661705-1834bfd09dca?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8YW5pbWFsfGVufDB8fDB8fHww" alt="Animal image">
<img src="https://images.unsplash.com/photo-1470093851219-69951fcbb533?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGFuaW1hbHxlbnwwfHwwfHx8MA%3D%3D" alt="">
<img src="https://images.unsplash.com/photo-1457140072488-87e5ffde2d77?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fGFuaW1hbHxlbnwwfHwwfHx8MA%3D%3D" alt="">
<img src="https://images.unsplash.com/photo-1503066211613-c17ebc9daef0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzB8fGFuaW1hbHxlbnwwfHwwfHx8MA%3D%3D" alt="">
<img src="https://images.unsplash.com/photo-1425082661705-1834bfd09dca?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8YW5pbWFsfGVufDB8fDB8fHww" alt="Animal image">
<img src="https://images.unsplash.com/photo-1470093851219-69951fcbb533?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGFuaW1hbHxlbnwwfHwwfHx8MA%3D%3D" alt="">
<img src="https://images.unsplash.com/photo-1457140072488-87e5ffde2d77?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fGFuaW1hbHxlbnwwfHwwfHx8MA%3D%3D" alt="">
<img src="https://images.unsplash.com/photo-1503066211613-c17ebc9daef0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzB8fGFuaW1hbHxlbnwwfHwwfHx8MA%3D%3D" alt="">
<img src="https://images.unsplash.com/photo-1425082661705-1834bfd09dca?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8YW5pbWFsfGVufDB8fDB8fHww" alt="Animal image">
<img src="https://images.unsplash.com/photo-1470093851219-69951fcbb533?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGFuaW1hbHxlbnwwfHwwfHx8MA%3D%3D" alt="">
<img src="https://images.unsplash.com/photo-1457140072488-87e5ffde2d77?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fGFuaW1hbHxlbnwwfHwwfHx8MA%3D%3D" alt="">
<img src="https://images.unsplash.com/photo-1503066211613-c17ebc9daef0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzB8fGFuaW1hbHxlbnwwfHwwfHx8MA%3D%3D" alt="">
<img src="https://images.unsplash.com/photo-1425082661705-1834bfd09dca?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8YW5pbWFsfGVufDB8fDB8fHww" alt="Animal image">
<img src="https://images.unsplash.com/photo-1470093851219-69951fcbb533?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGFuaW1hbHxlbnwwfHwwfHx8MA%3D%3D" alt="">
<img src="https://images.unsplash.com/photo-1457140072488-87e5ffde2d77?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fGFuaW1hbHxlbnwwfHwwfHx8MA%3D%3D" alt="">
<img src="https://images.unsplash.com/photo-1503066211613-c17ebc9daef0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzB8fGFuaW1hbHxlbnwwfHwwfHx8MA%3D%3D" alt="">
</div>CSS CODE :
/* Apply transition to all elements */
* {
transition: all 0.3s;
}
/* Initially hide gallery images */
.gallery img {
transform: scale(0);
opacity: 0;
}
/* Styles for the selected image counter */
.selected-counter {
background: black;
color: #fff;
position: fixed;
padding: 10px;
left: 0px;
z-index: 999;
border-radius: 0px 10px 10px 0px;
font-family: arial;
text-align: center;
}
/* Style for the count number */
.count {
font-size: 50px;
}JAVASCRIPT CODE :
// Get the count element and initialize the selected image count
let countElement = document.querySelector(".selected-counter .count");
let selectedImageCount = 0;
// Get the gallery element and style it
let galleryElement = document.querySelector(".gallery");
galleryElement.style.border = "5px solid rgba(0,0,0,0.1)";
galleryElement.style.display = "flex";
galleryElement.style.padding = "10px";
galleryElement.style.boxShadow = "0px 10px 20px rgba(0,0,0,0.3)";
galleryElement.style.flexWrap = "wrap";
galleryElement.style.gap = "10px";
galleryElement.style.justifyContent = "center";
// Get all gallery images
let galleryImages = document.querySelectorAll(".gallery img");
// Loop through all images to style and add click event
for (let i = 0; i < galleryImages.length; i++) {
galleryImages[i].style.width = "200px";
galleryImages[i].style.border = "10px solid transparent";
// Add click event to each image
galleryImages[i].addEventListener("click", () => {
console.log("clicked on the image at index : " + i);
selectedImageCount++;
countElement.innerText = selectedImageCount;
galleryImages[i].style.border = "10px solid black";
});
}
// Animation to reveal images one by one
let count = 0;
let animationTimer = setInterval(() => {
console.log(count);
galleryImages[count].style.transform = "scale(1)";
galleryImages[count].style.opacity = "1";
count++;
if (count == galleryImages.length) {
clearInterval(animationTimer);
}
}, 300);Key Features Explained
Let’s break down the main parts of our code:
1. The Image Counter
- We create a fixed div at the top-left of the screen.
- It shows how many images you’ve selected.
- Every time you click an image, this number goes up.
2. The Image Gallery
- We use a flex container to create a nice, responsive grid of images.
- Each image starts hidden (scale 0 and opacity 0).
- Images fade in one by one when the page loads.
3. Clicking Images
- When you click an image, its border turns black.
- The counter at the top updates.
- This is all handled by JavaScript event listeners.
The Magic Behind the Scenes
Here’s where it gets exciting! We use JavaScript to:
- Style our gallery dynamically
- Add click events to each image
- Create a cool animation effect
The animation is the real star of the show. We use setInterval to reveal images one by one, creating a captivating loading effect.
Why This Matters
Building interactive elements like this gallery teaches us crucial web development skills:
- DOM manipulation
- Event handling
- CSS transitions
- Timing functions in JavaScript
Plus, it’s just plain fun to watch those images pop up one after another!
Wrapping Up
And there you have it – a simple yet engaging image gallery. The best part? You can easily customize this to fit your needs. Change the colors, adjust the timing, add more interactions – the possibilities are endless!
Remember, coding is all about experimentation. Don’t be afraid to tweak the code and see what happens. That’s how we learn and grow as developers.
Happy coding, everyone! 👨💻✨
Vishnu Rajoria is a Full Stack Developer and Coding Instructor at CSLAB Computer Institute in Sikar. He’s passionate about making coding accessible and fun for everyone.
