¿Es posible iluminar muchas imágenes pero solo mostrar una imagen para activarlas?

Question

Estoy usando Lightbox para visualizar fotos. Así que si tengo dos categorías de fotos, "trabajo" y "vacaciones", lo haría ...

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

Esto muestra 6 imágenes, y al hacer clic en uno de ellos, se inicia la mesa de luz.

Sin embargo, me gustaría poder mostrar solo dos imágenes inicialmente (una para 'trabajo', una para 'vacaciones'), pero cuando se hace clic en una de ellas, se comporta como en el primer ejemplo, p. mostrar todas las fotos en esa categoría a través de Lightbox.

¿Esto es posible? ¿Si es así, cómo?

¡Toda ayuda es muy apreciada! :)

Gracias

Answer 1

Si simplemente no pone nada en el valor de nodo del ancla que no aparecen, aunque Es posible que desee asegurarse de que no haya ningún espacio en blanco entre estos anclajes vacíos en caso de que aparezca el espacio en blanco.

<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

Añadir una clase CSS para la segunda y tercera imagen en cada categoría de ocultarlo desde el navegador. Por ejemplo:

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

A continuación, agregue a su archivo CSS:

a.hidden{display:none;}

Answer 3

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