Related Snippets

54 in Media & Galleries category
5–10 of 54
GLightbox Mixed Media Lightbox (Image, Video and HTML)

GLightbox Mixed Media Lightbox (Image, Video and HTML)

PhotoSwipe Full-Screen Gallery with Captions

PhotoSwipe Full-Screen Gallery with Captions

Interact.js Pinch-Zoom Image

Interact.js Pinch-Zoom Image

Babylon.js Orbit Camera Showcase

Babylon.js Orbit Camera Showcase

Babylon.js Spinning Product Viewer

Babylon.js Spinning Product Viewer

Bootstrap Masonry Image Gallery

Bootstrap Masonry Image Gallery

GLightbox Mixed Media Lightbox — Free JS Snippet

GLightbox Mixed Media Lightbox (Image, Video and HTML) · Media · Plain HTML, CSS & JS · Live preview

CategoryMedia & Galleries
TagsCanvasDrag & DropDark ModeAccessibilityMedia Player

What's included

Features

One lightbox mixing image, video and inline HTML slides
Elements array with a typed object per slide
openAt(index) so any custom thumbnail can launch the lightbox
Interactive inline HTML slide with working buttons
Videos never autoplay without a click
Touch swipe, pinch zoom, drag-to-close and keyboard navigation
Looping navigation and click-outside-to-close
Custom badge and play-icon thumbnails, no dependencies

About this UI Snippet

GLightbox Mixed Media Lightbox — HTML, CSS & JavaScript

Screenshot of the GLightbox Mixed Media Lightbox (Image, Video and HTML) snippet rendered live

Most lightbox demos show a wall of photos. Real content is messier: a product launch page has screenshots, a walkthrough video and a block of release notes, and forcing each into its own modal means three different interaction patterns for what a visitor thinks of as one collection. GLightbox treats slides as typed objects — image, video, iframe or inline HTML — so one lightbox can move between all of them with the same swipe and keyboard behaviour.

There are two ways to feed it. The declarative way is to add class="glightbox" links and let it discover them. This snippet uses the programmatic way, passing an elements array where each slide states its own type: an image with a title and description, a video with source: 'local' and a width, and an inline slide whose content is the HTML of a hidden element. The array approach matters because it decouples the thumbnail grid from the lightbox. The grid here is custom-styled buttons with badges and a play glyph, and a click handler calls lightbox.openAt(index), so the tiles can look like anything without being anchor tags.

Inline slides are the underrated feature. The release notes panel is ordinary HTML — a heading, a list and a button with a click handler — rendered inside the lightbox and still interactive, which is useful for forms, sign-up prompts and rich detail views that a bare image cannot carry. Two configuration choices are worth copying: autoplayVideos is false, so a video never starts making noise without a deliberate click, and loop wraps navigation so the arrows never dead-end.

GLightbox handles touch swipe, pinch zoom on images, drag to close and keyboard control, and it needs no dependencies. The demo video is a public CC0 clip loaded from a URL; if you host your own, use the local source type for MP4 files, or youtube and vimeo for embeds, which GLightbox wraps in a responsive frame. The thumbnails and images are generated on canvases so the layout works offline.

Step by step

How to Use

  1. 1
    Open an imageClick a tile marked Image. It opens in the lightbox with its title and description below.
  2. 2
    Move between slidesSwipe or press the arrow keys. The lightbox moves between image, video and notes slides seamlessly.
  3. 3
    Play the videoOpen the Product tour tile and press play; it never autoplays.
  4. 4
    Use the notes slideOpen Release notes. It is real HTML, and its button stays clickable inside the lightbox.
  5. 5
    Close itPress Escape, click outside the slide, click ×, or drag the slide away on a touch screen.

Real-world uses

Common Use Cases

Product launch and landing pages
Show screenshots, a demo video and release notes in one place. For pure photo galleries see the PhotoSwipe gallery.
SHOP
Rich product pages
Combine photos, a 360 video and a size-guide panel in one viewer.
Documentation walkthroughs
Open screenshots and short screen recordings without leaving the article.
Learning data-driven UI
See how a config array can drive both the grid and the viewer from one source of truth.

Got questions?

Frequently Asked Questions

Pass an elements array to GLightbox. Each object sets its own type: "image", "video", "iframe" or "inline" with content.

Keep a reference to the instance and call lightbox.openAt(index) from your click handler.

Use type: "video" with source: "youtube" or "vimeo" and the video URL as href; GLightbox builds the embed.

Yes. Inline slides accept any HTML through the content property, and events inside it keep working.

Set autoplayVideos: false. Users then start playback themselves.

No. GLightbox is dependency-free vanilla JavaScript.

Yes. Use the JSX, Vue, Angular or Tailwind export buttons on this page to convert the markup and styles. The behaviour comes from GLightbox, so in a framework project install it with npm install glightbox instead of the CDN tag, create it in useEffect / onMounted / ngAfterViewInit, and release it with destroy() when the component unmounts.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Ask an AI assistant like Claude to add a YouTube slide, pause a playing video when the user navigates away, or add a thumbnail strip along the bottom of the lightbox.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a mixed-media lightbox with GLightbox 3 loaded from a CDN (script and CSS).

Requirements:
- Create one GLightbox instance from an elements array containing image slides, a local MP4 video slide (source: 'local') and an inline HTML slide whose content comes from a hidden element.
- Render a custom thumbnail grid of buttons with a type badge and a play icon for video, and open the lightbox with openAt(index).
- Set touchNavigation, loop, keyboardNavigation, zoomable and autoplayVideos: false.
- Make the inline slide contain a list and a button that remains interactive.
- Generate thumbnails and images on canvases; give each button an aria-label describing its media type.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Source Code

Requires
CSS · glightbox.min.cssJS · glightbox.min.js
<div class="gl-wrap">
  <h3>Launch assets</h3>
  <p class="gl-sub">One lightbox, three kinds of slide: images, video and an inline HTML panel.</p>
  <div class="gl-grid" id="glGrid"></div>
</div>

<div id="glInfo" style="display:none">
  <div class="gl-panel">
    <h4>Release notes &mdash; v2.4</h4>
    <ul>
      <li>New timeline view with drag-to-reorder</li>
      <li>Dark mode across every screen</li>
      <li>40% faster cold start</li>
    </ul>
    <button type="button" onclick="this.textContent='Still interactive!'">Try me</button>
  </div>
</div>