CSS Only Minimal Responsive Image Gallery lightbox – CSSBox

Category: CSS & CSS3 , Gallery , Recommended | September 2, 2020
5 Comments
AuthorTheLastProject
Last UpdateSeptember 2, 2020
LicenseMIT
Tags
Views28,630 views
OfficialGo to website
Live DemoDownload
CSS Only Minimal Responsive Image Gallery lightbox – CSSBox

A minimal, responsive image gallery lightbox where the user is able to navigate between full sized images in a fullscreen lightbox popup. Built using CSS / CSS3 and plain html markup.

How to use it:

To get started, just include the CSSBox.css in your html page.

<link href="cssbox.css" rel="stylesheet">

And then insert thumbnail and full images into the webpage as follows. That’s it.

<div class="cssbox">
  <a id="image1" href="#image1">
    <img class="cssbox_thumb" src="thumbn-1.jpg">
    <span class="cssbox_full">
      <img src="full-1.jpg">
    </span>
  </a>
  <a class="cssbox_close" href="#void"></a>
  <a class="cssbox_next" href="#image2">&gt;</a>
</div>
<div class="cssbox">
  <a id="image1" href="#image2">
    <img class="cssbox_thumb" src="thumbn-2.jpg">
    <span class="cssbox_full">
      <img src="full-2.jpg">
    </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>
<div class="cssbox">
  <a id="image1" href="#image3">
    <img class="cssbox_thumb" src="thumbn-3.jpg">
    <span class="cssbox_full">
      <img src="full-3.jpg">
    </span>
  </a>
  <a class="cssbox_close" href="#void"></a>
  <a class="cssbox_prev" href="#image2">&lt;</a>
</div>

Changelog:

09/02/2020

  • increased default z-index values to 999999

03/04/2020

  • Added `:target` selector for CSSBox to be used as a lightbox style menu

10/14/2019

  • Fixed issue where lightbox has a pointer cursor

12/18/2018

  • Fixed CSS

08/14/2018

  • Fixed Bootstrap compatibility

See Also:

You Might Be Interested In:

5 thoughts on “CSS Only Minimal Responsive Image Gallery lightbox – CSSBox”

  1. Crimmson

    I’m not very experienced with coding, but I’m putting together a personal portfolio website, and I am having trouble getting this working properly.

    All the thumbnails display properly, however, only my first image is showing its full-size version. The remainder just show the index page, although I can see the address changing (index.html#image2, #3, #4, etc etc).

    Including a screenshot of a section of the code. What stupidly obvious thing am I missing?

    https://uploads.disquscdn.com/images/19030ca4f7759515a29e480ab8a156e2805369fbcd8d0da3842187a7a35e5c82.png

    Reply ↓
  2. pardeep sehgal

    There is still error in the code image id would be change to further to id=”image2″ and id=”image3″ according to the href=”#image2″ and href=”#image3″. Please update.

    Pardeep Sehgal

    Reply ↓
  3. Ko Karman

    A nice image gallery but there is still an error in the code of the explanation!

    the links should be coded like this…




    etc.

    Reply ↓
  4. Graham

    I have added some JS to enable users to use the left and right arrow keys and Esc. Others might find it helpful.

    “`
    // support for Esc, ← and →

    function trigger(element, action) {
    var link = element.parentNode.querySelector(“.cssbox_” + action)
    if (link)
    link.click();
    }

    document.addEventListener(“keyup”, function(e) {
    switch (e.key) {
    case “Escape”:
    return trigger(e.target, “close”);
    case “ArrowLeft”:
    return trigger(e.target, “prev”);
    case “ArrowRight”:
    return trigger(e.target, “next”);
    }
    });
    “`

    Reply ↓

Leave a Reply