Можно ли поставить лайтбокс в несколько изображений, но показать только одно изображение, чтобы активировать их?

Question

Я использую лайтбокс для отображения фотографий. Так что, если у меня есть две категории фотографий, «работа» и «отпуск», я бы сделал ...

<a href="images/image-1.jpg" rel="lightbox[work]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[work]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[work]">image #3</a>

<a href="images/image-4.jpg" rel="lightbox[vacation]">image #4</a>
<a href="images/image-5.jpg" rel="lightbox[vacation]">image #5</a>
<a href="images/image-6.jpg" rel="lightbox[vacation]">image #6</a>

Отображается 6 изображений, и когда я нажимаю на одно из них, запускается лайтбокс.

Однако я хотел бы иметь возможность отображать только два изображения изначально (одно для «работы», другое для «отпуска»), но при нажатии на одно из них оно ведет себя как первый пример, например, показать все фотографии в этой категории через лайтбокс.

Возможно ли это? Если да, то как?

Любая помощь очень ценится! :)

Спасибо

Answer 1

Если вы просто не добавляете ничего в значение узла якоря, они не отображаются, хотя вы можете позаботиться о том, чтобы между этими пустыми якорями не было пробелов на случай, если пробел появится.

<a href="images/image-1.jpg" rel="lightbox[work]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[work]"></a>
<a href="images/image-3.jpg" rel="lightbox[work]"></a>
<a href="images/image-4.jpg" rel="lightbox[vacation]">image #2</a>
<a href="images/image-5.jpg" rel="lightbox[vacation]"></a>
<a href="images/image-6.jpg" rel="lightbox[vacation]"></a>

Answer 2

Добавьте класс css ко второму и третьему изображению в каждой категории, чтобы скрыть его от браузера.Например:

<a href="images/image-1.jpg" rel="lightbox[work]">image #1</a>
<a class="hidden" href="images/image-2.jpg" rel="lightbox[work]">image #2</a>
<a class="hidden" href="images/image-3.jpg" rel="lightbox[work]">image #3</a>

<a href="images/image-4.jpg" rel="lightbox[vacation]">image #4</a>
<a class="hidden" href="images/image-5.jpg" rel="lightbox[vacation]">image #5</a>
<a class="hidden" href="images/image-6.jpg" rel="lightbox[vacation]">image #6</a>

Затем добавьте в свой файл CSS:

a.hidden{display:none;}

Answer 3

<a href="../gallery/renos/logo.jpg" rel="lightbox[renovation]"></a>