Creating a static CSS lightbox with scrolling content

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.

Answer №1

Take a look at the comments located at the bottom of the CSS code for detailed explanations:

/*************************************
 * Custom lightbox styles with default
 * 'display' set to 'none'.
 */

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

  /** Apply basic styling for the lightbox */
  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 {
  /** Set styling for the lightbox image */
  max-width: 90%;
  margin-top: 2%;
  overflow-y:scroll;
  height:100%;
}

.lightbox:target {
  /** Display the lightbox when it is targeted */
  display: block;

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

/*========== CUSTOM ADJUSTMENTS ==========*/
.lightbox {
    width: 300px; /* define specific dimensions */
    height: 300px;
    overflow: scroll; /* enable scrolling if content overflows */
}

.lightbox img {
    max-width: none; /* avoid restricting image width */
    margin-top: 2%;
    overflow-y: visible; /* allow content to be visible instead of scrollable */
    height: auto;  /* let image adjust height dynamically */
} 
<!-- Usage Example for Lightbox -->
                <ul>
                    <li class="" id="portfolio_item">
                        <!-- thumbnail image linked to lightbox -->
                        <a href="#img1">
                            <img src="http://www.lorempixel.com/600/600" width=""  height="150px">
                        </a>
                    </li>
                </ul>
                <!-- hidden lightbox container using CSS -->
                <a href="#_" class="lightbox" id="img1">
                    <img src="http://www.lorempixel.com/600/600" class="lightbox_content">
                </a>

Answer №2

Consider adding min-width and/or min-height to the image CSS properties, and implement overflow rules to enable scrolling if the minimum image dimensions exceed the lightbox display size.

By setting the image size to 90% of the lightbox container but ensuring it meets or exceeds the specified min-width, you can maintain control over the image display and enable scrolling as needed using existing scrollbar CSS rules.

It may be necessary to mark these (min-width) rules as !important for added emphasis.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to adjust the spacing between a specific background image in a design pattern? The image must be sourced online

I am currently working on creating a background pattern using only online images, and I need to adjust the spacing between them. Is there a way to specifically control the space between the images in the pattern using CSS? I know about the round and space ...

Retrieve the data contained within a displayed embed tag that includes a src attribute

Can anyone provide guidance on how to retrieve the content of an embed tag using src attribute? I have an embed tag pointing to a custom page as src. I tried to use jquery to access the rendered content but I am not getting anything back. Any suggestions ...

Having trouble implementing the center edge effect in this CSS design

Looking for help with CSS to center the edges of a family tree design. Has anyone experience in working on styling family trees? *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .tree { ...

Using Angular 4 to retrieve a dynamic array from Firebase

I have a dilemma while creating reviews for the products in my shop. I am facing an issue with the button and click event that is supposed to save the review on the database. Later, when I try to read those reviews and calculate the rating for the product, ...

Refreshing all parts of a webpage except for a single div

Currently, I am in the process of creating a simple web page that includes a small music player (niftyPlayer). The individuals I am developing this for request that the player be located in the footer and continue playing when users navigate to different s ...

Adjusting the width of titles in a CSS menu upon hover

I am currently creating a basic CSS menu. However, I am facing an issue where selecting a menu title in the menu bar causes the width of the title to extend to match the width of the associated menu, which is not my desired outcome (the title's width ...

Issue with ellipsis not functioning correctly on dynamic placeholders when they are in focus

When I focus on my dynamic placeholder input, the text-overflow: ellipsis property is lost for some reason. However, it is regained when blurred. Can anyone explain why this is happening? If you want to experiment with it, I have set up a stackblitz: htt ...

How to display and download a PDF file on a JSP web page

Can anyone help me with a simple trick to solve this question I have? In my project folder, I have 5 PDF files named file1.pdf, file2.pdf, file3.pdf, file4.pdf, and file5.pdf. I want to display these files in 5 rows on my webpage, each row containing VIEW ...

I noticed that on my checkout sections, the toggle feature causes them to fold up and then immediately fold back down. This behavior should only happen

Is there a way to make my checkout sections fold up once instead of folding up and down when using toggle? I have created a test case in jsfiddle: (no styling done yet!) http://jsfiddle.net/Wd8Ty/ The code responsible for the behavior is located in AMLRW ...

How can you use jQuery to transform a H3 tag into a clickable link?

To transform the h3 tag into a clickable link with jQuery and set the href attribute, while preserving the H3 styling and adding an anchor tag, you can use the following code as an example: Click Here ...

The canvas's document.getElementById function is unable to find any matching element,

Hello everyone, I am currently diving into the world of javascript and trying to expand my knowledge. However, I have encountered a problem that has me stumped, and I could really use some assistance. While exploring, I came across this page: http://www.w ...

The magic of CSS's 3D Transformation feature

Currently, I am working on a 'Flip' effect using the CSS3 transform Property. While everything seems to be functioning properly in recent versions of Chrome, Firefox, and Safari, I'm facing challenges when it comes to creating a fallback fo ...

The functionality of fetching website titles using Ajax/jQuery is experiencing some limitations

Below is a code snippet for a simple website title getter: $( document ).ready(function() { $("#title").click(function() { var SubURL = $("#input").val(); $.ajax({ url: "http://textance.herokuapp.com/title/"+SubURL+"/", complete: function(da ...

My component reference seems to have gone missing in angular2

Trying to load my Angular 2 app, I encountered this error: https://i.stack.imgur.com/FmgZE.png Despite having all the necessary files in place. https://i.stack.imgur.com/kj9cP.png Any suggestions on how to resolve this issue? Here is a snippet from ap ...

"Keep a new tab open at all times, even when submitting a form in

I have a form with two submit buttons - one to open the page in a new tab (preview) and another for regular form submission (publish). The issues I am facing are: When I click the preview button to open in a new tab, if I then click the publish button a ...

Can you explain the variance between a DIV using display: inline-block versus a SPAN element?

Can you explain the distinction between a DIV using display: inline-block and a SPAN? Furthermore, what sets apart a SPAN with display: block from a DIV? ...

Tips for Serializing and Deserializing an XML Document using Javascript

I keep encountering the error 'parameter1 is not a valid node' when using document.adoptNode. Here's the code snippet in question: $.ajax({ type: "GET", url: url, datatype: "xml", success: function (results) { ...

(Bootstrap) Implementing inline block properties to ensure consistent column display

I am currently working on improving the column layout of a website. However, I am facing an issue where there are large blank spaces if the text lengths or image sizes vary. To test out the theme, I have included some sample products in the image below. h ...

Are there any similar tools to Graphstream in Java that can be used with HTML5 using canvas and JavaScript?

GraphStream is a revolutionary graph library created in Java that offers Java developers a simple way to visually represent dynamic graphs either in memory, on screen, or in files. Check out this demo video. With GraphStream, you can effectively handle th ...

Enable synchronized scrolling and a fixed/sticky header with splitpanes feature

Sandbox.vue <template> <v-container fluid> <Splitpanes class="default-theme" style="height: 400px" > <Pane v-for="i in 2" :key="i" > & ...