A minimal, pure-CSS Lightbox replacement

Related tags

Learning resource CSSBox
Overview

CSSBox

A simple, pure-CSS Lightbox replacement.

An example page is available in the gh-pages branch, or online on GitHub Pages.

Why CSSBox?

  • Absolutely no JavaScript
  • Just over 1kb unminified (1445b including comments, 1139b excluding comments)
  • There is an even smaller version without gallery functionality in the v1 branch
  • Centers the image
  • Adds a nice, realistic shadow to the image
  • Dims the background
  • Allows you to navigate through images
  • Completely responsive, works on any screen size
  • Has a pretty fade in and fade out animation

Usage

Upload cssbox.css to your server and add a stylesheet link to it in your CSS.

Add your images like this:

<div class="cssbox">
    <a id="image2" href="#image2"><img class="cssbox_thumb" src="image_thumb.jpeg" />
        <span class="cssbox_full"><img src="image_full.jpeg" /></span>
    </a>
    <a class="cssbox_close" href="#void"></a>
    <a class="cssbox_prev" href="#image1">&lt;</a>
    <a class="cssbox_next" href="#image3">&gt;</a>
</div>

In the example above, you add an image with id image2 (make sure that appears consistently in the a tag), with a close button, a previous button which switches to image1 and a next button which switches to image3.

If you do not need the previous and next buttons, just leave the a elements out. If you NEVER need gallery functionality, you may want to look in the v1 branch, which contains a smaller version without gallery functionality.

When a visitor clicks the tumbnail, the fullsize preview will appear in the center of the screen and they can navigate through images.

Note: We use #void in the HTML to not jump to the top of the page when closing the gallery. This is a hack, but should work as long as you don't have any div with ID void on your page. If you do, choose another name.

License

Creative Commons Attribution-ShareAlike 4.0

Credits do not need to be on your website, just leave them in the CSS.

You might also like...

Lightweight plugin for easy responsive images replacement

Responsive image replacement Check out the example here. resonsive-img.js is a lightweight plugin for fast, clean and easy responsive image replacemen

Sep 20, 2022

An efficient drop-in replacement for JSON.

An efficient drop-in replacement for JSON.

JCOF: JSON-like Compact Object Format A more efficient way to represent JSON-style objects. Status This format isn't nailed down yet. Most changes wil

Nov 26, 2022

A Cypress plugin that generates test scripts from your interactions, a replacement Cypress Studio for Cypress v10 🖱 ⌨

A Cypress plugin that generates test scripts from your interactions, a replacement Cypress Studio for Cypress v10 🖱 ⌨

DeploySentinel Cypress Recorder Plugin Create Cypress tests scripts within the Cypress test browser by simply interacting with your application, simil

Dec 15, 2022

shell script replacement; write shell scripts in js instead of bash, then run them with a single static binary

yavascript YavaScript is a bash-like script runner which is distributed as a single statically-linked binary. Scripts are written in JavaScript. There

Dec 29, 2022

This package is a replacement for superjson to use in your Remix app

This package is a replacement for superjson to use in your Remix app

This package is a replacement for superjson to use in your Remix app. It handles a subset of types that superjson supports, but is faster and smaller.

Jan 3, 2023

A modern replacement for jQuery.marquee

vanilla-marquee An es5 vanilla-js implementation of jQuery.marquee Installation npm i vanilla-marquee Usage import marquee from 'vanilla-marquee' ne

Dec 27, 2022

A beautiful, responsive, highly customizable and accessible replacement for JavaScript's popup boxes. Zero dependencies.Alerts ,dialogs

AsgarAlert (v1) for JS Install script defer src="/asgar-alert.js"/script Examples The most basic message: asgar("Hello world!"); A message signali

Dec 20, 2022

Selectator is a jQuery-based replacement for select boxes

DEPRECATED - no longer actively maintained Selectator Selectator is a jQuery-based replacement for select boxes. It supports searching, custom rendere

Dec 16, 2022

Metamask replacement for your E2E tests.

Headless Web3 Provider Metamask replacement for your E2E tests. Why "headless"? Because it doesn't have a visual interface, reject (or accept) transac

