Search and display images using Pixabay API with features like pagination, image cards, and more.
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
Pixify - Image Search is a web application that allows users to search and display images using the Pixabay API. The project includes features such as HTTP requests, image cards, pagination, SimpleLightbox library integration, smooth page scrolling, and even infinite scrolling.
Note
The project is set up for automatic deployment to GitHub Pages using GitHub Actions by JamesIves (GitHub Pages Deployment Action). The deployment action is configured to push production-ready code into the gh-pages branch.
The search form in the HTML document allows users to enter a search string. Upon submitting the form, an HTTP request is made to the Pixabay API using the specified query parameters. If no images match the query, a notification is displayed.
The gallery displays image cards, each containing a small image, image information, and statistics. The gallery content is cleared when searching with a new keyword to avoid confusing results.
Pixabay API supports pagination, and the project includes a "Load more" button. With each request, the page parameter is increased, and when searching with a new keyword, the page is reset. If the user reaches the end of the collection, a notification is displayed.
Large images are displayed using the SimpleLightbox library, which is integrated into the project. Each image card is wrapped in a link, and the library's refresh() method is called after adding a new group of image cards.
Smooth page scrolling is implemented after each request and rendering of the next group of images.
In addition to the "Load More" button, the project enables infinite loading of images when scrolling the page.
Note: The "Load More" button is accessible during input search, while Infinite Scrolling is available for popular list searches.
This section provides information on prerequisites and installation steps to set up the Pixify - Image Search project locally.
Make sure you have the following installed:
- Clone the repository
git clone https://github.com/Valik3201/pixify.git
- Navigate to the project directory
cd goit-js-hw-11 - Install dependencies
npm install
Pixify - Image Search provides a user-friendly interface for searching and displaying images using the Pixabay API. Follow the steps below to explore and make the most of the application:
- Open the web application in your browser.
- Enter a search query in the provided text field.
- Click the "Search" button or press Enter to initiate the search.
- Explore the gallery to view image cards, each containing a small image, information, and statistics.
- Click on an image card to view the larger image using the SimpleLightbox library.
- Scroll through the gallery and enjoy smooth page scrolling after each request.
- Use the "Load more" button or experience infinite scrolling for additional images.
- Keep an eye on notifications for search results, the end of the collection, or any issues encountered.
Feel free to experiment with different search queries and enjoy discovering a vast collection of images with Pixify!
-
Inception Phase:
- Project Planning
- Research and Design
- Documentation
-
Development Phase:
- Frontend Development
- Integration with Pixabay API
- Image Cards and Pagination
-
Documentation and Testing:
- Documentation and Testing
-
Post-Launch and Ongoing Development:
- SimpleLightbox Integration
- Notifications and User Feedback
- Optimization and Performance
- Infinite Scrolling
Contributions are welcome! If you have suggestions or improvements, feel free to fork the project, create a new branch, make your changes, and submit a pull request.
- Fork the Project
- Create your Feature Branch
git checkout -b feature/NewFeature` - Commit your Changes
`git commit -m 'Add some NewFeature'` - Push to the Branch
`git push origin feature/NewFeature` - Open a Pull Request
Thank you to Pixabay for providing the API.