Creating an Elegant Wallpaper Gallery with HTML, CSS, and JavaScript
Creating an Elegant Wallpaper Gallery with HTML, CSS, and JavaScript
In the world of web development, creating visually engaging and interactive galleries is a fantastic way to showcase images. Whether you're displaying personal photos or a collection of wallpapers, a well-designed gallery can enhance user experience and provide a sleek interface for exploring content. In this post, we'll walk through building a stylish and functional wallpaper gallery using HTML, CSS, and JavaScript.
This tutorial will cover the following:
- HTML Structure: Building the basic framework of the gallery.
- CSS Styling: Adding styles to make the gallery visually appealing.
- JavaScript Functionality: Implementing dynamic behavior for image loading and modal interactions.
Getting Started with HTML
We'll begin by setting up the HTML structure. This forms the foundation of our gallery and includes elements for searching images, displaying them, and a modal for viewing them in detail.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wallpaper Gallery</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="search-container">
<input type="text" id="search-input" class="search-input" placeholder="Search for photos...">
<button id="search-button" class="search-button">Search</button>
</div>
<div id="gallery"></div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<img id="modal-img" src="" alt="Modal Image">
<a id="download-button" class="download-button" download>Download Image</a>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
Styling the Gallery with CSS
Next, we add styles to enhance the appearance of the gallery. Our CSS will ensure that the gallery is responsive, the images look great, and the modal is user-friendly.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
#gallery {
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.image-container {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 20px;
cursor: pointer;
transition: transform 0.3s ease;
width: 300px;
height: 200px;
}
.image-container:hover {
transform: translateY(-5px);
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.image-container:hover img {
transform: scale(1.05);
}
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
margin: 5% auto;
background-color: #fefefe;
border: 1px solid #888;
border-radius: 10px;
width: 80%;
padding: 20px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.download-button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
margin-top: 10px;
display: block;
}
.search-container {
text-align: center;
margin-bottom: 20px;
}
.search-input {
padding: 10px;
width: 300px;
border-radius: 5px;
border: 1px solid #ccc;
}
.search-button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
margin-left: 10px;
}
Implementing JavaScript Functionality
Finally, we'll add JavaScript to make our gallery dynamic. This script will handle image fetching, searching, and modal interactions.
let page = 1;
let loading = false;
function fetchImages(query = '') {
if (loading) return;
loading = true;
let url = `https://picsum.photos/v2/list?page=${page}&limit=20`;
if (query) {
url = `https://picsum.photos/v2/list?page=${page}&limit=20&q=${query}`;
}
fetch(url)
.then(response => response.json())
.then(data => {
const gallery = document.getElementById('gallery');
gallery.innerHTML = '';
data.forEach(image => {
const imageContainer = document.createElement('div');
imageContainer.className = 'image-container';
const img = document.createElement('img');
img.src = `${image.download_url}?blur=3&grayscale`;
img.alt = image.author;
img.addEventListener('click', function() {
const modalImg = document.getElementById('modal-img');
modalImg.src = image.download_url;
document.getElementById('myModal').style.display = 'block';
document.getElementById('download-button').href = `${image.download_url}?download`;
});
imageContainer.appendChild(img);
gallery.appendChild(imageContainer);
});
loading = false;
page++;
})
.catch(error => {
console.error('Error fetching images:', error);
loading = false;
});
}
document.getElementById('search-button').addEventListener('click', function() {
const query = document.getElementById('search-input').value;
fetchImages(query);
});
document.querySelector('.close').addEventListener('click', function() {
document.getElementById('myModal').style.display = 'none';
});
window.addEventListener('click', function(event) {
const modal = document.getElementById('myModal');
if (event.target === modal) {
modal.style.display = 'none';
}
});
fetchImages();
Breaking Down the JavaScript Code
The script begins by setting up global variables for pagination and loading status. It then defines a function fetchImages that retrieves images from the Lorem Picsum API and updates the gallery.
The fetchImages function constructs a URL based on the current page and search query, fetches the image data, and appends the images to the gallery. Each image container is equipped with an event listener that displays the image in a modal when clicked.
Additional functions handle user interactions with the search button and the modal, ensuring a smooth user experience.
Conclusion
This guide has walked you through creating a functional and elegant wallpaper gallery. By combining HTML, CSS, and JavaScript, you can build a dynamic web application that showcases images in an engaging way. With features like search functionality, image viewing in a modal, and download options, this gallery serves as a solid foundation for more advanced projects.
Experiment with the code, customize it to fit your needs, and explore further enhancements. Happy coding!
Join the conversation