sachinchoolur/lightgallery

★ 7,014TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((lightGallery))
    What it does
      Fullscreen gallery overlay
      Keyboard and swipe nav
      Deep linking URLs
    Media types
      Images and responsive images
      YouTube and Vimeo
      HTML5 video
      iframes
    Plugins
      Zoom and rotate
      Thumbnails strip
      Autoplay
      Social sharing
    Frameworks
      Plain HTML
      React
      Vue
      Angular

mindmap root((lightGallery)) What it does Fullscreen gallery overlay Keyboard and swipe nav Deep linking URLs Media types Images and responsive images YouTube and Vimeo HTML5 video iframes Plugins Zoom and rotate Thumbnails strip Autoplay Social sharing Frameworks Plain HTML React Vue Angular

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a fullscreen photo gallery to a portfolio or blog where clicking a thumbnail opens a lightbox overlay.

USE CASE 2

Embed YouTube and Vimeo video players as a fullscreen overlay on a landing page without navigating away.

USE CASE 3

Build a product image gallery with pinch-to-zoom and swipe gestures for a mobile e-commerce site.

USE CASE 4

Create a shareable photo gallery where each image gets its own deep-linked URL via browser history.

Tech stack

TypeScriptJavaScriptCSS3ReactVueAngular

Getting it running

Difficulty · easy Time to first run · 30min

Commercial projects with closed source require purchasing a paid license before going live.

Free for open-source projects released under GPL v3, commercial projects with private source code must purchase a paid license.

In plain English

LightGallery is a JavaScript library for adding an image and video gallery overlay to a web page. When a user clicks a thumbnail or image link, the gallery opens fullscreen and lets them navigate through the collection with keyboard, mouse, swipe, or touch gestures. This kind of overlay is called a lightbox, and lightGallery is one of the more feature-complete implementations of it. The library has no required dependencies and works with plain HTML, or with React, Vue, and Angular through dedicated wrappers. You install it via npm or include it from a CDN, add a CSS stylesheet, and call one JavaScript function pointing at the container element that holds your image links. From there, plugins extend the behavior: there are built-in plugins for thumbnails, zoom, video playback, social sharing, autoplay, keyboard navigation, and others. You include only the plugins you want. On the media side, it supports static images, responsive images, YouTube and Vimeo videos, Wistia videos, HTML5 video files, and HTML iframes. Images can be zoomed with pinch-to-zoom on touch screens or mouse scroll on desktops, rotated, and flipped. The gallery also supports deep linking through the browser history API, so specific gallery items can be shared as URLs. The visual transitions use CSS3 hardware-accelerated animations, with more than twenty transition styles available. The gallery is designed to work on touch devices including phones and tablets, with swipe-to-close support and drag navigation. Licensing has two tracks. For open-source projects released under the GNU GPL v3, the library can be used at no cost. For commercial projects where source code is kept private, a paid commercial license is required. The license key is passed as a configuration option when initializing the gallery.

Copy-paste prompts

Prompt 1

Using lightGallery, add a fullscreen image gallery to my React photo portfolio that supports pinch-to-zoom and swipe navigation on mobile.

Prompt 2

I want to embed YouTube videos in a lightGallery overlay on my Vue.js site. Show me the full setup including the video plugin configuration.

Prompt 3

Using lightGallery with just a CDN script tag and no build step, add a thumbnail strip and autoplay to a static HTML photo page.

Prompt 4

My lightGallery gallery needs deep-linked URLs so I can share individual photos. Show me how to enable the hash plugin and test it.

Open on GitHub → Explain another repo

← sachinchoolur on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.