• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Engaged ,
Jun 02, 2023 Jun 02, 2023

Copy link to clipboard

Copied

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!

TOPICS
Bootstrap , How to

Views

867

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jun 15, 2023 Jun 15, 2023

Copy link to clipboard

Copied

Was this comment supposed to be helpful, Nancy?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 13, 2023 Jun 13, 2023

Copy link to clipboard

Copied

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 14, 2023 Jun 14, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 09, 2023 Jun 09, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jun 15, 2023 Jun 15, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 15, 2023 Jun 15, 2023

Copy link to clipboard

Copied

quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 16, 2023 Jun 16, 2023

Copy link to clipboard

Copied


@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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 16, 2023 Jun 16, 2023

Copy link to clipboard

Copied

quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 16, 2023 Jun 16, 2023

Copy link to clipboard

Copied

LATEST
quote
quote

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!

 

quote

 

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.

 

quote

 

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.

 

quote

 

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 13, 2023 Jun 13, 2023

Copy link to clipboard

Copied

quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines