Este componente no se puede utilizar con los anuncios AMP HTML, los anuncios de vídeo ni los anuncios de imagen.
Elegir la galería adecuada
Google Web Designer tiene cuatro componentes de galería distintos:
- Galería 360°: muestra imágenes de los diferentes lados de un objeto, lo que le permite deslizar el dedo hacia delante y hacia atrás para girar el objeto. Esta galería no muestra grupos ni elementos de navegación.
- Galería deslizable: tiene un aspecto sencillo y claro. Permite deslizar el dedo por las imágenes o los grupos en sentido vertical u horizontal.
- Galería en carrusel: es similar a la deslizable, pero muestra las imágenes adyacentes en tres dimensiones, como si estuvieran en un expositor giratorio.
- Galería de transiciones: ofrece una serie de efectos de animación al pasar de una imagen a la siguiente.
Usar el componente Galería deslizable
-
Abra el panel Componentes y, luego, la carpeta Galerías.
-
Arrastre el componente Galería deslizable a la escena.
-
En la sección de propiedades del componente Galería deslizable, que se encuentra en el panel Propiedades, asigne un nombre al componente.
-
Añada un conjunto de imágenes o de grupos. Utilice grupos para mostrar elementos que no sean imágenes o para mostrar varios elementos en un solo fotograma.
- Para añadir imágenes, siga uno de los siguientes métodos:
-
En la sección de propiedades del componente Galería deslizable, que se encuentra en el panel Propiedades, añada las URLs de sus imágenes, separadas por comas, en el campo Imágenes.
-
En la sección de propiedades del componente Galería deslizable, que se encuentra en el panel Propiedades, haga clic en el botón Seleccionar imágenes de la galería . Haga clic en el botón Elegir archivos para buscar archivos de imagen o arrástrelos directamente al cuadro de diálogo.
-
-
Para añadir grupos a la galería:
- En la sección de propiedades del componente Galería deslizable, que se encuentra en el panel Propiedades, añada una lista de nombres de grupos en el campo Grupos, separados por comas.
- Para añadir imágenes, siga uno de los siguientes métodos:
-
También puede ajustar las propiedades del componente (a continuación se explica cómo hacerlo).
Utilizar grupos en la Galería deslizable
La Galería deslizable puede contener conjuntos de imágenes o de grupos. Los grupos permiten utilizar recursos que no son imágenes (como vídeos) o varios recursos en cada fotograma de la galería (como imágenes con texto superpuesto).
Cuando utilice vídeos u otros recursos interactivos, deberá seleccionar Desactivar la función de deslizar en el panel Propiedades. De este modo, el usuario podrá interactuar con los controles de vídeo. Puede usar el componente Navegación por la galería para que el usuario pueda moverse por sus fotogramas.
Para crear una galería que muestre una combinación de imágenes y grupos, convierta primero las imágenes que quiera utilizar en grupos.
También puede mostrar varios elementos dinámicos en la galería mediante grupos.
Reordenar o quitar imágenes de la galería
- En la sección de propiedades del componente Galería deslizable, que se encuentra en el panel Propiedades, haga clic en el botón Seleccionar imágenes de la galería .
- Arrastre una imagen a su nueva posición o coloque el cursor sobre ella y haga clic en el botón Eliminar imagen para quitarla de la galería.
- Haga clic en Aceptar.
Propiedades
Propiedad | Descripción |
---|---|
Nombre | Permite asignar un nombre al componente de la Galería deslizable. |
Imágenes | Le permite seleccionar las imágenes que se usan en la galería. Puede estar vinculado con datos dinámicos. |
Grupos | Lista de grupos delimitada por comas para usarla en la galería. Puede estar vinculado con datos dinámicos. |
Transición | El tiempo (en milisegundos) de transición entre imágenes. |
Fotograma de inicio | El número del fotograma que desea mostrar al inicio. |
Mostrar fotogramas | El número de fotogramas que se muestran de una vez en la galería. |
Marcos deslizables | El número de fotogramas que avanzan cada vez que se utiliza la función de deslizar. |
Reproducción automática | Si se marca esta opción, se reproducen las imágenes de la galería de forma automática. |
Incluir navegación | Si se marca esta opción, se incluyen iconos de navegación para desplazarse a través de la galería. |
Usar miniaturas | Si se marca esta opción junto con "Incluir navegación", se muestran imágenes en miniatura para la navegación, en lugar de iconos. |
Color de resaltado | Permite establecer el color de resaltado de la imagen de navegación. |
Escalado | Determina cómo se visualizan imágenes de diferentes tamaños dentro del tamaño fijo del fotograma:
|
Dirección | Permite determinar si las imágenes se mueven de forma horizontal o vertical en la galería. |
Propiedades avanzadas
Para mostrar las propiedades avanzadas del componente, vaya al panel de propiedades y haga clic en el icono de mostrar situado junto a Propiedades avanzadas.
Propiedad avanzada | Descripción |
---|---|
Distancia del marco | La distancia entre las imágenes. |
Anchura del fotograma | La anchura (en píxeles) del fotograma de la imagen dentro de la galería. |
Altura del fotograma | La altura (en píxeles) del fotograma de la imagen dentro de la galería. |
Duración de reproducción automática | Duración (en milisegundos) de la reproducción de la galería desde el primer fotograma hasta el último. Este tiempo se distribuye equitativamente entre cada imagen, a menos que se seleccione un Intervalo de paso de reproducción automática distinto. |
Intervalo de paso de reproducción automática | Duración (en milisegundos) de la visualización de cada imagen cuando está habilitada Reproducción automática. Las imágenes se reproducen con esta duración hasta que se alcanza la duración total de Reproducción automática, pasando por las imágenes varias veces si fuera necesario. |
Direcciones URL de salida | Lista de direcciones URL separadas por comas que se corresponden con cada uno de los fotogramas de la galería. Puede estar vinculado con datos dinámicos. |
Desactivar la función de deslizar | Casilla que permite inhabilitar la navegación por deslizamiento en la galería. De esta forma, el usuario puede interactuar con elementos del fotograma sin que su interacción provoque ningún cambio en este de manera accidental. Si esta casilla está marcada, significa que puede usar la propiedad "Incluir navegación" o el componente Navegación por la galería para cambiar de fotograma. |
Pausar la reproducción de archivos multimedia al abandonar el fotograma | Si esta casilla está marcada, se pone en pausa el audio o el vídeo que se está reproduciendo en el fotograma actual cuando se pasa a otro fotograma. De este modo, se evita tener contenido indeseado reproduciéndose en segundo plano. |
Reanudar la reproducción de archivos multimedia al acceder al fotograma | Si esta casilla está marcada, se reanuda el audio o el vídeo que estaba en pausa en un fotograma cuando pasa a estar activo. |
Eventos y acciones
Eventos que envía el componente Galería deslizablePuede activar otras acciones basadas en los siguientes eventos del componente Galería deslizable:
Evento | Descripción |
---|---|
Primera interacción | Se envía cuando el usuario interactúa por primera vez con la galería. |
Todos los fotogramas vistos | Se envía cuando todos los fotogramas de la galería se han mostrado, como mínimo, una vez. |
Imágenes cargadas | Se envía cuando todos los fotogramas de la galería se han cargado. |
Reproducción automática finalizada | Se envía cuando la reproducción automática finaliza por cualquier motivo. |
Fotograma mostrado | Se envía cuando todos los fotogramas se muestran completamente. |
Marco activado | Se envía cuando se inicia un cambio de fotograma. |
Fotograma reproducido de forma automática | Se envía cuando un fotograma se muestra automáticamente durante la reproducción automática. |
Pulsación de fotograma | Se envía cuando se hace clic en el fotograma. |
Extremo izquierdo | Se envía cuando la galería alcanza su extremo izquierdo tras haberla deslizado. |
Extremo derecho | Se envía cuando la galería alcanza su extremo derecho tras haberla deslizado. |
Ratón sobre un fotograma | Se envía cuando el ratón entra en el fotograma. |
Ratón fuera de un fotograma | Se envía cuando el ratón sale del fotograma. |
Inicio de seguimiento | Se envía cuando se inicia el arrastre con el cursor del ratón o la acción táctil. |
Seguir | El componente registra los datos de las coordenadas X e Y asociados con el arrastre del cursor del ratón o de la acción táctil. |
Fin de seguimiento | Se envía cuando finaliza el arrastre con el cursor del ratón o la acción táctil. |
Para seleccionar uno de estos eventos en el cuadro de diálogo Evento, defina el componente Galería deslizable como objetivo.
Las siguientes acciones del componente Galería deslizable pueden activarse como respuesta a otros eventos:
Acción | Opciones de configuración |
---|---|
Ir al fotograma |
|
Rotar una vez |
|
Detener rotación | ninguna |
Mover hacia adelante | ninguna |
Mover hacia atrás | ninguna |
Cuando seleccione una de estas acciones en el cuadro de diálogo Evento, defina el componente Galería deslizable como receptor.
Consulte cómo configurar eventos.
Vista previa
En la escena, el componente Galería deslizable solo muestra el fotograma inicial para que pueda hacerse una idea del aspecto que tendrá. Para ver cómo funciona, previsualice el documento en su navegador preferido haciendo clic en el botón Vista previa, situado en la esquina superior derecha.