Skip to content

Priyanka-sahu04/image-gallery

Repository files navigation

Attractive Image Gallery

This is a simple and attractive image gallery built with HTML, CSS, and JavaScript. It showcases a collection of images categorized into different tabs for easy navigation.

Features

HTML:

  • Semantic HTML5: Uses elements like <header>, <nav>, <main>, <figure>, <figcaption> for better structure and SEO.
  • Image Elements: Utilizes <img> tags with srcset attribute for responsive image loading.
  • Data Attributes: Employs data-* attributes on images to store information like captions, categories, and alternative text.

CSS:

  • Flexbox: Uses Flexbox for flexible and responsive layout of the gallery grid and lightbox elements.
  • CSS Grid: Employs CSS Grid for structuring the overall page layout.
  • Transitions: Adds smooth transitions on hover effects for images and buttons.
  • Media Queries: Implements responsive design principles to adapt to different screen sizes.

JS:

  • DOM Manipulation: Selects and manipulates HTML elements dynamically for gallery functionality.
  • Event Listeners: Handles user interactions like clicks on thumbnails, navigation buttons, and closing the lightbox.
  • Image Lightbox: Creates a modal-like overlay to display larger versions of images when clicked.
  • Image Filtering: Implements dynamic filtering of images based on selected categories.
  • Keyboard Navigation: Allows users to navigate the lightbox using arrow keys.

Functionality

  1. Image Display: The gallery displays images in a grid format.
  2. Category Tabs: Users can click on tabs to filter images by category.
  3. Lightbox: Clicking on a thumbnail opens a lightbox to view the full-size image.
    • Navigation: Arrows within the lightbox allow browsing through the images.
    • Close Button: A close button dismisses the lightbox.
    • Description: Each image in the lightbox has a descriptive caption.

How to Run

  1. Download or clone the repository.
  2. Open index.html in your web browser.

Credits

This project was created as a learning exercise. Image credits are not explicitly provided in the code. If any images used are subject to copyright, please contact the repository owner for attribution or removal.