Saltear al contenido principal

En relación a la galería ->

Parece que hay uncarrusel que al darle click a la imagen abre otro carrusel (una página con footer y demás) y te da la opción de poder verlos como galería.

Por usabilidad y por temas como los que mencionaba en la junta quisiera mencionar un par de cosas.

  • Hay dos formas de mostrar un carrusel como en la primera imagen
  • Lo ideal (y reconocible para los usuarios) es el uso de un «lightbox», el cual es un overlay pero no lleva elementos adicionales de página, se pone sobre la página que estés. El no mostrar más que la imagen evita problemas de solapamiento en lo responsivo, que el fooer se ponga encima de la foto y cosas similares. Más abajo pongo un ejemplo de lightbox, el cuál por lo que mencionaba en la junta, valdría la pena usar como referente para este tipo de galerías.
Captura de Pantalla 2022 06 24 a las 19.05.36

Dos tipos de carrusel

A

A. La imagen como elemento

  • En este caso la imagen se muestra siempre con una relación predefinida y crece o se achica proporcionalmente
  • Como la imagen es un elemento, es clickable y se le atribuye fácilmente una acción (como abrir el lightbox)
  • Si está agrupada en un grid o un carrusel, es muy fácil hacer un lightbox con las imágenes que compongan el grid o carrusel.
B

B. La imagen como fondo de otros elementos (divs/slides)

  • En este caso la imagen es el fondo del slide
  • Como la imagen es un fondo que se centra o crece en relación al elemento, puede mantenerse un mismo alto, sin importar el tamaño de la ventana.
  • Como es un comportamiento más complejo, normalmente se utilizan modulos un poco más complejos para hacer estos carruseles (no tan fácil como seleccionar un numero de imagenes y decir «muestrelo en carrusel»), que implican crear un slide, seleccionar imagen de fondo, etcétera.
  • La imagen en sí no es clickable, aunque podría atribuirse un link a todo el contenedor o a un elemento dentro (como un botón)
  • Por lo anterior, digamos que se convierte en un elemento separado a lo que sería un carrusel con lightbox. En este caso habría que darle click a algo para que abriera una (otra) galeria que tuviera lighbox
  • Lo anterior implica entonces subir las imágenes al carrusel tipo B y luego mediante un click hacer que se muestre una galería (que no es el lightbox), si no que tendría que «aparecer» un nuevo elemento en la página, que a la vez tenga el lightbox… jeje esto mismo demuestra que es más complejo que el «A».
  • En este caso además, sería muy complejo que al darle click a la segunda imagen por ejemplo, te mostrara la segunda imagen de la galería con lightbox, el comportamiento normal sería que te abriera una galería (un grid) y luego ya pudieras ver la que quieras grande (ejemplo: https://limans.faenahost.com/property/villa-kin-ich-playa-del-carmen/ )
  • Por lo anterior si se usara una de este tipo, yo optaría por tener una sola imagen de cabezote y añadir un botón de «ver galería», por ejemplo.

Del lightbox

Esta es un carrusel de tipo A. Verás el asunto que tiene al agrandar o achicar tu navegador, lo que puede hacer que en pantallas grandes no la veas toda.

Pero lo que quiero ejemplificar es el lightbos, lo que muestra al dar click en una photo.

Captura de Pantalla 2022 06 24 a las 19.59.16
Captura de Pantalla 2022 06 24 a las 19.59.21

con este «fancybox», que es un standard y de los más usados pueden hacerse cosas como:

  • Cambiar color y opacidad de fondo (puede ser el terracota porejemplo
  • quitar botones de navegación (zoom, play, grid, numeración) o modificarlos un poco (tamaño, color; el tamaño no se recomienda tanto)
  • Modificar el estilo de las flechas
  • Añadir un logo o algún contenido (no recomendable, por lo de la responsividad)
  • Pueden añadirse un título y una reseña a cada imagen, o no.
Captura De Pantalla 2022 06 24 A Las 20.21.54