Question

我创建了一个灯箱，当你点击它时弹出一个图像，到目前为止这是我的解决方案：

<section>
    <h3>Two Individual Images</h3>
    <div>
        <a style="width:100; height:100;" class="example-image-link" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfqA9FYaMDCm-6KjRIgumjM4F8EHO2qUiqXICnXHPpMc2M0Pyf" data-lightbox="example-2"><img class="example-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfqA9FYaMDCm-6KjRIgumjM4F8EHO2qUiqXICnXHPpMc2M0Pyf" alt="image-1"/></a>
    </div>
</section>

我已经应用CSS内联元素来增加宽度和高度

style="width:500; height:500;"

这是我所做的插件

http://plnkr.co/edit/ryX4px00cGvqZ0lszvBO?p=preview

单击时，为什么图像不会扩展。

Answer 1

您正在调用错误的CSS和JS文件。在你的插上，他们应该是：

<link rel="stylesheet" href="lightbox.css">
...
<script src="lightbox-plus-jquery.min.js"></script>

然后，您的图片不会“展开”，因为它与缩略图完全相同。在href中，您应链接到较大的图片，否则不会“展开”。

修改

如果你想强制调整图像大小，你可以覆盖灯箱CSS（不推荐，但是嘿，你可以玩它）。请尝试在<head>
之后将其添加到<link rel="stylesheet" href="lightbox.css">
<style> .lightbox .lb-image { width: 100%!important; height: auto!important; } </style>

Answer 2

问题是灯箱正在计算内联的宽度和高度。所以你不能用简单的css规则来改变它们。

您有两种可能性：

1。使用更大的图像。灯箱会照顾。

使用css标签！important。 width: 900px !important;我不喜欢这个解决方案。

Answer 3

您需要在内联CSS中定义宽度和高度扩展的像素数： -

<section>
    <h3>Two Individual Images</h3>
    <div>
<a style="width:100px; height:100px;" class="example-image-link" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfqA9FYaMDCm-6KjRIgumjM4F8EHO2qUiqXICnXHPpMc2M0Pyf" data-lightbox="example-2"><img class="example-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfqA9FYaMDCm-6KjRIgumjM4F8EHO2qUiqXICnXHPpMc2M0Pyf" alt="image-1"/></a></div><hr />
</section>

图像宽度未在灯箱上展开

3 个答案: