The state of photo lightboxes in 2023 : Can it be done through CSS alone?

Report · Jun 02, 2023

Just recently got back into coding after years of strictly designing. "Back in the day," as they say, you'd need jQuery + the right script just to have a simple photo lightbox on your website.

For the sake this argument, I'll define "lightbox" as clicking on an image and getting a larger version of it centered and overlayed on the rest of the viewport, with a semi-transparent black or white layer in-between for contrast; and a standard transition animation (even if it's just a quick fade-in / fade-out). To return to normal, clicking anywhere is fine. Slightly blurring the background would be nice too, but not necessary. Don't need previous/next buttons (to cycle through multiple images while in the lightbox) either; one at a time is fine. And lastly, I don't even really need to add text to the opened image, which should simplify things a lot.

^ All these things are nice to have, but ultimately all I really need is for the image I clicked on to go full-screen (contained) over the layout, and then back to normal on any click, with a mid-layer to black out (or white out) the background for contrast. Ideally, with the least amount of code possible.

Can this be done through CSS alone in 2023? Although my website currently doesn't use any libraries (like jQuery or Bootstrap) I'm open to linking to one if I have to.

Thanks!

Report · Jun 15, 2023

Was this comment supposed to be helpful, Nancy?

Report · Jun 13, 2023

I decided to ask Bing Copilot for the web and received the following:

It sounds like you have a clear idea of what you want to achieve with your lightbox. There are many ways to create a lightbox with HTML, CSS and JavaScript, but I’ll show you one possible solution that matches your requirements.

First, you need to create a HTML file that contains the images you want to display in the lightbox. You can use the onclick attribute to trigger a JavaScript function that will open the lightbox and show the corresponding image. For example:

<!-- Images used to open the lightbox -->
<div class="row">
  <div class="column">
    <img src="img1.jpg" onclick="openLightbox(1)" class="hover-shadow">
  </div>
  <div class="column">
    <img src="img2.jpg" onclick="openLightbox(2)" class="hover-shadow">
  </div>
  <div class="column">
    <img src="img3.jpg" onclick="openLightbox(3)" class="hover-shadow">
  </div>
</div>

Next, you need to create a CSS file that defines the styles for the lightbox. You can use the position: fixed property to make the lightbox cover the entire viewport, and the z-index property to make it appear on top of everything else. You can also use the opacity and filter properties to create a semi-transparent and blurred background layer for contrast. For example:

/* The Modal/Lightbox */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
}

/* The background layer */
.modal-backdrop {
  background-color: rgba(0,0,0,0.5); /* Black with opacity */
  filter: blur(5px); /* Blur effect */
}

/* The image container */
.modal-content {
  position: relative; /* Needed for close button */
  margin: auto; /* Centered horizontally */
  max-width: 80%; /* Responsive width */
}

/* The image inside the container */
.modal-image {
  display: block; /* Fill the container */
  width: 100%; /* Responsive width */
}

/* The close button */
.close {
  color: white; /* White text color */
  position: absolute; /* Positioned relative to modal-content */
  top: 10px; /* From the top */
  right: 25px; /* From the right */
  font-size: 35px; /* Large font size */
}

Finally, you need to create a JavaScript file that defines the logic for the lightbox. You can use the document.getElementById and document.getElementsByClassName methods to access the elements in the HTML file. You can also use the style.display property to show or hide the lightbox, and the src attribute to change the image source. For example:

// Get the modal element
var modal = document.getElementById("modal");

// Get the modal backdrop element
var backdrop = document.getElementsByClassName("modal-backdrop")[0];

// Get the modal content element
var content = document.getElementsByClassName("modal-content")[0];

// Get the modal image element
var image = document.getElementsByClassName("modal-image")[0];

// Get the close button element
var close = document.getElementsByClassName("close")[0];

// Define a function to open the lightbox with a given image index
function openLightbox(index) {
  // Show the modal element
  modal.style.display = "block";

  // Show the modal backdrop element
  backdrop.style.display = "block";

  // Show the modal content element
  content.style.display = "block";

  // Change the image source according to the index
  image.src = "img" + index + ".jpg";
}

