Photo Gallery Project

Project Description

In this project, you'll create a photo gallery webpage that showcases a collection of images with captions. This is a great way to practice working with the HTML <img> element and its attributes, while creating an engaging visual experience.

Getting Started

Step 1: Set Up Your Project

Create a new directory for your project and set up the basic file structure. You'll need an index.html file and an images folder to store your photos.

Step 2: Create the Structure

Start with a basic HTML5 document structure. Include proper meta tags and a title for your gallery.

Step 3: Add Content

Add your images to the gallery, making sure to include descriptive alt text and captions for each image.

Step 4: Enhance Your Project

Consider adding features like image thumbnails, a grid layout, or hover effects to make your gallery more engaging.

Step 2: Add Your Gallery Header

Inside the body element, add a header section with your gallery title and introduction:

Step 3: Create Your Gallery Structure

Set up the main gallery section using semantic HTML:

Step 4: Add Individual Gallery Items

Add your images with captions to the gallery:

Project Example

Here's what your completed photo gallery might look like:

Challenge Yourself

Once you've completed the basic requirements, try these challenges:

Submit Your Project

Once you've completed your photo gallery, you can:

• Save it to your computer for future reference
• Share it with friends and family to showcase your photos
• Deploy it to a free hosting service like GitHub Pages
• Continue to expand it with more photos and features

Search Your Gallery

JavaScript Guidance

To add interactivity to your photo gallery, you can implement a search functionality using JavaScript. This will allow users to filter images based on their captions. Here's how you can do it:

const searchQuery = ref('');

const images = ref([
	{ id: 1, src: 'image1.jpg', alt: 'Image 1', caption: 'Beautiful Landscape' },
	{ id: 2, src: 'image2.jpg', alt: 'Image 2', caption: 'City Skyline' },
	{ id: 3, src: 'image3.jpg', alt: 'Image 3', caption: 'Mountain View' },
	{ id: 4, src: 'image4.jpg', alt: 'Image 4', caption: 'Ocean Breeze' },
	{ id: 5, src: 'image5.jpg', alt: 'Image 5', caption: 'Forest Path' },
	{ id: 6, src: 'image6.jpg', alt: 'Image 6', caption: 'Desert Dunes' },
]);

const filteredImages = computed(() => {
	return images.value.filter(image =>
		image.caption.toLowerCase().includes(searchQuery.value.toLowerCase())
	);
});
				

In this example, we use a ref to store the search query and an array of image objects. The computed property filteredImages dynamically filters the images based on the search query, updating the displayed images in real-time.

Your Photo Gallery

Beautiful Mountain Landscape

City Skyline

Setting Up Your Images

Adding Search Functionality

To make your gallery searchable, you'll need to:

const images = [
	{
		id: 1,
		src: 'images/mountain-sunset.jpg',
		alt: 'Beautiful mountain landscape at sunset',
		caption: 'Mountain Sunset',
		tags: ['nature', 'mountains', 'sunset']
	},
	// Add more images here
];
				

<div class="search-section">
	<input 
		type="text"
		placeholder="Search images..."
		id="gallery-search"
	>
</div>
				

const searchInput = document.getElementById('gallery-search');
const galleryContainer = document.querySelector('.gallery');

searchInput.addEventListener('input', (e) => {
	const searchTerm = e.target.value.toLowerCase();
	
	images.forEach(image => {
		const galleryItem = document.getElementById(`gallery-item-${image.id}`);
		const matchesSearch = image.caption.toLowerCase().includes(searchTerm) ||
							 image.tags.some(tag => tag.toLowerCase().includes(searchTerm));
		
		galleryItem.style.display = matchesSearch ? 'block' : 'none';
	});
});
				

Common Issues & Solutions