I'm trying to write a lightbox that shows an image inside a container when a div is being clicked.
Said div has the actual image to be displayed as a background image, working as a thumbnail.
These images will be loaded by users so I don't have their actual width and height.
So I have a bunch of divs with images as background and a lightbox with a container, image (with an empty src) and description that shows up everytime a thumbnail is clicked.
For that, I used this:
//Set image and description of lightbox
var imageToDisplay = $(this).siblings(".selfieImage") .css("background-image") .replace(/"/g, "") .replace(/url\(|\)$/ig, ""); var descToDisplay = $(this).siblings(".selfieImage") .attr("data-description"); $('.lightBoxImage').attr('src', imageToDisplay); $('.lightBoxDescription').text(descToDisplay);
The thing is I don't know how long the description is going to be, and the width of the container is not set as it will take the width of its larger element. However, its height will always be the 50% of the screen, so the images will change its original size.
I want to set the width of the generated image as the width of the container, so the description text will wrap at the bottom of the image.
How can I do that? I read a lot of answers here but none of those seem to work because I already have my lightbox image created with 0,0 dimentions when I load the page. I'm just changing its source, so the onload and ready function don't work as expected.