// Define a function to close the lightbox
function closeLightbox() {
  // Hide the modal element
  modal.style.display = "none";

   // Hide the modal backdrop element
   backdrop.style.display = "none";

   // Hide the modal content element
   content.style.display = "none";
}

// Add an event listener to the close button to trigger the close function
close.addEventListener("click", closeLightbox);

// Add an event listener to the window to close the lightbox when clicking outside of it
window.addEventListener("click", function(event) {
  if (event.target == modal) {
    closeLightbox();
  }
});

This is one possible way to create a lightbox with HTML, CSS and JavaScript. You can find more examples and tutorials online, such as:

I hope this helps you with your project. Good luck and happy coding! 😊

Wappler, the only real Dreamweaver alternative.

Report · Jun 14, 2023

Has Copilot not heard of const or let? Seems what you get is some old code from open source resources.........hmmm. What does it come up with if you ask it to use a more up to date solution, just wondering if it knows what you mean without actually informing it where you think things can be improved.

Report · Jun 09, 2023

Simple answer yes, it can be done in pure CSS, do a Google search and maybe look on Github, there are examples.

Paul-M - Community Expert

Report · Jun 15, 2023

People keep sending me to Google but if this was an easy find, I wouldn't be here. Heck, the only script I was recommended so far is from 2011, another false positive (since it won't work with mobile). I'm more of a designer than a programmer, so actual recommendations are valued and appreciated.

Bootstrap is looking more appealing by the day.

Report · Jun 15, 2023

Bootstrap is looking more appealing by the day.

By @Under S.

Are you sure that you want to be burdened by the wroth of @osgood_ when he describes Bootststrap as 'Cheap, cheerful, without much thought, skill or consideration.'?

Please have a look at this site where I have used Bootstrap. OK, Wappler has made it easier for me to create the site in record time. But Dreamweaver can achieve a similar outcome albeit with a slightly more drawn out timescale.

Maybe @osgood_ can show one or two examples of websites that he has built so that you can make a calculated decision.

Wappler, the only real Dreamweaver alternative.

Report · Jun 16, 2023

@Under S. wrote:
People keep sending me to Google but if this was an easy find, I wouldn't be here. Heck, the only script I was recommended so far is from 2011, another false positive (since it won't work with mobile). I'm more of a designer than a programmer, so actual recommendations are valued and appreciated.

Bootstrap is looking more appealing by the day.

It depends IF you can follow some simplish code or not?

Below is a more recent CSS ONLY solution I found on Codepen:

https://codepen.io/ananyaneogi/pen/vYENrYq

Would you be able to take the basic code and alter it to your requirements?

If you want to consider a javascript approach I can write a specific component for you where you only need to insert the thumbnail and larger image url.

Bootstrap may look appealing if you dont really know what you are doing and that I guess applies to a lot of 'developers'. That's not necessary a bad thing if you dont mind the extra bloat, its one which just masks their inability to do anything without it.....hummmm

Report · Jun 16, 2023

Bootstrap may look appealing if you dont really know what you are doing and that I guess applies to a lot of 'developers'. That's not necessary a bad thing if you dont mind the extra bloat, its one which just masks their inability to do anything without it.....hummmm

By @osgood_

WRONG! WRONG! WRONG!

It is the developer who knows what he is doing who uses a framework to help him get through the medial parts of web development.

Take this topic as an example, it has now taken 2 weeks and there still has been no consensus. Using Bootstrap, I could have had the problem fixed within half an hour.

Design a button, create a modal or off-canvas area, a navigation bar, a progress bar, a scrollspy, spinners, tooltips and popovers, collapsable areas, alerts and so the list goes on, it is a matter of minutes when using Bootstrap. This, paired with consistant bespoke theming throughout an application, is a must for any decent web developer.

Having said that, I am not saying that using a framework is the only way to go. All I am doing is passing my (20+ years) experience on. At 80, I am still actively creating applications.

