Welcome to the Masonry Image Gallery, an interactive web application that offers a dynamic collection of cat and dog images. Designed with a responsive masonry layout, the gallery ensures that images are displayed in an organized and visually engaging manner across all devices. Users can easily browse through the images and click on any one to view it in an enlarged lightbox preview, providing an immersive and enjoyable viewing experience.

This project is crafted using modern web technologies, including HTML for structure, CSS for styling, and JavaScript for dynamic functionality. Images are fetched in real-time from external APIs, ensuring fresh and diverse content every time. The intuitive interface, combined with interactive features, makes the gallery both easy to navigate and aesthetically pleasing.

You may also check this simple HTML, CSS and JavaScript project:

• Netflix Login Page
• Loan Calculator App
• Focus Timer App
• Discount Sale Popup
• Bugtong-bugtong: Pinoy Riddle

Features:

• Dynamic Image Fetching: Automatically fetches random cat and dog images from external APIs.
• Masonry Layout: Utilizes CSS columns to display images in a staggered, Pinterest-style grid.
• Interactive Lightbox: Clicking on an image opens it in a lightbox for an enhanced view.
• Responsive Design: Ensures that the gallery adapts to various screen sizes.
• Smooth Hover Effects: Images gently scale up on hover, adding a subtle interactive effect.

Technologies Used:

• HTML: For structuring the content of the gallery.
• CSS: For designing the layout, styling, and responsive behavior.
• JavaScript: For fetching images from APIs, dynamically adding them to the gallery, and managing the lightbox interactions.
• APIs:
  • The Cat API for fetching random cat images.
  • Dog CEO API for fetching random dog images.

How to Use:

1. Load the Page: Upon opening the webpage, the gallery will automatically fetch and display a collection of cat and dog images.
2. View Images: Browse through the masonry-style gallery layout.
3. Image Preview: Click on any image to open it in a lightbox for a larger view.
4. Close Preview: Click the close icon ("X") to exit the lightbox and return to the gallery view.

Sample Screenshots of the Project

Landing Page

Lightbox View

How to Run?

• Download the provided source code zip file.
• Extract the downloaded zip file.
• Open the html file and you are now ready to go!

Video Demonstration for Installation/Setup:

Conclusion:

In conclusion, the Masonry Image Gallery showcases the effective use of HTML, CSS, and JavaScript to create an engaging and responsive image viewing experience. By integrating real-time image fetching and an interactive lightbox feature, the gallery offers a seamless and enjoyable way to explore cat and dog images. This project highlights the power of modern web development techniques in building dynamic and user-friendly applications.

That's it! I hope this "Masonry Image Gallery Using HTML, CSS and JavaScript" will assist you on your  programming journey, providing value to your current and upcoming projects.

For additional tutorials and free source codes, explore our website.

Enjoy Coding :>>