CSS Only Minimal Responsive Image Gallery lightbox – CSSBox

Category: CSS & CSS3 , Gallery , Recommended | December 18, 2018
Author: TheLastProject
Views Total: 5,940
Official Page: Go to website
Last Update: December 18, 2018
License: MIT

Preview:

CSS Only Minimal Responsive Image Gallery lightbox – CSSBox

Description:

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:

12/18/2018

  • Fixed CSS

08/14/2018

  • Fixed Bootstrap compatibility

You Might Be Interested In:


2 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

Leave a Reply