Skip to main content
U
Under S.
Inspiring
June 2, 2023
Question

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

  • June 2, 2023
  • 4 replies
  • 3788 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.

4 replies

B i r n o u
B i r n o u
Legend
June 14, 2023
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.

P
Paul-M
Legend
June 9, 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
    U
    Under S.Author
    Inspiring
    June 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.

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    June 16, 2023
    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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      June 2, 2023

      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
        B i r n o u
        Legend
        June 9, 2023

        but doesn't it use JavaScript?

        B i r n o u
        B i r n o u
        Legend
        June 10, 2023
        quotePersonally l would never suggest adding Bootstrap...
        By @osgood_

        ============

        If you look at the original post, the tags are "Bootstrap, How To."

         

        Assuming Bootstrap is in use, there's no reason to reinvent code since Bootstrap already supports Modal (aka Lightbox) windows. 

         

        Moreover, the Snippets panel in DW CC contains the HTML code & classes.  Simply double-click to insert the Modal of choice. 

         

         


        quote

        Assuming Bootstrap is in use, there's no reason to reinvent code since Bootstrap already supports Modal (aka Lightbox) windows. 

        By @Nancy OShea

         

        Well that is not what was saying @Under S. in his very first post... just see below

        quote

        Can this be done through CSS alone in 2023? Although my website currently doesn't use any libraries (like jQuery or Bootstrap)

        By @Under S.

         

          O
          osgood_
          Legend
          June 2, 2023

          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.

            Terms & ConditionsAccessibility statement
            Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices