Показать несколько изображений при нажатии одного изображения с помощью лайтбокса

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>