Making a fixed Css lightbox content scrollable

Question

I have a css lightbox for a image gallery, and the images that open in the lightbox must be big so that their content is easy to read. The lightbox container is fixed, but I need the images to be scroll-able on the y axis.

I've seen this question: Scroll part of content in fixed position container, but it didn't work when I added the solution to my code. I also saw this one: How to make a "Fixed" element Scrollable, but I'd prefer not to use JavaScript in my code.

The code I have is this:

HTML

<!-- Lightbox usage markup -->
                <ul>
                    <li class="" id="portfolio_item">
                        <!-- thumbnail image wrapped in a link -->
                        <a href="#img1">
                            <img src="images/Templates/template_01/Template_01_thumb.png" width=""  height="150px">
                        </a>
                    </li>
                </ul>
                <!-- lightbox container hidden with CSS -->
                <a href="#_" class="lightbox" id="img1">
                    <img src="images/Templates/template_01/Template_01.png" class="lightbox_content">
                </a>

CSS

    /*************************************
 * Basic lightbox styles. Notice the
 * default 'display' is 'none'.
 */

.lightbox {
  /** Hide the lightbox */
  display: none;

  /** Apply basic lightbox styling */
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: auto;
  padding:10px;
  text-align: center;
  top: 0;
  left: 0;
  background: black;
  background: rgba(0,0,0,0.8);
}

.lightbox img {
  /** Pad the lightbox image */
  max-width: 90%;
  margin-top: 2%;
  overflow-y:scroll;
  height:100%;
}

.lightbox:target {
  /** Show lightbox when it is target */
  display: block;

  /** Remove default browser outline style */
  outline: none;
}

I realize it must be something simple, but I tried everything I could think of but it still doesn't work. Thanks for the help.

Update: I changed the CSS to this:

    .lightbox {
  /** Hide the lightbox */
  display: none;

  /** Apply basic lightbox styling */
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: auto;
  padding:10px;
  text-align: center;
  top: 0;
  left: 0;
  background: black;
  background: rgba(0,0,0,0.8);
}

.lightbox_content{
  /** Pad the lightbox image */
  max-width: 90%;
  width:auto;
  min-width:30%;
  margin-top: 2%;
  overflow-y:scroll;
  max-height:10000px;
  height:3623px; 

}

.lightbox:target {
  /** Show lightbox when it is target */
  display: block;

  /** Remove default browser outline style */
  outline: none;
}

But it still doesn't scroll.

I already have more plug-ins in my page than I'd like, which is why I went for this simple CSS fix, instead of a more elaborate solution. — Andre Felipe, Jul 30 '15 at 16:39
PS: as you can see, I changed `.lightbox img` to `.lightbox_content` as declared in the html — Andre Felipe, Jul 30 '15 at 16:52

score 2 · Accepted Answer · answered Jul 30 '15 at 17:07

See comments at bottom of CSS code for explanations:

/*************************************
 * Basic lightbox styles. Notice the
 * default 'display' is 'none'.
 */

.lightbox {
  /** Hide the lightbox */
  display: none;

  /** Apply basic lightbox styling */
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: auto;
  padding:10px;
  text-align: center;
  top: 0;
  left: 0;
  background: black;
  background: rgba(0,0,0,0.8);
}

.lightbox img {
  /** Pad the lightbox image */
  max-width: 90%;
  margin-top: 2%;
  overflow-y:scroll;
  height:100%;
}

.lightbox:target {
  /** Show lightbox when it is target */
  display: block;

  /** Remove default browser outline style */
  outline: none;
}

/*========== ADDED THIS ==========*/
.lightbox {
    width: 300px; /* set arbitrary dimensions */
    height: 300px;
    overflow: scroll; /* causes .lightbox to be scrollable if children overflow it */
}

.lightbox img {
    max-width: none; /* max-width: 90%; <---- don't set this (otherwise image will never overflow parent)*/
    margin-top: 2%;
    overflow-y: visible; /* overflow-y: scroll; <---- don't set this (images can't contain anythying, so nothing can overflow from them*/
    height: auto;  /* height: 100%; <---- don't set this (otherwise image will never overflow parent)*/
}

<!-- Lightbox usage markup -->
                <ul>
                    <li class="" id="portfolio_item">
                        <!-- thumbnail image wrapped in a link -->
                        <a href="#img1">
                            <img src="http://www.lorempixel.com/600/600" width=""  height="150px">
                        </a>
                    </li>
                </ul>
                <!-- lightbox container hidden with CSS -->
                <a href="#_" class="lightbox" id="img1">
                    <img src="http://www.lorempixel.com/600/600" class="lightbox_content">
                </a>

Martin · Answer 2 · 2015-07-30T16:43:17.080

0

How about you set min-width and/or min-height to the image CSS rule, and then use the force overflow to set a scroll if the minimum image size is larger than the lightbox display size?

So what happens is the image is scaled to 90% of the lightbox container, but it will still be equal or greater than min-width which means the image size is set as this, and can then scroll with the scrollbar CSS rules you already have.

You might need to set these (min-width) rules as !important, too.

edited Jul 30 '15 at 16:43

answered Jul 30 '15 at 16:39

Martin

22,212
11
70
132

I'll try making them as `! important`, but I already tried adding `min-height`and `max-height`. However, since I can't be sure about the images height, I have to use percentage. – Andre Felipe Jul 30 '15 at 16:41
% as min- or max- values are worthless as they'll only be percentages of the parent element, so the image would then always scale to the container. Which is not what you want. – Martin Jul 30 '15 at 16:43
I tried, still no luck. I realize that, but I tried to put a max-height of 2000px and all it did was change the width, which is set to `max-width:90%` – Andre Felipe Jul 30 '15 at 16:43
You need to research how to make images scale to their containers, and then in that CSS code add a `min-height` and/or `min-width` value to force these values. – Martin Jul 30 '15 at 16:44
@AndreFelipe what you need to do is set a relationship in your CSS between width and height, so your `width:` value needs to be `auto` and your height needs to be defined. then this `width:auto` should be within the bounds of `min-width:` and `max-width:` – Martin Jul 30 '15 at 16:47
There is little point setting a `max-width` if you do not also set a standard `width:` value – Martin Jul 30 '15 at 16:47

Making a fixed Css lightbox content scrollable

2 Answers2