Dec 13, 2022
Comments
  • Add z-index fix to the README

    Add z-index fix to the README

    I just faced this issue when using this with Bootstrap4 and I just found, that some other person already raised this issue before. So I think it is a good thing to mention this in the README in order to make others (especially beginners) understand this immediately.

    opened by jankapunkt 5
  • Some JPG images are not resizing properly and stretch out to be warped looking

    Some JPG images are not resizing properly and stretch out to be warped looking

    I'm seeing an odd behavior on desktop browsers (Chrome, Safari, Firefox) where if an image is taken from a mobile phone and the browser window is expanded horizontally, the image will continue stretching sideways and warp the image. This only happens on some images, but not all images.

    Update: Happens to all image types, not just JPGs.

    Sample image where the stretching occurs:

    covid-19-erhro-img-5

    opened by cmcknight 0
  • caption

    caption

    hi dev, incredible to do this with css only, could you include a caption and possibly a counter using data attributes or similar?

    super lightweight and fast!

    thx torsten

    enhancement 
    opened by BugFixNo1 2
  • Clicking an image moves page to bottom of that image

    Clicking an image moves page to bottom of that image

    Paraphrased from an e-mail report:

    When you click on an image and CSSBox is activated, the web page moves up so that the image that is clicked on is at the top of the browser window. It would be great if when clicking on the image, the web page stays in it’s current state instead of moving up.

    My response:

    This is indeed a current limitation to CSSBox and I do feel it most likely isn't fixable in CSSBox itself due to limitation of CSS3.

    I would imagine one way to deal with it would be to use JavaScript to capture the current scrolling position before someone clicks a link that's inside a #cssbox, and to reset the position after the original event propagates.

    Other suggestions or fixes (especially with working code) are very welcome!

    bug help wanted 
    opened by TheLastProject 0
Owner
Sylvia van Os
She/her
Sylvia van Os
GitHub https://thelastproject.github.io/CSSBox/
An accessible, open-source lightbox with no dependencies

Tobii An accessible, open-source lightbox with no dependencies. See it in Action Table of contents Features Get Tobii Download Package managers Usage

null 146 Dec 30, 2022
Chocolat : the lightbox so cool horses use it :horse:

Chocolat Chocolat is a responsive lightbox Documentation is here Demo page is here Documentation You can access the full documentation at this page :

Nicolas Turlais 1.7k Jan 6, 2023
Gatsby-starter-minimal-blog - Typography driven, feature-rich blogging theme with minimal aesthetics.

Gatsby-starter-minimal-blog - Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.

Priya Chakraborty 0 Jan 29, 2022
Instagram.css - Complete set of Instagram filters in pure CSS

Instagram.css Instagram.css - Pure CSS Instagram filters. You can add all these Instagram-like filters to your photos with using CSS only. Thanks to t

Yan Zhu 4k Dec 30, 2022
Automatic arxiv->ar5iv link replacement in Chrome.

Automatic arxiv->ar5iv link replacement in Chrome. This chrome extension will automatically replace arxiv.org/pdf/* links with ar5iv links for more we

yobi byte 44 Oct 29, 2022
Replacement for comma.ai backend and useradmin dashboard

Replacement for comma.ai backend and useradmin dashboard. Bundled with a modified version of comma's cabana to allow viewing & analyzing drives.

null 15 Jan 1, 2023
A Hackable Markdown Note Application for Programmers. Version control, AI completion, mind map, documents encryption, code snippet running, integrated terminal, chart embedding, HTML applets, plug-in, and macro replacement.

Yank Note A hackable markdown note application for programmers Download | Try it Online >>> Not ecommended English | 中文说明 [toc]{level: [2]} Highlights

洋子 4.3k Dec 31, 2022
A drop in replacement for Hacker News with support for dark mode and more.

Worker News A drop in replacement for Hacker News with support for dark mode, quotes in comments, user identicons and submission favicons. What's cool

Worker Tools 18 Dec 31, 2022
A Drop-in Jalali Replacement for filament DateTimePicker

Filament Jalali Date Time Picker Field This package is a Drop-in replacement for DatePicker and DateTimePicker field type you just need to replace tho

AriaieBOY 8 Dec 3, 2022
Pretty, customisable, cross browser replacement scrollbars

jScrollPane - cross browser custom scroll bars jScrollPane is a jQuery plugin which allows you to replace a browser's default scroll bars (on an eleme

Kelvin Luck 2.2k Dec 15, 2022