As a side note: Notice that I did not take offence at the fact that I have been labelled as a web developer that does not know what I am doing? It is because I pity those that are ignorant and those that do not currently create applications.

Wappler, the only real Dreamweaver alternative.

Report · Jun 16, 2023

Bootstrap may look appealing if you dont really know what you are doing and that I guess applies to a lot of 'developers'. That's not necessary a bad thing if you dont mind the extra bloat, its one which just masks their inability to do anything without it.....hummmm

By @osgood_

WRONG! WRONG! WRONG!

By @BenPleysier

OK, don't jump out of your pedal car!

It is the developer who knows what he is doing who uses a framework to help him get through the medial parts of web development.

Take this topic as an example, it has now taken 2 weeks and there still has been no consensus. Using Bootstrap, I could have had the problem fixed within half an hour.

By @BenPleysier

That's not exclusive to Bootstrap. Any decent knowledge of coding could have resolved the issue in 30 mins and probably, in most cases, with less overhead than using Bootstrap, given more often than not the 'developers you mention - 'who know what they are doing' will link to the default Bootstrap css and javascript file to deploy a single onclick event, much like I used to do when I linked to the full bloated jquery library back in the day when I was a bit ignorant.

Design a button, create a modal or off-canvas area, a navigation bar, a progress bar, a scrollspy, spinners, tooltips and popovers, collapsable areas, alerts and so the list goes on, it is a matter of minutes when using Bootstrap. This, paired with consistant bespoke theming throughout an application, is a must for any decent web developer.

By @BenPleysier

But thats the whole idea of web-snippets or better still web-components, once written they can be reused and the beauty of course is you have written the code and css yourself, you know exactly what it does and where to alter it, if needs be. There's no need to reverse engineer anything, fumble through code you dont really know to identify where to change a color or padding etc as you will probably need to do if you use Bootstrap, there no redundancy either.

Having said that, I am not saying that using a framework is the only way to go. All I am doing is passing my (20+ years) experience on. At 80, I am still actively creating applications.

As a side note: Notice that I did not take offence at the fact that I have been labelled as a web developer that does not know what I am doing? It is because I pity those that are ignorant and those that do not currently create applications.

By @BenPleysier

Just for clarification I took the decision to terminate my involvement in offering to build full applications as I felt personally my skills and knowledge had outstriped the kind of clients (budgets) that I could get onboard. I was rapidly begining to feel under valued. I was no longer interested in giving those skills away, with all the associated headaches that building full applications involved. I've build enough of the things in the past and it gets repetative and less satisfying over time, to me at least it did.

I now focus on observing workflows, trying to understand what value some of these are supposed to bring other than being cheap and cheerful, predominately used by those with little to no real knowledge. Since I dont need the money these days, being only months away from retirement, I can spend the time that I want to allocate to web-development doing something which gives me some amount of satisfaction, hopefully helping others to unravel the complicated mess its become as a result of numerous options now available.........some/many which 'hide' the truth.

Report · Jun 13, 2023

So it functions at 100% with JS completely disabled.
By @Under S.

During public transport, I often reread Aaron Gustafson's little manuscript with relish... and it's astonishing to see how, since the democratization of nonsense under the pretext of technological advances and excessive bandwidth, thanks also to the permissiveness of browsers and a frantic race to define unnecessarily enguirlanded interfaces, in fact how quickly we're all moving away day by day from this guide to common sense and good practices decreed 10 years ago already...

Thank you @Under S. , for bringing us back down to earth... thanks

To support your point, I use a version of FF equipped with various tools for browsing mass consumption, sniffers and other spyware of all kinds... and it's incredible how many sites are invisible until the browser is fully compliant with the dicta imposed... if only by installing a simple check of the scripts used https://addons.mozilla.org/fr/firefox/addon/noscript/ I'm continually surprised by the number of benevolent partners [ironic] who join us in the shadows and render the site virtually unusable as soon as they are deactivated.