Adjusting the settings on my lightbox

Question

Adjusting the settings on my lightbox

Recently, I created a basic lightbox with the following code snippet:

Here is the jQuery code:

var $overlay =$('<div class="overlay"></div>');

$('body').append($overlay);

$('img').click(function(){
$overlay.show();
});

And here is the associated CSS:

   .overlay {
    width: 100%;
    height:100%;
    background:grey;
    display:none;
position: absolute;
top:0;
    }

It's quite simple as I have only written code for the overlay that appears when an image is clicked and triggers the lightbox.

Now, I have a couple of questions regarding this setup:

If my webpage is longer than the screen, what code should I use to prevent scrolling when the lightbox is activated?
Is there a way to adjust the size of the lightbox $overlay so that it only fills the visible part of the screen? I have images spread throughout the webpage and want the lightbox to fill only the current viewport when triggered.

javascript jquery css

Answer 1

Answer №1

After careful consideration, I have decided to share my insights with you.
Let's start with your JavaScript code. It seems like you have created separate .overlay elements for each image, which is unnecessary.
Instead, you can simplify it by creating a single overlay as follows:

<div class="overlay"><img src="#" width="500"/></div>

Then, when an image is clicked on your webpage, dynamically set the image source in the overlay like this:

$('img').click(function(){
    var src = $(this).attr('src');
    $('.overlay').fadeIn();
    $('.overlay img').attr('src',src).css('margin-top',($(window).height() - $('.overlay img').height()-20)/2);
});
$('.overlay').click(function(){
    $(this).fadeOut();
});

Now let's move on to addressing your main question.
To achieve the desired effect, you need to utilize CSS.
Start by setting the height and width of the body and html to 100%, and remove any margins to prevent scroll bars from appearing:

body, html{
    width:100%;
    height:100%;
    margin:auto;
}

Next, change position:absolute; to position:fixed; to make the overlay appear over the clicked image:

.overlay {
    width: 100%;
    height:100%;
    background:grey;
    display:none;
    position: fixed;
    top:0;
    text-align:center;
    cursor:pointer;
}

Add some additional CSS styles to enhance the appearance:

.overlay img{
    border-radius:5px;
    border:10px solid white;
    box-shadow: 0 0 5px black;
}

And voila!

Check out the JSFiddle Demo for a visual representation

Make sure to explore the code in this JSFiddle for a better understanding

Answer 2

After careful consideration, I have decided to share my insights with you.
Let's start with your JavaScript code. It seems like you have created separate .overlay elements for each image, which is unnecessary.
Instead, you can simplify it by creating a single overlay as follows:

<div class="overlay"><img src="#" width="500"/></div>

Then, when an image is clicked on your webpage, dynamically set the image source in the overlay like this:

$('img').click(function(){
    var src = $(this).attr('src');
    $('.overlay').fadeIn();
    $('.overlay img').attr('src',src).css('margin-top',($(window).height() - $('.overlay img').height()-20)/2);
});
$('.overlay').click(function(){
    $(this).fadeOut();
});

Now let's move on to addressing your main question.
To achieve the desired effect, you need to utilize CSS.
Start by setting the height and width of the body and html to 100%, and remove any margins to prevent scroll bars from appearing:

body, html{
    width:100%;
    height:100%;
    margin:auto;
}

Next, change position:absolute; to position:fixed; to make the overlay appear over the clicked image:

.overlay {
    width: 100%;
    height:100%;
    background:grey;
    display:none;
    position: fixed;
    top:0;
    text-align:center;
    cursor:pointer;
}

Add some additional CSS styles to enhance the appearance:

.overlay img{
    border-radius:5px;
    border:10px solid white;
    box-shadow: 0 0 5px black;
}

And voila!

Adjusting the settings on my lightbox

Answer №1

Check out the JSFiddle Demo for a visual representation

Make sure to explore the code in this JSFiddle for a better understanding

Similar questions

I want to create a form with two dropdown menus placed side by side within a parent DIV, and I want them to collectively occupy the entire width using Bootstrap

Adjust the parent div's background when hovering over it

Transfer information to a php file through ajax

Developing single-page application frontends without utilizing node or npm

"Troubleshooting the alignment problem in a Bootstrap 5 inline form

Clickable Parent URL in Bootstrap 5 Dropdown

Sharing information between different components in React can be done using props, context, or a

Transform Dynamic Array to JSON structure

Receiving "this" as an undefined value within the TypeScript class

Issue: Unable to locate file 'socket.io-client/dist/socket.io.min.js'

Tips for saving a file to a mapped path in an ApiController using ASP .NET MVC4

Methods used on a server and methods used on a client-side application

Why can't the file upload button locate its CSS styles?

Invisible Dropdown Feature in Google Places Autocomplete

Show the JSON data retrieved from an AJAX request in an HTML table

When attempting to add an option to the fieldset in jtable and Java servlet, the entire column fails to display

Both axios post request and JQuery $.ajax request are resulting in a 403 forbidden error when accessed from a mobile device

My navbar in bootstrap is having trouble staying aligned with the button and search box. What can I do to ensure everything stays in line?

Switch from using fetch to utilizing axios for making API requests

Try utilizing a variety of background hues for uib progressbars