Author: | TheLastProject |
---|---|
Views Total: | 10,574 views |
Official Page: | Go to website |
Last Update: | September 2, 2020 |
License: | MIT |
Preview:

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">></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"><</a> <a class="cssbox_next" href="#image3">></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"><</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
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
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
A nice image gallery but there is still an error in the code of the explanation!
the links should be coded like this…
etc.
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”);
}
});
“`
Isn’it a good idea to add a title (a caption) at the bottom of each image ?
something like <a class="cssbox_caption" title-of_image2 ?
I'm not able to do this by myself