I am trying to create a CSS lightbox for an image gallery, where the images displayed in the lightbox need to be large so their content is easily readable. The lightbox container is fixed in its position, but I require the images to be scrollable along the y-axis.
I have looked at similar questions on Stack Overflow like Scroll part of content in fixed position container and How to make a "Fixed" element Scrollable. However, implementing the solutions provided in those threads did not work as expected. Ideally, I prefer not to use JavaScript in my code.
The current HTML code snippet I have is:
<!-- 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>
For the CSS styling, the code currently looks like this:
/*************************************
* 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;
}
Despite trying different adjustments in the CSS code, such as changing the dimensions of the lightbox content or adjusting the overflow property, the scrolling functionality still does not work as intended. Any help or insights would be greatly appreciated.
Update: I made further changes to the CSS as follows:
.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;
}
Unfortunately, even with these modifications, the scrolling feature remains nonfunctional.