blueimp/gallery

★ 3,774JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((blueimp Gallery))
    Display modes
      Lightbox
      Carousel
      Slideshow
    Content types
      Images
      HTML5 video
      YouTube Vimeo
    Features
      Touch swipe
      Keyboard nav
      Fullscreen
    Setup
      CSS include
      HTML container
      jQuery optional

mindmap root((blueimp Gallery)) Display modes Lightbox Carousel Slideshow Content types Images HTML5 video YouTube Vimeo Features Touch swipe Keyboard nav Fullscreen Setup CSS include HTML container jQuery optional

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a touch-friendly photo gallery with swipe navigation to a website without using a heavy framework

USE CASE 2

Display YouTube and Vimeo videos in a lightbox overlay alongside regular images on a web page

USE CASE 3

Create an auto-playing slideshow that cycles through images on a landing or portfolio page

USE CASE 4

Integrate an image gallery into an existing jQuery site using data attributes and minimal JavaScript

Tech stack

JavaScriptCSSjQuery

Getting it running

Difficulty · easy Time to first run · 30min

Open source under a permissive license, free to use in personal and commercial projects.

In plain English

blueimp Gallery is a JavaScript library for displaying images and videos on a web page in a gallery, carousel, or lightbox format. A lightbox is the overlay that appears when you click a thumbnail and shows the full image on top of the page. A carousel shows images in a strip that you scroll through. blueimp Gallery handles both, and it works on both desktop and mobile devices. The library is touch-aware, so on a phone or tablet you can swipe left and right to move between items. It also responds to keyboard arrow keys, mouse clicks on previous and next controls, and supports fullscreen mode. A slideshow mode plays through the images automatically. Content is loaded on demand, meaning images and videos are only fetched when you actually navigate to them, which helps with performance on large galleries. Video support covers HTML5 video files as well as YouTube and Vimeo embeds. You configure video sources, preloading behavior, and controls through options you pass when initializing the gallery. Setting it up involves adding a CSS file, a small block of HTML that defines the gallery container and its navigation controls, and the gallery JavaScript file. You then create a list of links pointing to your images or videos. When a link in that list is clicked, the gallery opens and displays the content. There is also a jQuery plugin wrapper if you are already using jQuery on the page, which lets you initialize the gallery through jQuery's familiar syntax and HTML data attributes. The library has no required dependencies beyond a modern browser. It is distributed as an npm package and the source is available under an open source license. The README is extensive, covering all configuration options, API methods, event callbacks, and examples for each content type. The full README is longer than what was shown.

Copy-paste prompts

Prompt 1

Using blueimp Gallery, write the HTML and JavaScript to display a set of images in a lightbox when thumbnails are clicked.

Prompt 2

How do I configure blueimp Gallery to show a YouTube video inside the lightbox alongside regular photos?

Prompt 3

Set up blueimp Gallery as a jQuery plugin with auto-slideshow enabled and keyboard arrow navigation.

Prompt 4

I want a mobile-friendly photo portfolio using blueimp Gallery. Show me the required HTML structure, CSS include, and initialization code.

Open on GitHub → Explain another repo

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

Verify against the repo before relying on details.