jackmoore/colorbox

★ 4,732JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((colorbox))
    What it does
      Lightbox overlay
      Slideshow mode
      Inline content
    Content types
      Images
      Video
      Iframe pages
      Same-page HTML
    Configuration
      Dimensions
      Animation speed
      Caption support
    Themes
      Five built-in themes
      Custom CSS override

mindmap root((colorbox)) What it does Lightbox overlay Slideshow mode Inline content Content types Images Video Iframe pages Same-page HTML Configuration Dimensions Animation speed Caption support Themes Five built-in themes Custom CSS override

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a click-to-expand lightbox to image thumbnails on any jQuery-powered website.

USE CASE 2

Build a photo gallery slideshow with navigation arrows and captions using a simple jQuery call.

USE CASE 3

Load external HTML pages or inline content in a styled overlay without navigating away from the current page.

Tech stack

JavaScriptjQueryCSS

Getting it running

Difficulty · easy Time to first run · 5min

Requires jQuery already on the page, include one JS and one CSS file, then call the plugin on your links.

Use freely for any purpose including commercial use under the MIT license.

In plain English

Colorbox is a jQuery plugin that displays images, videos, and other content in a lightbox, which is an overlay that appears on top of the current page without navigating away. When a visitor clicks a link or thumbnail on your website, Colorbox intercepts the click, fades in a box in the center of the screen showing the content, and dims the rest of the page behind it. The visitor can close it by clicking outside the box, pressing Escape, or clicking a close button. The plugin can handle several types of content: images displayed directly, groups of images shown as a slideshow with navigation arrows, pages or other content loaded inside an embedded frame, HTML from the same page shown inline, and content fetched from a URL in the background. It is configurable through a range of options that control dimensions, animation speed, button visibility, captions, retina image support, and other behavior. Colorbox requires jQuery and is intended for websites that already use it. You include the plugin's JavaScript file alongside jQuery, add a small CSS file for the default appearance, and then call the plugin on any links you want to open in the overlay. Five pre-built themes are included in the repository so you can choose a visual style without writing custom CSS. The README is almost entirely a version history, listing every change from 2012 through 2016 across more than 60 releases. The last release was version 1.6.4 in May 2016. The project is released under the MIT license and full documentation is available on the author's website rather than in the repository itself. The project appears to be in maintenance mode with no new features added in recent years.

Copy-paste prompts

Prompt 1

Show me how to add Colorbox to my jQuery site so clicking any .gallery-link opens the image in a lightbox overlay.

Prompt 2

Help me configure Colorbox to show a group of images as a slideshow with previous and next arrows and captions.

Prompt 3

How do I use Colorbox to open an iframe with external page content in a lightbox on button click?

Prompt 4

Walk me through customizing the Colorbox CSS theme to match my site's color scheme without breaking its layout.

Open on GitHub → Explain another repo

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

Verify against the repo before relying on details.