Search code examples
jquerycsslightboxlightbox2

Responsive layout constraining horizontal display in Lightbox2 overlay

I use Lightbox2 on several sites for "galleries", and never had a problem. I am now attempting to use it with a Simple Responsive template (or on Github), and running into a problem:

When the overlay comes up and the images "zoom" to their proper size, they are restricted horizontally -- as if the browser thinks it only has a very narrow viewport. I get the same result in FF and Chrome.

If I look at it with "Inspect Element" in Chrome, the #lightbox main DIV is 1265px wide. But the .lb-outerContainer and .lb-dataContainer both think the width available is 247px.

I have read through the CSS and JS as carefully as I can, but cannot spot where the problem arises. I'm hoping some other sharp eyes can spot the problem.

Solution

  • It is this section in the Simple Responsive Template that is causing the "problem"

    /* RESPONSIVE IMAGES */
img{ max-width:100%; height:auto;}

    You can remove this restriction by adding after the responsive template css

    .lb-image {
    max-width: none;
}

    And since you want your lightbox to be responsive add

    .lb-outerContainer  {
    max-width: 100%;
}

    instead and all should be good!