Module 55 : Creating an Interactive Photo Gallery
Introduction
An interactive photo gallery allows users to browse images dynamically, apply filters, zoom in/out, and navigate through images with effects. This module will guide you through building a responsive photo gallery using HTML, CSS, and JavaScript. We will cover:
Designing a responsive layout
Adding interactivity with JavaScript
Implementing features like lightbox, filters, and animations
By the end of this module, you will have a fully functional interactive gallery that you can customize for different projects.
1. Setting Up the Project
Step 1: Folder Structure
Create a project folder named interactive-gallery and organize it as follows:
interactive-gallery/
│── index.html
│── style.css
│── script.js
│── images/
│── assets/
index.html: Structure of the gallery
style.css: Styling the gallery
script.js: Adding interactivity
images/: Storing images
2. Building the Gallery Layout
Step 2: HTML Structure
Create an index.html file and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Photo Gallery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Interactive Photo Gallery</h1>
<!-- Filter Buttons -->
<div class="filter-buttons">
<button data-filter="all">Show All</button>
<button data-filter="nature">Nature</button>
<button data-filter="architecture">Architecture</button>
<button data-filter="people">People</button>
</div>
<!-- Gallery -->
<div class="gallery">
<div class="gallery-item" data-category="nature">
<img src="images/nature1.jpg" alt="Nature">
</div>
<div class="gallery-item" data-category="architecture">
<img src="images/architecture1.jpg" alt="Architecture">
</div>
<div class="gallery-item" data-category="people">
<img src="images/people1.jpg" alt="People">
</div>
<!-- Add more images with different categories -->
</div>
<!-- Lightbox (Popup) -->
<div class="lightbox">
<span class="close">×</span>
<img class="lightbox-image" src="" alt="">
</div>
<script src="script.js"></script>
</body>
</html>
Explanation
We create a filter section to sort images.
The gallery section contains multiple images wrapped inside div.gallery-item. Each image has a data-category attribute.
A lightbox (popup) is added to display images in full size.
3. Styling the Gallery
Step 3: CSS Styling
Create a style.css file and add the following styles:
body {
font-family: Arial, sans-serif;
text-align: center;
background: #f0f0f0;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
}
.filter-buttons {
margin-bottom: 20px;
}
.filter-buttons button {
padding: 10px 15px;
margin: 5px;
border: none;
cursor: pointer;
background: #007BFF;
color: white;
border-radius: 5px;
}
.filter-buttons button:hover {
background: #0056b3;
}
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.gallery-item {
width: 200px;
height: 150px;
overflow: hidden;
cursor: pointer;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.gallery-item img:hover {
transform: scale(1.1);
}
/* Lightbox Styles */
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
}
.lightbox img {
max-width: 90%;
max-height: 90%;
border: 5px solid white;
}
.close {
position: absolute;
top: 20px;
right: 40px;
font-size: 30px;
color: white;
cursor: pointer;
}
Explanation
Button styles for the filters.
Gallery grid layout using flexbox.
Lightbox (popup) styling to display images in a larger view.
4. Adding Interactivity
Step 4: JavaScript for Filtering and Lightbox
Create a script.js file and add the following JavaScript code:
// Filtering Gallery Items
const filterButtons = document.querySelectorAll('.filter-buttons button');
const galleryItems = document.querySelectorAll('.gallery-item');
filterButtons.forEach(button => {
button.addEventListener('click', () => {
const filter = button.getAttribute('data-filter');
galleryItems.forEach(item => {
if (filter === "all" || item.getAttribute('data-category') === filter) {
item.style.display = "block";
} else {
item.style.display = "none";
}
});
});
});
// Lightbox Feature
const lightbox = document.querySelector('.lightbox');
const lightboxImage = document.querySelector('.lightbox-image');
const closeLightbox = document.querySelector('.close');
galleryItems.forEach(item => {
item.addEventListener('click', () => {
lightbox.style.display = "flex";
lightboxImage.src = item.querySelector('img').src;
});
});
closeLightbox.addEventListener('click', () => {
lightbox.style.display = "none";
});
Explanation
Filtering: Clicking a button shows only images of that category.
Lightbox Feature: Clicking an image enlarges it in a popup.
5. Practical Exercise
Exercise 1: Add More Categories
Add new images to the gallery.
Create new buttons for categories like "Animals" or "Landscapes".
Modify script.js to support the new categories.
Exercise 2: Add a Slideshow Feature
Modify the lightbox to have "Next" and "Previous" buttons.
Clicking "Next" should show the next image in the gallery.
Clicking "Previous" should show the previous image.
6. Guidance & Further Improvement
Guidance Counselor Tips
For Beginners: Focus on HTML & CSS first, then move to JavaScript.
For Advanced Users: Add animations using CSS or JavaScript libraries like GSAP.
For Professionals: Integrate a backend (PHP/Node.js) to allow users to upload images dynamically.
Conclusion
By following this module, you have created a fully interactive photo gallery with filtering and lightbox features. You can enhance it further by adding image captions, animations, or a backend system.
No comments:
Post a Comment