🖼️ Fexels - Free Royalty-Free Image Gallery

A dynamic, fast, and intuitive online gallery featuring a vast collection of royalty-free images with powerful search functionality and one-click download capabilities.

Live Demo • Repository • GitHub Profile

---

📑 Table of Contents

• About
• Features
• Technology Stack
• Project Structure
• Installation & Setup
• Usage Guide
• API Integration
• File Descriptions
• Browser Support
• Contributing
• Author

---

📖 About

Fexels is a dynamic online gallery web application that brings users a seamless experience for discovering, previewing, and downloading royalty-free images. With an intuitive search bar, responsive design, and instant download features, Fexels makes it easy to find and access high-quality images by theme or keyword.

Built with vanilla HTML, CSS, and JavaScript, Fexels leverages the powerful Pexels API to deliver a constantly updated collection of premium-quality royalty-free images directly to users.

---

✨ Features

• 🔍 Advanced Search - Real-time search functionality to find images by theme, keyword, or photographer
• 📱 Responsive Design - Fully optimized for desktop, tablet, and mobile devices
• 🖼️ Dynamic Gallery - Masonry/column layout that adapts to screen size
• 👁️ Image Preview - Lightbox modal with full-size image preview and photographer credits
• ⬇️ One-Click Download - Instant download of high-quality royalty-free images
• ♾️ Infinite Scroll - "Load More" pagination for seamless browsing
• ⚡ Fast Performance - Lightweight vanilla JavaScript with no unnecessary dependencies
• 🎨 Beautiful UI - Modern, clean interface with smooth animations and transitions
• 🏷️ Photographer Attribution - Display photographer information for each image
• 📡 Real-time API Integration - Access to Pexels' constantly updated image database

---

🛠️ Technology Stack

Technology	Purpose	Details
HTML5	Structure	Semantic markup, accessibility, PWA manifest support
CSS3	Styling	Responsive design, animations, flexbox, media queries, custom fonts
JavaScript (Vanilla)	Functionality	DOM manipulation, API calls, event handling, no frameworks
Pexels API	Image Data	RESTful API for fetching royalty-free images
Font Awesome 6.7.2	Icons	Icon library for UI elements
Poppins Font	Typography	Modern, clean typeface via @font-face

Language Composition:

• CSS: 61.3%
• JavaScript: 24.6%
• HTML: 14.1%

---

📂 Project Structure

fexels/
├── index.html                    # Main HTML file
├── css/
│   ├── style.css               # Main stylesheet
│   ├── fonts.css               # Custom font definitions
│   ├── font-awesome-6.7.2/     # Font Awesome icons library
│   └── fonts-poppins/          # Poppins font files
├── js/
│   └── script.js               # Main JavaScript functionality
├── images/
│   ├── favicon-images/         # Favicon assets
│   ├── search-img.jpg          # Hero section image
│   ├── search-img_01.jpeg      # Alternative hero images
│   ├── search-img_02.jpeg
│   └── search-img_03.jpeg
├── .gitignore                  # Git ignore rules
└── fexels.site.webmanifest     # PWA manifest file

---

🚀 Installation & Setup

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• Internet connection for API calls
• No server setup required - runs entirely on the client-side

Steps

1. Clone the Repository

   git clone https://github.com/fhermas22/fexels.git
   cd fexels

2. Open in Browser

   • Option 1: Double-click index.html to open locally
   • Option 2: Use a local server (recommended):

     # Using Python 3
     python -m http.server 8000
     
     # Using Python 2
     python -m SimpleHTTPServer 8000
     
     # Using Node.js (with http-server)
     npx http-server

3. Access the Application

   • Local: http://localhost:8000
   • Live: https://fhermas22.github.io/fexels-images-gallery/

---

📖 Usage Guide

Browsing Images

1. The gallery loads with 15 curated images by default on page load
2. Hover over any image to see the photographer's name and download button
3. Click "Load More" button to fetch the next set of images
4. The gallery uses lazy-loading for optimal performance

Searching Images

1. Type your search query in the search box (e.g., "nature", "mountain", "city")
2. Press Enter to execute the search
3. The gallery reloads with images matching your search term
4. Continue clicking "Load More" to explore more results
5. Clear the search box and press Enter to return to curated images

Previewing Images

1. Click on any image to open the lightbox modal
2. View the full-resolution image with photographer information
3. The image is displayed at maximum size while maintaining aspect ratio
4. Click the Download Button (blue icon) to download
5. Click the Close Button (gray icon) or outside the modal to close

