The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Best practices for dealing with lightbox effects on responsive sites?

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #40280


    Clients love them.

    Responsive designs.

    Clients love them too.

    Not necessarily a match made in heaven (particularly videos: 85% of a 320px screen significantly decreases the wow factor).

    What are your ways of dealing with it?


    I deprecated them a while back when I started to work on a lot more mobile stuff. I was seeing all sorts of implementations, many inaccessible, which was unacceptable. At that time fixed positioning on mobile was almost non-existent so lightbox style presentations got the bin.

    It was a very uplifting experience. Removing one or two presentations from your arsenal can really make you think hard about the content. Does the content *have* to be shown that way?

    What is the requirement for the content? To be shown inline on click of an action? There are alternatives that don’t force an overlay. I still use tooltips, accordians, various show / hide UI elements.


    I suppose they aren’t required: It’s an aesthetic the client really likes.

    [Example]( “Example”)
    Built with [this code]( “”)

    I am using conditional php to draw 2 galleries from the same image uploads: using [orangebox]( “”) for full and tablet sizes and [photoswipe]( “”) for the mobile galleries.

    The issue comes to videos. Ideally, I would like to fire a lightbox for full/tab sizes and then use the native video handling for mobile (using vimeo+ to handle the media).


    I’m not sure what your JS dev is like but if you are using jquery I’m sure you could find a window resize plugin. Building one wouldn’t be too bad…Just on resize and a change bool and target the dialog container(s) for resize

    Chris Coiyer worked on []( would be pretty good for your videos


    Aces. I’ll certainly look into it.


    There’s [fancyBox]( “fancyBox”), which is a responsive Lightbox-type script that works pretty well.

    I’m kind of getting into the same school of thought as @cmcp is in and ditching that idea as well. It was cool for a while, but I think there should be creative new ways of doing it that work better for rwd.


    I really am too: I think this mobile-first thinking is leading to a similarly fundamental shift as when we realized flash was simply a bad idea.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.