This repository contains code for a responsive image gallery built using CSS flexbox and JavaScript. The gallery is designed to adapt to different screen sizes and provide an optimal viewing experience on both desktop and mobile devices.
- Responsive layout: The image gallery adjusts its size and arrangement based on the available screen space, ensuring a visually pleasing experience across devices.
- CSS Flexbox: The gallery layout is built using CSS flexbox, allowing for flexible and fluid positioning of the images.
- Dynamic loading: The gallery supports dynamic loading of images, making it easy to add or remove images without modifying the HTML markup.
- Lightbox functionality: Clicking on an image opens a lightbox overlay with a larger version of the image, providing a focused view.
To use the responsive image gallery in your project, follow these steps:
-
Clone the repository to your local machine:
git clone https://github.com/your-username/responsive-image-gallery.git
-
Open the
index.html
file in your preferred web browser. You should see the image gallery with some sample images. -
Customize the gallery:
- Add or remove images: Open the
index.html
file and modify the HTML markup within the<ul class="gallery">
element. Each<li>
element represents an image item and can be customized by adding or removing thedata-src
attribute for the image source and adding or modifying the<span class="caption">
element for the image caption. - Customize styling: The visual appearance of the gallery can be modified by editing the
styles.css
file. Feel free to modify the colors, sizes, and other CSS properties to match your project's design.
- Add or remove images: Open the
Contributions to this project are welcome! If you have any ideas, improvements, or bug fixes, please submit a pull request. Make sure to follow the existing code style and provide clear and concise commit messages.
This project is licensed under the MIT License. Feel free to use and modify the code as per your needs.
This image gallery was inspired by various open-source projects and tutorials available online. The following resources were particularly helpful:
- CSS-Tricks: A Complete Guide to Flexbox
- W3Schools: CSS Flexbox
- SimpleLightbox: A lightweight JavaScript lightbox library
If you have any questions, suggestions, or feedback, please feel free to contact the project maintainer:
Email: aryahrmth@gmail.com GitHub: arun