arun-h / image-gallery

Responsive image gallery using CSS flexbox and js

Responsive Image Gallery using CSS Flexbox and JavaScript

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.

Features

• 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.

Getting Started

To use the responsive image gallery in your project, follow these steps:

1. Clone the repository to your local machine:

   git clone https://github.com/your-username/responsive-image-gallery.git
   

2. Open the index.html file in your preferred web browser. You should see the image gallery with some sample images.

3. 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 the data-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.

Contributing

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.

License

This project is licensed under the MIT License. Feel free to use and modify the code as per your needs.

Acknowledgments

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

Contact

If you have any questions, suggestions, or feedback, please feel free to contact the project maintainer:

Email: [email protected] GitHub: arun