Downloading Images

1. Open image preview by clicking on the image
2. Click the Download Button in the lightbox header
3. The image downloads to your default downloads folder
4. Filename is the timestamp of download (milliseconds)
5. All images are royalty-free and safe to use

---

🌐 API Integration

Pexels API

• Base URL: https://api.pexels.com/v1/
• Authentication: Bearer token in Authorization header
• Rate Limit: 200 requests per hour for free tier

API Endpoints Used

1. Curated Images (Homepage)

GET https://api.pexels.com/v1/curated?page={page}&per_page={perPage}
Headers: { Authorization: API_KEY }
Response: { photos: [...], page, per_page, total_results, next_page }

2. Search Images

GET https://api.pexels.com/v1/search?query={searchTerm}&page={page}&per_page={perPage}
Headers: { Authorization: API_KEY }
Response: { photos: [...], page, per_page, total_results, next_page }

Image Object Structure

{
  id: 123456,
  photographer: "John Doe",
  avg_color: "#FF5733",
  src: {
    original: "https://...",
    large2x: "https://...",  // Used in Fexels
    large: "https://...",
    medium: "https://...",
    small: "https://...",
    portrait: "https://...",
    landscape: "https://...",
    tiny: "https://..."
  }
}

---

📄 File Descriptions

index.html

• Purpose: Main HTML structure
• Sections:
  • Lightbox modal for image preview
  • Search section with hero image and search input
  • Gallery section with image list and load-more button
• Key Elements:
  • Favicon support (multiple sizes)
  • PWA manifest link
  • CSS and JS imports
  • Semantic HTML5 structure

css/style.css

• Size: ~5KB
• Features:
  • Responsive grid layout using CSS columns
  • Hover effects and smooth transitions
  • Masonry gallery design
  • Media queries for mobile (768px, 425px, 320px)
  • Lightbox styling with backdrop blur effect
  • Button and input styling
  • Gradient overlays for image details
• Color Scheme:
  • Primary: #6a5cff (purple)
  • Secondary: #6c757d (gray)
  • Text: White, #333, #8d8d8d

js/script.js

• Size: ~3.8KB
• Core Functions:
  • getImages(apiURL) - Fetches images from Pexels API
  • generateHTML(images) - Dynamically creates gallery cards
  • loadMoreImages() - Handles pagination
  • loadSearchImages(e) - Handles search with Enter key
  • showLightBox(name, img) - Opens image preview modal
  • hideLightbox() - Closes image preview
  • downloadImg(imgURL) - Downloads image to device
• Variables:
  • apiKey - Pexels API authentication token
  • perPage - Number of images per request (15)
  • currentPage - Current pagination page
  • searchTerm - Current search query
• Event Listeners:
  • Load More button click
  • Search input key press (Enter)
  • Close button click
  • Download button click

css/fonts.css

• Purpose: Custom Poppins font definitions
• Weights Included: Thin, ExtraLight, Light, Normal, Medium, SemiBold, Bold, ExtraBold, Black
• Styles: Normal and Italic
• Format: WOFF and WOFF2 for best browser support

fexels.site.webmanifest

• Purpose: Progressive Web App configuration
• Features:
  • App name: "Fexels Images Gallery"
  • Standalone display mode
  • App icons (192px, 512px)
  • Theme and background colors

---

🌍 Browser Support

Browser	Support	Notes
Chrome	✅ Full	Latest versions
Firefox	✅ Full	Latest versions
Safari	✅ Full	Latest versions
Edge	✅ Full	Latest versions
Opera	✅ Full	Latest versions
IE 11	⚠️ Limited	No fetch API or async/await

Requirements:

• ES6 JavaScript support (Fetch API, Arrow Functions)
• CSS3 support (Flexbox, Media Queries, Transforms)
• Modern DOM APIs

---

🤝 Contributing

Contributions are welcome! To contribute to Fexels:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request with detailed description

Development Guidelines

• Use vanilla JavaScript (no frameworks)
• Keep code clean and well-commented
• Maintain responsive design compatibility
• Test across different screen sizes
• Follow existing code style

---

👨‍💻 Author

Created by @fhermas22

Project Repository: github.com/fhermas22/fexels

Live Demo: fexels-images-gallery

---

📜 License

This project is open source and available under the MIT License. Feel free to use, modify, and distribute this project.

---

⭐ If you found this project helpful, please consider giving it a star!

Made with ❤️ by @fhermas22