Inspiring

Question

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

Forum|Forum|2 years ago
June 2, 2023
4 replies
3820 views

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!

This topic has been closed for replies.

B i r n o u

Legend

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.

P

Paul-M

Legend

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

U

Under S.Author

Inspiring

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.

O

osgood_

Legend

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.

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.

Nancy OShea

Community Expert

Use Bootstrap's built-in classes for Modal window.

https://getbootstrap.com/docs/4.0/components/modal/

Nancy O'Shea— Product User & Community Expert

B i r n o u

Legend

but doesn't it use JavaScript?

O

osgood_

Legend

but doesn't it use JavaScript?

By @B i r n o u

Yes and why not - assuming you use the right javascript approach it will probably involve less code, provide more options and control. Unless you have good reason to use a css only approach I can't see any real benefits.

O

osgood_

Legend

Sure it can be done:

https://tympanus.net/codrops/2011/12/26/css3-lightbox/

https://www.youtube.com/watch?v=6j5q-hP8sfk

Although unless there is a good reason you probably wouldn't want to do it with pure css as its not efficient/economical. Css has no ability to loop through code, therefore you end up creating more source code than if you were to use a javascript array of objects and loop through that. It's kind of a trade off, an unskilled developer will use the more css code approach because they feel secure/familiar writing multiple instances of the same code, just changing the thumbnail img rather than dynamically creatiing the thumbnail images with javascript or php (or any other server-side language, node.js, python etc). Some even create as many modal overlays as there are thumbnail images, rather than creating one overlay and dynamically populating it with the selected thumbnail image.

So yes it can be done with pure css but with generally a lot more code.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded