Yashh-patel/Image-Gallery

Image Gallery

Welcome to the Image Gallery project! This project showcases a beautiful, responsive image gallery with dynamic image transitions, click-to-view feature, and slideshow functionality, built using HTML, CSS, and JavaScript.

Table of Contents

• Features
• Technologies
• Setup
• Usage
• Project Structure
• License

Features

• Image Showcase: Clickable thumbnails to view images in a larger, featured display.
• Slideshow: Automatic slideshow transitions through the images.
• Keyboard Navigation: Navigate images using left and right arrow keys.
• Smooth Transitions: Fade-in and scale effects enhance the user experience.

Technologies

• HTML5
• CSS3
• JavaScript (Vanilla)

Setup

1. Clone the Repository:

   git clone https://github.com/Yashh-patel/Image-Gallery.git

2. Navigate to the Project Directory:

   cd Image-Gallery

3. Open in Browser: Open index.html in your browser to view the gallery.

Usage

1. Thumbnail Click: Click on any thumbnail to view the image in the featured display.
2. Slideshow: The slideshow starts automatically, changing images every 5 seconds.
3. Keyboard Navigation: Use the arrow keys for manual navigation.

Project Structure

• index.html: HTML structure of the gallery.
• css/gallery.css: Styling for the gallery.
• js/gallery.js: JavaScript logic for dynamic image updates.
• images/: Contains images for thumbnails and featured display.

License

This project is open-source under the MIT License.