▷ Cómo crear una presentación de diapositivas animada en Drupal 8 |

Introducción: agregar presentaciones de diapositivas de imágenes dinámicas

Estas Tutorial discutir cómo crear uno animado JavaScript Presentación de diapositivas de imágenes en Drupal 8 Uso de Ver presentación de diapositivas, jCarousel y FlexSlider Módulos.

Problema: Cómo utilizar Puntos de vista crear JavaScript Animaciones de presentación de diapositivas de archivos de imagen guardados en un formato. se almacenan Drupal 8 ¿Sitio web? ¿Qué opciones de orden de fotogramas, velocidad de fotogramas y efectos de transición?

Solución: Instalar eso Ver presentación de diapositivas, jCarousel y FlexSlider Módulos para Drupal 8. Con estos módulos puede crear fácilmente presentaciones de diapositivas de imágenes Puntos de vista & usar como bloques en el platos.

Existen diferentes métodos de filtrado con imagen Tipos de contenido y Taxonomía Categorías. Drupal 8 Los creadores de sitios deben tener un sistema de publicación para Imágenes de presentación de diapositivas.

Vamos a empezar.

Paso 1: Instale los módulos de Drupal 8 y agregue contenido de imagen

Empezar: Instale los tres módulos necesarios utilizando los métodos Upload, FTP, URL, Git, Composer, etc. Ver presentación de diapositivas, jCarousel y FlexSlider hacia Drupal 8.

Cómo crear una presentación de diapositivas animada en Drupal 8

    mkdir -p libraries/jquery.cycle && cd$_ && wget https://malsup.github.io/jquery.cycle.all.js 
    && mkdir -p ../../libraries/jquery.hoverIntent && cd$_ && wget https://raw.githubusercontent.com/briancherne/jquery-hoverIntent/master/jquery.hoverIntent.js 
    && mkdir -p ../../libraries/json2 && cd$_ && wget https://raw.githubusercontent.com/douglascrockford/JSON-js/master/json2.js

Nota: Si utiliza Administrador de archivos y cPanel, es posible que deba cambiar esos / sites / default Permisos de carpeta en 755 para obtener el ../Bibliotecas Carpeta para el JavaScript Dependencias.

Próximo: Después de instalar el JavaScript Bibliotecas y otras dependencias, prepárate para construir Puntos de vista creando un tipo de contenido de imagen personalizado y una lista de Taxonomía Condiciones.

Configuración para el nuevo tipo de contenido: “Imagen de presentación de diapositivas”

Sin promoción de portada, en la parte superior de listas o revisiones.
No se muestra el nombre del autor ni la información de la publicación.
Sin comentarios.

Nota: Crea un nuevo tipo de contenido llamado Imagen de presentación de diapositivas y agregue un cuadro de imagen a la pantalla para contener los archivos utilizados en Presentaciones de diapositivas. Asegúrate de tener el Miniatura Tamaños.

Módulos opcionales: recorte de imágenes:

Nota: Si prefiere recortar las imágenes a medida que las carga para que se ajusten a cualquier tamaño de animación de presentación, instale API para recortar y recortar widgets de imágenes. También puede resultar útil tener más de un tipo de contenido de imagen.

Widget de imagen de recorte:https://www.drupal.org/project/image_widget_crop
API de cultivos:https://www.drupal.org/project/crop
Biblioteca de Cropper:https://github.com/fengyuanchen/cropper
—> subir a / bibliotecas / cropper / dist

Próximo: El mismo tipo de contenido de imagen se puede usar para múltiples presentaciones de diapositivas agregándolos Taxonomía Condiciones. También puede asociar Taxonomía con imágenes de diferentes tamaños para tema Regiones.

Terminado: Construye el Taxonomía Términos utilizados para filtrar imágenes de presentaciones de diapositivas, por ejemplo, página principal, barra lateral, encabezado, pie de página, etc. y más arriba. para ser agregado al tipo de nodo CCK Campos que personalizan la visualización.

Paso 2: crea un bloque con presentación de diapositivas de vistas.

Empezar: Si el Taxonomía creado y subido las imágenes de la presentación de diapositivas, vaya a Puntos de vista y crear un nuevo filtro de contenido para Imagen de presentación de diapositivas Archivos y seleccionar Ver presentación como publicidad.

Nota: Puede cambiar la configuración de la animación, incluida la velocidad de fotogramas, los efectos de filtro y cambio de página, etc.en el Ver presentación Configuración mientras está en uso Puntos de vista para el número y la aleatorización.

Configuración recomendada para Vistas de presentación de diapositivas (Drupal 8):

Piel:defecto
Tipo de presentación de diapositivas:ciclo
Causa:desvanecimiento
Acción: Pausa al pasar el mouse

Terminado: Comparar Ver presentación a otras soluciones para usar otras JavaScript Animaciones en Tema de Drupal 8 Regiones o para separar campañas, gestionar anuncios, decoraciones, iconos, etc.

Paso 3: crea una animación de jCarousel en un bloque

Empezar: En este tutorial usaremos Ver presentación de diapositivas, jCarousel y FlexSlider intercambiable con los mismos filtros de imagen en Puntos de vista para demostrar el software.

Próximo: Clonar el Ver presentación Bloquear y guardar el nuevo Bloquear llamadas Con jCarrusel como publicidad. Utilice los ajustes de configuración proporcionados para cambiar los efectos de animación y la velocidad.

Configuración recomendada para jCarousel en vistas (D8):

Resumir contenido:Circular
Piel: defecto
Número de elementos visibles:automóvil
Desplazarse:automóvil

Terminado: Salva el vista y comparar las diferencias entre Presentación de diapositivas de jCarousel y vistas para sus necesidades de diseño web. Cree animaciones personalizadas y presentaciones de diapositivas para cualquier tamaño de imagen.

Paso 4: crea una animación FlexSlider en un bloque

Configuración recomendada para FlexSlider en vistas (D8):

Tasa de opción:Carrusel simple
Campo de etiquetado:Contenido: Título

Nota: Pruebe sus presentaciones de diapositivas de imágenes con Ver presentación de diapositivas, jCarousel y FlexSlider como motor de visualización para ver cuál se adapta al tuyo tema, cuadra Región, o Barra lateral Animación.

Terminado: Cargue nuevas imágenes para cualquier tamaño de presentación de diapositivas (encabezado, pie de página, barras laterales, etc.) o campaña publicitaria. Cree nuevas animaciones de presentación de diapositivas listas para Placas y bloques.

Paso 5: incrustar bloques de presentación de diapositivas en páginas de Drupal

Nota: Cree presentaciones de diapositivas de imágenes de diferentes tamaños para las áreas de encabezado, pie de página y barra lateral en el diseño. Vea varias presentaciones de diapositivas para secciones del sitio, campañas publicitarias o como una navegación GUI.

Terminado: Usar Placas y bloques Regiones en Drupal 8 posición JavaScript Presentaciones de diapositivas de imágenes con Ver presentación de diapositivas, jCarousel y FlexSlider donde sea necesario para el diseño de sitios web.

Conclusión: presentaciones de diapositivas de imágenes de Drupal 8 y JavaScript

Resumen: Cual JavaScript Solución de animación que elijas Drupal 8 depende de Tema, diseño gráfico y calidad de imagen. Cada control deslizante tiene funciones para un elemento GUI.

Ver presentación de diapositivas, jCarousel y FlexSlider son de código abierto y de uso gratuito, lo que permite a los artistas y desarrolladores experimentar con las variables para una variedad de efectos de animación personalizados.