Question

我正在尝试编写一个灯箱，在点击div时显示容器内的图像。

所述div具有要显示为背景图像的实际图像，用作缩略图。

这些图像将由用户加载，因此我没有实际的宽度和高度。

所以我有一堆div用图像作为背景，一个灯箱带有容器，图像（带有空src）和每次点击缩略图时显示的描述。

为此，我使用了这个：

//设置灯箱的图像和描述

            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);

问题是我不知道描述将持续多长时间，并且未设置容器的宽度，因为它将采用其较大元素的宽度。但是，它的高度始终是屏幕的50％，因此图像将改变其原始大小。

我想将生成的图像的宽度设置为容器的宽度，因此描述文本将包装在图像的底部。

我该怎么做？我在这里阅读了很多答案，但其中没有一个似乎有用，因为我加载页面时已经有了0,0维度创建的灯箱图像。我只是改变它的来源，因此onload和ready函数不能按预期工作。

Answer 1

根据我的理解，您可以尝试创建和图像对象，并在onload处理程序中，设置容器宽度和src的{{1}}，如下所示。

.lightBoxImage

使用jquery获取动态图像的客户端图像宽度

1 个答案: