使用灯箱

Question

我想只显示一张图片，但在点击图片时，应使用灯箱显示剩余的图像。但是，不可见的图像不应占用网页中的空间。同样，我不希望在网页中占用空间的图像不可见。它应该是隐藏的，不占用任何空间。

这是我的代码：

  $(document).ready(function () {
        $('.ClassicRoom a').lightBox();
    });
 <div class="ClassicRoom">
    <a href="../Project%20Pics/ClassicRooms/ClassicRoom2.jpg" data-title="My caption" data-lightbox="classicroom">
        <img src="../Project%20Pics/ClassicRooms/ClassicRoom2.jpg" tooltip="Rooms&Suites" data-lightbox="classicroom" />
    </a>
        <a href="../Project%20Pics/ClassicRooms/ClassicRoom1.jpg" data-title="My caption" data-lightbox="classicroom">

    </a>
        <a href="../Project%20Pics/ClassicRooms/ClassicRoom3.jpg" data-title="My caption" data-lightbox="classicroom">

    </a>
        <a href="../Project%20Pics/ClassicRooms/ClassicRoom.jpg" data-title="My caption" data-lightbox="classicroom">

    </a>
    </div>