Top 10 JavaScript Image Viewer Libraries
Image viewer libraries in JavaScript are designed to display images within web apps. They offer various features that are very time-consuming to do it yourself:
- Zooming: Allows users to zoom in and out of images for detailed viewing.
- Panning: Enables users to move around a zoomed-in image.
- Swiping: Supports touch gestures for navigating through image galleries.
- Fullscreen Mode: Expands images to fill the entire screen for better visibility.
- Lazy Loading: Loads images only when they enter the viewport, improving performance.
- Thumbnails: Provides small preview images for quick navigation.
- Annotations: Allows adding comments or notes on images.
- Lightbox Effect: Displays images in a modal window, dimming the background.
Most libraries are optimized for both mobile and desktop devices, ensuring a seamless experience across different screen sizes. Here’s a list of top 10:
-
PhotoSwipe (23.8k ⭐) — Popular image gallery and lightbox that works on any device and screen size. Created by Dmitry Semenov, it supports touch, zoom, and swipe gestures, offering a smooth, responsive interface. Highly customizable and lightweight, it enhances user experience with features like lazy loading and fullscreen viewing, ideal for galleries and portfolios.
-
Viewer.js (7.6k ⭐) — Another library for displaying images in a lightbox. It focuses on simplicity and minimalism, providing basic functionality for viewing images without additional features like zooming or social sharing.
-
lightGallery (6.3k ⭐) — Comes with more than 120 options to customize gallery without touching core code. Easily update the look and feel just by modifying the SCSS variables. You can mix all types of supported contents in a same gallery.
-
Lightbox2 (6.1k ⭐) — The original lightbox script. Lightbox is small javascript library used to overlay images on top of the current page. It’s a snap to setup and works on all modern browsers.
-
React Image Gallery (3.7k ⭐) — React component for building image galleries and carousels that support mobile swipe gestures, thumbnail navigation, fullscreen, custom rendered slides, responsive, and tons of optimization options.
-
OpenSeadragon (2.9k ⭐) — Specifically designed for high-resolution zoomable images and provides smooth panning and zooming capabilities. It’s ideal for large-scale images, such as maps, artwork, or scientific data.
-
Spotlight (1.6k ⭐) — Web’s most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies. Spotlight runs out of the box as no additional Javascript coding, HTML snippets, CSS resources, icons/assets, handling of dynamic content and event listener required.
-
VenoBox (663 ⭐) — Responsive Vanilla JS lightbox plugin, suitable for images, videos, iFrames, inline contents. The big difference compared to many others plugins is that VenoBox calculates the max width of the image displayed and preserves its height if is taller than the window.
-
blueimp Gallery (3.7k ⭐) — Touch-enabled, responsive and customizable image & video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. It features swipe, mouse and keyboard navigation, transition effects, slideshow functionality, fullscreen support and on-demand content loading.
-
Fancybox (700 ⭐) — The ultimate JavaScript lightbox alternative that sets the standard for premium user experience in multimedia display. Supports images, videos, maps, inline content, iframes and any other HTML content.
12 Best Open Source JavaScript Gallery and Lightbox Libraries
Table of Content
- 1- nanoGallery 2
- nanoGallery Features
- 2- PhotoViewer
- PhotoViewer features highlights
- 3- Galleria
- 4- Bilderrahmen
- Bilderrahmen feature highlights
- 5- The Photo Gallery
- The Photo Gallery Highlights
- 6- jBox
- 7- PicView
- 8- PhotoSwipe
- 9- Fullscreen Lightbox
- 10- lightGallery
- 11- SimpleLightbox
- 12- Material Photo Gallery
Photo presentation in websites is required especially by photographers. As we covered several types of self-hosted gallery solutions, it is time to offer custom ones for developers and coders that aid them to create creative fancy photo galleries.
In this list, you will find the best open-source JS gallery plugins, that you can include freely in your project.
1- nanoGallery 2
nanoGallery 2 is a JavaScript gallery library with a lightbox and several presentation options. It allows you to view your photos in mosaic presentation, grid view, filter your photos by tags, display videos and more.
nanoGallery script can be embedded in any web project, and it supports image thumbnails, animations, and hover/ touch effects. There are many JavaScript frameworks that can be used here.
nanoGallery Features
- Multiple gallery layouts: grid, justified, cascading, and mosaic.
- Blurred image preview during image download.
- Thumbnail hover/touch effects.
- Pagination with support of swipe gesture.
- Slider on last thumbnail.
- Multi-levels of albums and navigation bar.
- Define specific settings for first album level.
- Responsive and device friendly
- Sophisticated thumbnail display animation.
- Support titles and descriptions.
- Fully customizable thumbnail layout.
- Tools on thumbnails.
- Tag / Keyword filtering.
- Overlapping thumbnails.
- Selectable thumbnails with check-boxes.
2- PhotoViewer
The PhotoViewer library is a simple JavaScript library that enables you to display photos from Flicker or other sources in any JavaScript app.
The library supports full-screen mode, zooming, slideshow and comes with a caption that maintain the original link and the author's name.
PhotoViewer features highlights
- Vanilla JS
- Modal draggable
- Modal resizable
- Modal maximize
- Image movable
- Image zoomable
- Image rotatable
- Keyboard control
- Full-screen showing
- Multiple instances
- Browser support IE9+
- RTL support
3- Galleria
Galleria allows you to display photos, and videos from many sources without any code knowledge.
Currently, it supports Flicker, Vimeo, YouTube, and several other sources.
The script supports iPhone, iPad, and Android devices with its native-like swipe. It also offers multiple theme support.
4- Bilderrahmen
Lightweight vanilla-JS image lightbox for minimalists crafted with CSS3 and inline SVG icons for modern browsers.
Bilderrahmen feature highlights
- Pure JavaScript, no dependencies
- Multiple galleries per page supported
- Minimal look and clutter-free interface
- Image title support
- Responsive design
- Inline SVG buttons
- MP4 video support (HTML 5 video)
- Minified: js 4.7 KB css 4.2 KB total 8.9 KB
- gzipped: js 1.5 KB css 2.0 KB total 3.5 KB
5- The Photo Gallery
This project allows you to create a full-screen gallery with amazing presentations and fancy design for your photos. Unlike other projects, it supports HEIC and Raw image photos, and allows you to generate photos using remote API.
The Photo Gallery Highlights
- Full width photo display
- Lightbox built-in
- Directory Support
- Automatic image optimization courtesy of NextJS and team
- Generation of loading blurs
- Statically generated, the server just serves regular HTML + JS, once deployed to production, it's quick
- Automatic dynamic regeneration should you edit/remove/add photos
- Can handle hundreds (And thousands?) of images at a time
- Lazy loading as you scroll
- Full screen toggle
- Imagor integration
- Image sorting
6- jBox
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.
7- PicView
PicView is a fast picture viewer with compact UI that can be hidden. Features image effects, galleries, EXIF and more. The application can automatically adjust itself to your screen.
8- PhotoSwipe
The PhotoSwipe is a simple yet powerful JavaScript image gallery and lightbox library. You can extend its functionality using plugins. The project is released under the MIT License.
9- Fullscreen Lightbox
This is an easy to use but powerful plug-in for displaying various types of sources—such as images, HTML videos, or YouTube videos—in a clean overlying box. Supports, among others, captions, thumbnails, and zooming.
Present a single source or create a beautiful gallery with a stylish lightbox without jQuery.
The developers offer 3 editions: a Vanilla JavaScript, React, and Vue edition, which are ready to install and use without extensive configuration.
10- lightGallery
The lightGallery is a lightweight, modular, JavaScript image and video lightbox gallery plugin. It is available for React.js, Vue.js, Angular, and TypeScript.
You can mix all types of supported contents in a same gallery.
lightGallery will automatically find the content type from source and create appropriate slides:
- Images: Supports any kind of images including responsive images and WebP with fallback JPG support
- Videos: In-built support for YouTube, Vimeo, Wistia and all types of HTML5 video formats. Such as MP4, WebM, Ogg, etc.L
- Iframes: Easily embed external websites, display PDF files, Google Maps and more.
11- SimpleLightbox
The SimpleLightbox is a script that allows you to create touch-friendly responsive galleries. It supports WordPress and TYPO3 out of the box.
12- Material Photo Gallery
The Material Photo Gallery allows you to create a web image gallery that looks similar to Google Photos. It works smoothly on all modern browsers as Edge, Google Chrome, Firefox, and Safari.
浙公网安备 33010602011771号