blueimp/Gallery
Gallery
Gallery is a JavaScript library for creating responsive media galleries. It provides touch-enabled lightbox views and carousels for displaying collections of images and videos across different web browsers.
The library distinguishes itself through a factory-based rendering system that supports diverse content types, including local video playback, external video embedding, and custom HTML content. It features an input-agnostic navigation controller that maps swipe gestures, mouse clicks, and keyboard presses to a single state machine.
The project covers high-level capabilities including automated slideshow playback with timed transitions, responsive image delivery based on screen resolution, and on-demand lazy loading of high-resolution media. It also includes a programmatic API for managing gallery state and a set of lifecycle hooks for executing custom logic during transitions.
Features
- Image Galleries - Provides responsive image and video galleries rendered via carousels and lightboxes across multiple web browsers.
- Media Galleries - Provides a responsive, touch-enabled media gallery for navigating collections of images and videos.
- Carousels and Sliders - Provides a customizable slider for images, videos, and HTML content with programmatic control over the active slide.
- Carousel Components - Ships a JavaScript carousel component for browsing media collections via swipe gestures and keyboard navigation.
- Input Control Mappings - Implements a navigation controller that maps swipe gestures, mouse clicks, and keyboard presses to a single state machine.
- Media Lightboxes - Ships a full-screen overlay for viewing media with keyboard navigation, swipe gestures, and transition effects.
- Viewport Fitting Calculations - Dynamically calculates media dimensions to ensure content fits within the browser viewport while maintaining aspect ratios.
- Video Embeddings - Integrates external video content from third-party platforms using video IDs and poster images.
- Video Playback Components - Provides a video rendering system that supports multiple format sources, poster images, and configurable playback modes.
- Media Render Factories - Uses a factory-based rendering system to generate different HTML structures for images, videos, and custom HTML content.
- Automated Slideshow Controllers - Features a system to automatically cycle through gallery items at set intervals with pause and resume capabilities.
- Slideshow Displays - Implements a timed sequence of images and videos that cycles automatically for a continuous viewing experience.
- Gallery Control APIs - Provides a programmatic API for managing the gallery state, controlling active slides, and manipulating the item collection.
- Lazy Media Loading - Optimizes performance by fetching high-resolution media files only when requested by the user.
- Navigation Input Controllers - Includes a navigation controller that maps swipe, mouse, and keyboard inputs to gallery transitions.
- Slide State Management - Maintains a central index and state object to track the active item and synchronize visual transitions.
- Cross-Browser Media Players - Provides an automated media player that ensures consistent slideshow playback across different web browser environments.
- Image Delivery Optimization - Optimizes loading speed and quality by serving different image sources based on screen resolution and size.
- Lazy Loading - Implements a lazy-loading mechanism that fetches high-resolution media files only when they are required for display.
Star history
How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.
