Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Media & Gallery Snippets — Free HTML CSS JS Galleries, Lightboxes & Players

54 media components · Image Galleries, Lightboxes, Zoom & Magnifiers, Before/After Sliders, Audio & Video Players, 3D Model Viewers · Exports to React, Vue, Angular & Tailwind

What's included

Features

Image galleries with lightbox, filter tabs, masonry, and thumbnail navigation
Full-screen lightboxes with PhotoSwipe, GLightbox, and a Bootstrap modal gallery
Image magnifier lens, click-to-zoom, pinch and scroll zoom, and pan-zoom floor plans
Before/after comparison sliders for images and video, including a CSS-only version
Custom video player, podcast player, chapters, and audio players with visualizers
Picture-in-picture, live captions, Media Session controls, and a voice memo recorder
GLB 3D model viewers with hotspots, lighting, exploded views, and colour configurators
Three.js and Babylon.js product viewers and a 360° image spin viewer

About this category

Media & Gallery Snippets — Free Image Galleries, Lightboxes, Players & 3D Viewers

Media components are how people look at, listen to, and inspect content: a photo gallery that opens into a lightbox, a product image you can zoom into, a before/after comparison, a podcast player with chapter markers, or a 3D model you can spin. This collection groups all of them in one place.

Every snippet is plain HTML, CSS, and JavaScript. Some use a focused library from a CDN — PhotoSwipe, GLightbox, Viewer.js, medium-zoom, Howler.js, Tone.js, Three.js, or Babylon.js — and say so in the snippet.

Galleries and lightboxes. Photo Gallery with Lightbox, Thumbnail Gallery, Filter Tabs Gallery, Bootstrap Masonry Image Gallery, Instagram Gallery Lightbox, PhotoSwipe Full-Screen Gallery with Captions, and GLightbox Mixed Media Lightbox cover browsing a set of images and opening one full screen.

Zoom, magnify, and inspect. Image Magnifier, Product Image Magnify Lens, medium-zoom Article Image Zoom, Pinch & Scroll Zoom Image Viewer, Panzoom Zoomable Floor Plan, Viewer.js Product Image Viewer, 360° Product Spin Viewer, and Image Hotspot with Tooltips let people look closer at a single image.

Comparison. Before/after image sliders — including a CSS-only version — and a Video Scrub Comparison Slider show two states of the same scene.

Audio and video. A custom video player, podcast player with speed and skip controls, episode chapters, audio players with playlists and visualizers, picture-in-picture, live captions, a voice memo recorder, Media Session controls, and playable synth pads and piano keys.

3D models. GLB model viewers with hotspots, lighting studios, exploded views, colour configurators, and wireframe toggles, plus Three.js and Babylon.js product viewers.

Real-world uses

Common Use Cases

Product pages and e-commerce
Magnifier lenses, zoom viewers, 360° spins, and 3D model configurators let shoppers inspect a product closely before buying.
Portfolios and photography sites
Filterable and masonry galleries that open into a full-screen lightbox with captions — the core of any photography or design portfolio.
Showing change over time
Before/after sliders for photo retouching, redesigns, renovations, and AI image enhancement, plus a video scrub comparison for motion.
Podcasts, music, and video content
Custom players with playback speed, skip, chapters, playlists, and visualizers for podcast sites, course platforms, and music projects.
Learning browser media APIs
Picture-in-Picture, the Media Session API, MediaRecorder for voice memos, and the Web Audio API behind the synth pads and visualizers, each in a working example.

Got questions?

Frequently Asked Questions

Not all of them. Several galleries, the magnifier, and the before/after sliders are plain JavaScript and CSS. Others use a focused library such as PhotoSwipe, GLightbox, Viewer.js, or medium-zoom, loaded from a CDN, when that library solves the problem better than hand-written code.

Replace the model URL in the snippet with the URL of your own .glb file. Host it on the same origin or a server that sends CORS headers, and keep file sizes small with compressed textures so the model loads quickly on mobile.

Yes, with the usual browser rules: playback with sound must start from a user gesture such as a tap, and iOS may use its own full-screen video player unless the video has the playsinline attribute.

Yes. Every snippet has a framework export. Library-based viewers initialise on mount and clean up on unmount, and media elements are referenced with a ref instead of a DOM query.