Componente Galería deslizable

Este componente no se puede utilizar con los anuncios AMP HTML, los anuncios de vídeo ni los anuncios de imagen.

El componente Galería deslizable le permite crear una galería sencilla que los usuarios pueden deslizar hacia adelante y hacia atrás para mostrar un conjunto de imágenes o de grupos diferentes. Este componente se puede usar en anuncios dinámicos.

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

1. Abra el panel Componentes y, luego, la carpeta Galerías.

2. Arrastre el componente Galería deslizable  a la escena.

3. En la sección de propiedades del componente Galería deslizable, que se encuentra en el panel Propiedades, asigne un nombre al componente.

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

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

1. 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 .
2. 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.
3. 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: Modificar tamaño de la imagen para ajustar: se cambia el tamaño de la imagen proporcionalmente según sea necesario para que se ajuste al fotograma, pero no se recorta. Se añadirá relleno si la proporción de la imagen y la del fotograma son distintas. Recortar imagen para rellenar: se cambia el tamaño de la imagen para que cubra completamente el fotograma. Para ello, se recorta según sea necesario si la proporción del fotograma y la de la imagen son distintas. Ninguna: la imagen se muestra en su tamaño original, centrada en el fotograma. Si la imagen es más pequeña que el fotograma, el espacio extra se rellenará con transparencia. Si es mayor, se recortará. Estirar imagen para rellenar: se cambia el tamaño de la imagen y se estira según sea necesario para que coincida con las dimensiones del fotograma, pero no se recorta.
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 deslizable

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

Acciones que realiza el componente Galería deslizable

Las siguientes acciones del componente Galería deslizable pueden activarse como respuesta a otros eventos:

Acción	Opciones de configuración
Ir al fotograma	Número de fotograma Animar: "none" o "slide"
Rotar una vez	Tiempo de rotación: tiempo en milisegundos. Dirección: "forwards" o "backwards"
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.