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.
HTML:
- Semantic HTML5: Uses elements like
<header>
,<nav>
,<main>
,<figure>
,<figcaption>
for better structure and SEO. - Image Elements: Utilizes
<img>
tags withsrcset
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.
- Image Display: The gallery displays images in a grid format.
- Category Tabs: Users can click on tabs to filter images by category.
- 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.
- Download or clone the repository.
- Open
index.html
in your web browser.
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.