Carrusel de imágenes Modx en la página del producto. grande y aterrador

¡Hola comunidad!

En esta nota, aprenderá qué son las pestañas de formularios múltiples y cómo crear una configuración con un conjunto de datos diferente. Y, por supuesto, crearemos un control deslizante con usted que tendrá diferentes tipos de diapositivas, y al final encontrará una muy historia interesante que no me atreví a contarle a nadie durante mucho tiempo (a menos, por supuesto, que estés interesado, pero la historia es interesante, créeme). Y así, ejemplos de diapositivas:

• Imagen de fondo
• Fondo de vídeo
• fondo de color sólido

¡Atención! Esta vez, no quiten a los niños y mujeres embarazadas de las pantallas, ¡porque esto es algún tipo de discriminación por edad y género!

asi sera

¡Otro anuncio! A menudo me referiré a la primera lección para no repetirme, por lo que le recomiendo encarecidamente que se familiarice con

¿Para qué?

Fantaseemos: obtienes un proyecto en el que, por ejemplo, en la página principal hay un control deslizante con varios tipos de diapositivas, una tiene un fondo de video, otra tiene una imagen y la tercera tiene un color sólido, por ejemplo. No creará un conjunto de campos (una configuración) y meterá (perdón por el léxico) todos estos campos en él y le dirá al gerente cómo vivir con él y ser. No es actitud seria!? (Espero que alguien entienda)

Por la causa

Entendimos el "por qué" con usted, ahora descubramos el "cómo". Si ya ha leído la primera lección, debemos ir a la página de componentes MIGX y crear 3 configuraciones. Preinstale ColorPicker de Jako (pero no importa):

¡Todo lo que no esté indicado por mí, sáltate!

configuración sólida (color sólido)

• pestaña Ajustes
  • Nombre- sólido
  • Añadir nueva categoria- Control deslizante
• pestaña fichas de formato
  • Campos Campos crear 3 campos
    1. Color de fondo:
       • nombre del campo-bgcolor
       • Subtítulo- Seleccionar color de fondo
       • Tipo de TV de entrada- ColorPicker (o el que usted
         usar)
    2. Título:
       • nombre del campo encabezamiento
       • Subtítulo- Título de la diapositiva
    3. Descripción:
       • nombre del campo- descripción
       • Subtítulo- Descripción de la diapositiva
       • Tipo de TV de entrada-área de texto
  • Campo de pestañas de formato múltiple-tipo( valor dado será el nombre de la clave en
    matriz de salida. Predeterminado: MIGX_formname)
  • - Con un color sólido en el fondo (Texto
    esta configuración en la lista de selección)
  • - sólido (El valor del mismo tipo de campo
    en matriz)

configuración de vídeo

• pestaña Ajustes
  • Nombre- video
  • Categoría- Control deslizante
• pestaña fichas de formato
  • Campos- Crear 1 ficha y en el campo Campos nuevamente, creamos 3 campos, solo uno de estos campos es de un tipo diferente.

    Debo aclarar aquí que la cantidad de campos y sus tipos en diferentes configuraciones pueden ser tan diferentes como limitada sea tu imaginación... Pero sé que todo está en orden con tus fantasías?

    1. Video (es decir, archivo):
       • nombre del campo- video
       • Subtítulo- Subir vídeo
       • Tipo de TV de entrada- archivo
    2. Título:
       • nombre del campo encabezamiento
       • Subtítulo- Título de la diapositiva
    3. Descripción:
       • nombre del campo- descripción
       • Subtítulo- Descripción de la diapositiva
       • Tipo de TV de entrada-área de texto
  • Campo de pestañas de formato múltiple- tipo
  • Texto de opciones de pestañas de formato múltiple- Con vídeo de fondo
  • Valor de opciones de fichas de formato múltiple- video

configuración del control deslizante

Por defecto aceptará una imagen y será una especie de configuración principal.

• pestaña Ajustes
  • Nombre- control deslizante
  • Categoría- Control deslizante
  • Reemplazar "Agregar elemento"- Agregar diapositiva
  • Título del formulario
  • título de la ventana- Añadir/editar diapositiva
• pestaña fichas de formato
  • Campos- Crear 1 pestaña y en el campo Campos nuevamente crear 3 campos
    1. Imagen:
       • nombre del campo- imagen
       • Subtítulo- Subir una imagen
       • Tipo de TV de entrada- imagen
       • Especifique la fuente de los archivos que necesita, describí esta tarea en la primera lección
    2. Título:
       • nombre del campo encabezamiento
       • Subtítulo- Título de la diapositiva
    3. Descripción:
       • nombre del campo- descripción
       • Subtítulo- Descripción de la diapositiva
       • Tipo de TV de entrada-área de texto
  • Múltiples pestañas de formato- Aquí está la magia, debemos seleccionar las configuraciones creadas en los pasos anteriores, incluida la que estamos creando actualmente, es decir. seleccione video, sólido y control deslizante

    Configuraciones control deslizante no estará en la lista, porque de hecho aún no se ha creado, por lo que deberá revisar los puntos restantes, guardar la configuración, abrir esta configuración nuevamente para editarla, y esta vez estará disponible en la lista control deslizante

    
    

    Una aclaración más: las configuraciones se ordenarán exactamente en el orden que hayas elegido, es decir por defecto, al añadir una nueva diapositiva, se seleccionará la que será la primera de la lista
    

  • Etiqueta de pestañas de formato múltiple- Seleccione el tipo de diapositiva (Aquí se indica el texto
    que el usuario verá junto a la lista de selección del tipo de diapositiva)
  • Campo de pestañas de formato múltiple- tipo
  • Texto de opciones de pestañas de formato múltiple- Con una imagen de fondo
  • Valor de opciones de fichas de formato múltiple- imagen
• pestaña columnas
  • Campo columnas. Agregar dos elementos
    1. encabezamiento
       • pestaña Columna
         • encabezamiento- Título
         • campo encabezamiento
       • pestaña Editor de celdas
         • Editor- este.textEditor
    2. Descripción
       • pestaña Columna
         • encabezamiento- Descripción
         • campo- descripción
       • pestaña Editor de celdas
         • Editor- este.textEditor

Como ya habrá notado, en las dos primeras configuraciones, no creamos las llamadas columnas para la salida en el panel de control, es decir. al editar el propio parámetro de TV. Estas columnas deben crearse en este último, es decir. en la configuración que se indicará en el televisor y en la que en el campo Múltiples pestañas de formato pestaña fichas de formato se listarán todas las configuraciones que necesitamos, incluida la misma configuración

Vamos y creamos rápidamente un televisor con tipo de entrada migx , en el campo Configuraciones escribir el nombre de nuestra configuración, es decir slider , asigne las plantillas necesarias y abra el recurso para editarlo o crearlo. Si hicimos todo bien, deberíamos ver la siguiente imagen:

Se puede hacer clic en la imagen, y si ya ha visto el gif desde el enlace al comienzo de la nota, entonces este es el indicado.

Rápidamente completamos los datos y pasamos a la salida de nuestras diapositivas.

¿Cómo retirar?

La entrada de datos es buena, pero ¿qué pasa con la salida? No se preocupen camaradas, todo estará bien. Para la salida, nuevamente tenemos 2 buenas opciones, y consideramos ambas opciones en , este es un fragmento MIGX nativo getImageList y todopoderoso fenómeno. Veamos cómo se ven nuestros datos:

getImageList

Llamemos al fragmento sin especificar el parámetro tpl para ver los datos sin procesar:

[] Matriz ( => 14 => imagen => archivos/avatar.png => Esta es una diapositiva con una imagen => Bueno, breve descripción) [_alt] => 0 [_first] => 1 [_last] => => 1 = > slider) Array ( => 15 => video => archivos/Mi casa es vergonzosa.MOV => Y este es un video => ¡Sí, de hecho! [_alt] => 1 [_first] => [ _last] => => 2 => slider) Array ( => 16 => solid => ff0000 => Y el rojo es un color hermoso aquí => ¡Me gusta! [_alt] => 0 [_first] => [_last ] => 1 => 3 = > control deslizante)

fenómeno

($_modx->resource.slider| fromJSON | print) Array ( => Array ( => 14 => imagen => archivos/avatar.png => Esta es una diapositiva de imagen => Bueno, breve descripción)) => Array ( = > 15 => video => archivos/Mi casa es vergonzosa.MOV => Y este es un video => ¡Sí, de hecho!) => Array ( => 16 => sólido => ff0000 => Y aquí está el rojo un hermoso color => me gusta!))
Como podemos ver, en nuestras matrices, entre otras cosas, la clave tipo con los valores que especificamos al crear las configuraciones.

Para mostrar nuestro control deslizante con getImageList, necesitamos crear 3 fragmentos con los nombres de nuestros valores clave tipo, es decir: imagen , video y sólido . Además, comprenderá por qué.

Ejemplos de fragmentos:

// Fragmento de imagen

// Pedazo de video // Trozo sólido
Y la llamada debería verse así:

Aquí tomamos valores de las matrices de cada diapositiva y, por lo tanto, creamos tres fragmentos cuyos nombres coinciden con los valores del campo. Campo de pestañas de formato múltiple

Bien en fenómeno todo parece mucho más simple:

(var $slider = $_modx->resource.slider| fromJSON) (si $slider)

(/si)

Resultado e historia prometida

Como podemos ver, MIGX hace frente a esta tarea, si no para decir "excelente", pero al menos "bien". Reitero una vez más que MIGX no te limita en la cantidad de configuraciones, pestañas en cada configuración y en la cantidad de campos en las mismas. Y los ejemplos, como ya esperas que entiendas, son bastante simples para que también puedas familiarizarte con esta funcionalidad. Y algo más importante: al generar fragmentos, recomiendo verificar que los campos estén completos y siempre tener en cuenta que los datos pueden completarse o no o que, por alguna razón, pueden no aparecer y, por lo tanto, use filtros phx para la sintaxis MODX o condiciones en fenom.

Gracias a todos por su atención, les desearía buena suerte a todos, pero no lo haré, porque como dicen: "Deséenle buena suerte a los perdedores", así que les deseo felicidad y salud o algo, pero a quién le importa, entonces el historia.

Una vez vinieron a visitarnos mis familiares, entre ellos mi sobrino (hijo de mi hermana) de país vecino y mis dos sobrinos (Somos casi todos de la misma edad). Casa de campo, soleada Asia Central, una pequeña montaña y un río cercano. Esa misma noche decidimos los cuatro dar un paseo por este mismo río, y al principio todo estaba en calma, no había motivos para la emoción. Se divirtieron mucho, contaron historias (a veces aterradoras y espeluznantes), bromearon y cosas por el estilo. Pero en un momento, noté que uno de mis sobrinos palideció y esto no es solo un giro verbal o un adorno, porque nunca había visto tanto miedo y desconcierto en el rostro de una persona antes y después de este incidente. Sin quitar los ojos de encima, miró en la dirección en la que yo estaba de espaldas, es decir. parecía estar mirando algo o alguien detrás de mí, pero no directamente detrás y cerca, me parecía que estaba mirando en algún lugar a lo lejos. Daba miedo y le pregunté: - ¿Qué pasó? Y el…

Este párrafo tendrá que pretender que la historia en esta nota tiene una continuación, pero en realidad solo los engañé un poco, esperando poder animarlos un poco del texto técnico, aburrido y largo y estarán en un buen ánimo. La historia en sí es real y muy interesante. Ahora, ¡gracias a todos por su atención!

UPD:
Si que soy Baha!?

Si de repente alguien quiere agradecer al rublo, que así sea: tarjeta Sberbank +79609354545

En esta lección, cubriremos los conceptos básicos de MIGX y trabajaremos en un nuevo control deslizante que puede usar en su blog.

Requisitos:

• Sitio web MODX Revolution.
• Tipo de variable de plantilla personalizada MIGX instalada (a través de la administración de paquetes).
• Slider de galería o script que nos gustaría integrar. Usé FlexSlider de WooThemes porque se ajusta solo para adaptarse al ancho del contenedor (¡muy importante para el diseño receptivo!). También es altamente configurable, admite el desplazamiento en teléfonos inteligentes y se ve muy bien desde el primer momento.
• Fragmento de phpthumbof instalado a través del Administrador de paquetes para el recorte automático de imágenes.
• ¡Cualquier imagen!

Comenzar

La obra utiliza varias partes. Primero necesitamos instalar MIGX TV y necesitamos tomar estos datos desde el front-end y hacer que nuestro control deslizante funcione. Este tutorial asume el uso de FlexSlider, nos aseguraremos de que el marcado sea lo que necesita, pero también debería ser muy fácil de adaptar a otros controles deslizantes.

Paso 1: instale MIGX TV para la gestión de imágenes

Comencemos configurando el televisor. La fuerza de MIGX es que puede definir los campos que necesita. Los verás como una tabla y solo necesitas nombrar los títulos. En este caso, necesitaré tres campos diferentes:

• Campo de entrada para seleccionar una imagen en el sistema de archivos (o en 2.2 de sus fuentes de medios).
• Campo de entrada de texto para ingresar un título/etiqueta/descripción. FlexSlider hace un gran trabajo con los subtítulos, así que los usaremos.
• También agregué entrada de texto para "Establecer". Como veremos más adelante, lo usaré para una cantidad infinita de controles deslizantes individuales que se agregarán desde cualquier parte del recurso.

Puede usar otros campos si lo desea, pero el tutorial usará exactamente los campos que mencioné anteriormente.

Pasemos a crear TV. Aquí hay un control deslizante con descripciones de las imágenes (en caso de que no se vea nada en la miniatura).

Cree una nueva variable de plantilla en la pestaña Elementos y asígnele un nombre apropiado. Lo llamaré ws.images, si le das tu propio nombre, no olvides reemplazar [[*ws.images]] con tu nombre. En la pestaña Opciones de entrada, seleccione el tipo "migx" en el menú desplegable. Si no ve este tipo, verifique si ha instalado el paquete MIGX a través del Administrador de paquetes. Notará que se han agregado varias opciones en la parte inferior de la pantalla, incluidas las pestañas de formulario y las columnas de cuadrícula. Esto se aplica a MODX> 2.0, para versiones anteriores recomiendo actualizar.

Tenga en cuenta que los campos Pestañas de formulario y Columnas de cuadrícula deben completarse con cadenas JSON válidas. JSON es básicamente una forma de mostrar objetos, matrices o combinaciones de clave -> valor de una manera que admite casi cualquier lenguaje de programación. Aquí está la especificación técnica y algunos ejemplos del sitio oficial de JSON.

Configuración de pestañas de formulario

El formulario le permite utilizar diferentes pestañas. Cada pestaña tiene una descripción y varios campos. Puede hacer muchas cosas avanzadas con esto, ya que usará una sola pestaña la mayor parte del tiempo, así que recuerde por ahora. Aquí está el código JSON para las pestañas de formulario que estoy usando:

[("título":"Imagen", "campos": [ ("campo":"conjunto","título":"Conjunto"), ("campo":"descripción","título":"Descripción") , ("campo":"imagen","título":"Imagen","inputTVtype":"imagen") ] )]

Repasemos cada línea:

• El primero muestra la apertura de la matriz de pestañas con un corchete ([) y el objeto de apertura de la pestaña con un corchete (()). Después de eso, definimos el título del campo Imagen. Tenga en cuenta que necesita para usar comillas dobles (" ") para las propiedades y sus valores, las simples pueden generar resultados inesperados. Si tiene estos corchetes en cualquier propiedad, valor, escápelos con una barra inclinada (\). Después de definir la descripción (título), continuemos y comencemos a definir la matriz de "campos", abriéndola con corchetes ([) .
• Definiremos nuestro primer campo como conjunto. "field": "set" significa que queremos tener una entrada de texto sin formato en este campo. "Título":"Conjunto": damos una descripción del nombre "conjunto": este será el nombre para ingresar texto sin formato. Luego, asígnele el título "Establecer", que se mostrará en el formulario como una etiqueta de campo.
• A continuación, defina el campo de descripción de la misma manera
• La línea 4 define la imagen. Lo especial aquí es que estamos usando otro televisor (llamado "imagen") como tipo de entrada. Esta es una característica muy fuerte de MIGX que le permite usar otros televisores para construir su forma. En este caso, la TV de "imagen" es muy simple: el tipo de entrada es imagen, y en 2.2 puede asignarlo a la fuente de medios correcta. No necesita asociarlo con plantillas como lo haría con la televisión normal. Otra forma de hacer esto (que uso en otros televisores MIGX) es hacer cajas de radio o cajas de selección.
• La quinta línea cierra la matriz de campos. También tenga en cuenta que la última línea que define el campo (imagen) no termina con una coma, ¡esto es importante! Si coloca una coma en una matriz, el JSON no se analizará y su formulario no funcionará.
• La sexta línea cierra el objeto de pestaña y toda la matriz de pestañas.

¡Entonces, de esta manera hemos creado TV de "imagen"! Ya debería tener un formulario para completar los datos, pero necesita marcado para mostrarlo...

Configuración del marcado de columna

El diseño de la columna es una tabla en el panel de TV del recurso. Debe definir los encabezados para esta tabla a través de las opciones de entrada de marcado de columna. Aquí está la definición (JSON nuevamente) de lo que estoy usando: [( "header": "Set", "sortable": "true", "dataIndex": "set"),( "header": "Description" , "ordenable": "verdadero", "índice de datos": "descripción", ("encabezado": "Imagen", "ordenable": "falso", "índice de datos": "imagen", "procesador": "esto. renderImage" )]

Repasemos cada línea:

• Abra la matriz de encabezado con corchetes ([) y el encabezado de la quinta columna con corchetes (()).
• Nombramos el encabezado "Set", indicamos que se puede ordenar (sortable) y especificamos el parámetro "set", que corresponde a la definición de Set Form Tabs, que tienen "field":"set".
• Fin del conjunto / inicio de la descripción
• Nombramos el encabezado "Descripción", ordenable y lo emparejamos con la descripción del campo índice de datos.
• Descripción final / Imagen de inicio
• Nombra el encabezado "Imagen", que no se puede ordenar, y asígnalo al índice de datos - campo de imagen. También definiremos un renderizador que en ExtJS le permitirá cambiar la apariencia de los datos de salida. En este caso, "this.renderImage", el renderizador tomará automáticamente la URL de la imagen seleccionada y, en su lugar, renderizará una miniatura.
• El final de un objeto Imagen y una matriz de encabezados.

Después de eso, puede asignar este MIGX TV a su plantilla y verificar el resultado. ¿No se muestra el marcado? Regrese a las pestañas y asegúrese de que todos los valores estén entre comillas dobles y no comillas simples y verifique si hay comas adicionales.

Información

Para validar JSON, use JSONLint .

• Completa los detalles
• Llevar datos al sitio

Complete nuestra variable de plantilla ws.image con datos arbitrarios

Si intenta mostrar estos datos como un televisor normal, verá algo como esto:

[( "MIGX_id":"1","set":"set1","description":"Mark el gato, que roba salchichas y come cuando está despierto","image":"demo/uroki/15/1 .jpg" ),( "MIGX_id":"2","conjunto":"conjunto1","descripción":"tambor","imagen":"demo/uroki/15/2.jpg" ),( "MIGX_id ":"3","set":"set1","description":"como esta nuevo","image":"demo/uroki/15/3.jpg" ),( "MIGX_id":"4", "set":"set1","description":"puedes matar a un hombre con este libro","image":"demo/uroki/15/4.jpg" )]

¡Esta es una matriz JSON con campos y valores ingresados!

Dado que MIGX viene con un fragmento getImageList, puede intentar mostrar los datos usándolo. La documentación para este fragmento se puede encontrar aquí. O crea tu propio fragmento (parseMIGXToGallery), que utilizo para generar marcado a partir de un fragmento &tpl basado en datos de TV:

fromJSON($entrada); $salida = matriz(); if (!$input || vacío($tpl)) devuelve "sin cosas"; foreach ($entrada como $fila) ( if (isset($establecer) && !empty($establecer) && ($establecer != $fila["establecer"])) continuar; $salida = $modx->getChunk($ tpl, $fila); ) return implode("\n", $salida);

Repasemos cada línea:

• Tomamos la variable $input (que toma los datos contenidos en el parámetro &input en la llamada del fragmento, más sobre eso más adelante) y analizamos el JSON en una matriz php.
• Estableceremos una matriz vacía para contener nuestra salida.
• Asegurémonos de que la variable $input no sea NULL o False, lo que significaría que no se pasó JSON o que no es válido, y también verifiquemos si la variable $tpl (pasada por el parámetro &tpl en el fragmento de código) no está vacía. Si cualquiera de las condiciones es verdadera, imprimiremos un mensaje de error "vacío", que servirá como una pista para el administrador de contenido de que algo anda mal.
• A continuación, itere a través de cada elemento de la matriz $input como una $fila.
• Verificamos si la variable $set está configurada (que está configurada en la llamada de fragmento en el parámetro &set) y si no está vacía, comparamos su valor con el valor "establecido" de la fila actual. Si esto no es lo que desea, pase al siguiente elemento de la matriz.
• Obtenemos un fragmento llamado $tpl e insertamos los valores de la fila actual como marcadores de posición.
• Cerramos el bucle foreach.
• Finalmente, pegamos la matriz $output, separamos cada elemento con un salto de línea y lo mostramos en la página.
• Entonces, para resumir lo anterior, tomamos la entrada, revisamos cada fila y verificamos si pertenece al conjunto que hemos definido, luego obtiene un fragmento y agrega todo a la salida.
• Ejecutar fragmento

Todo lo que necesitamos es una llamada de fragmento donde necesitamos nuestras imágenes y un fragmento que generará todo de la manera correcta para el FlexSlider. Así es como se llama el fragmento:

[]` &set=`set1` ]]

Y el fragmento images.gallery.tpl:

[[+descripción]]

También debe envolver la salida del fragmento completo en un div y una lista desordenada, de acuerdo con la documentación de FlexSlider. Para hacerlo todo más fácil, pongámoslo todo en una sola porción. Mi fragmento se llama control deslizante y contiene lo siguiente:

Usando este fragmento, simplemente puedo vincular a algo en el contenido, que es mucho más fácil de recordar o poner en una hoja de trucos.

[[$slider?set=`nombre del conjunto`]]

Ahora puede comenzar a diseñar el FlexSlider.

Paso 3: Uso de FlexSlider

FlexSlider es relativamente fácil de usar (descarga sus archivos) y hay toneladas de ejemplos en su sitio web. También debe incluir la llamada a jQuery en la página y su archivo CSS (empaquetado en un archivo zip) y el complemento FlexSlider (también en el archivo zip). Después de eso, debe activar el elemento correcto usando el siguiente código:

El sitio aconseja poner todo en el encabezado del archivo, pero personalmente lo pongo todo en la parte inferior. Si su control deslizante se muestra en la parte superior de la página, entonces es mejor colocarlo en para que se cargue antes de que aparezca la página, así que colócalo donde quieras.

¡Eso es todo! ¡Espero que este largo artículo ayude a alguien a comenzar a usar MIGX y controles deslizantes como FlexSlider!

Hoy un pequeño artículo sobre como crear un slider en modx utilizando el paquete BanerY. Este paquete se puede descargar e instalar desde el repositorio.

Crear un control deslizante con BanerY

Entonces, hay un control deslizante estático, que sea un control deslizante de arranque normal, con este marcado:

El objetivo es crear un control deslizante administrado a partir de este marcado. Empecemos.

Comencemos con la creación de diapositivas en BannerY, para esto vamos a Aplicaciones - BannerY - Posiciones y creamos una posición (por ejemplo, home-slider).

Después de eso, vaya a la pestaña Banners y haga clic en el botón Nuevo banner. Se abrirá una ventana para crear un nuevo banner.

Rellenamos todo:

• Nombre, se puede mostrar usando [[+nombre]].
• Seleccione una imagen - [[+imagen]].
• Especifique la URL donde ir - [[+url]].
• Complete la descripción - [[+descripción]] - aquí, por cierto, puede cargar no solo texto, sino también html normal, y eso es genial.
• Bueno, seleccione la posición (creada anteriormente).

Y así creamos el número requerido de diapositivas.

Ahora necesita dividir el marcado anterior en fragmentos y ajustar el código en los fragmentos a la sintaxis de BanerY

Cree un fragmento para un control deslizante separado con una clase activo, déjalo ser deslizar e inyectar la sintaxis en él:

Ahora copia ese trozo y dale un nombre. diapositiva2 y quitar la clase activo

Bueno, queda, de hecho, solo para mostrar las diapositivas.

[]

Como resultado, obtenemos lo siguiente:

Eso es todo) Es muy fácil crear un control deslizante en modx usando BanerY.

Sí, por cierto, su documentación está aquí: docs.modx.pro/components/bannery/snippet

Slider Revolution es uno de los controles deslizantes más populares debido a su amplia gama de funciones y facilidad de uso.
de ThemePunch. Este control deslizante se ha comprado más de 273 441 veces y lo utilizan más de 2500000 sitios en todo el mundo.

A continuación se enumeran algunas de las principales ventajas de este control deslizante, que lo distingue de los gratuitos y
la mayoría de los análogos premium:

• Potente editor visual: personalice la pantalla del control deslizante para satisfacer las necesidades de su proyecto a través de un menú conveniente en el que
  cada función está en su lugar. La gradación estricta no le permitirá confundirse. La única dificultad en
  la primera vez serán las ganas de probarlas todas.
• Control de la variabilidad de cada diapositiva: la visualización planificada de bloques en la pantalla de una PC, tableta y teléfono
  se muestra en el editor visual. Puede cambiar el tamaño de las diapositivas individualmente para cada dispositivo.
  La plantilla receptiva no permitirá que las imágenes y los videos se distorsionen ni ocupen más espacio del necesario para
  visualización conveniente.
• Trabaje con redes sociales y alojamiento de videos: la quinta generación de Slider Revolution le permite incluir en el control deslizante
  datos de Instagramm, Facebook, Flickr, Twitter, Vimeo y Youtube. Si planeas publicar el video por tu cuenta
  servidor, puede utilizar el lenguaje HTML5. Partes del código se escribirán automáticamente.
• Alto rendimiento y optimización de diapositivas: el complemento funciona rápido en modo de edición y reduce
  el peso del slider sin perder la calidad del contenido. No tiene que preocuparse por los largos tiempos de carga de la página. que es especialmente
  relevante en relación con los dispositivos móviles que están fuera del alcance de las conexiones WiFi.
• Una gran cantidad de efectos especiales al hacer la transición de diapositivas
• Muchos efectos de animación al mostrar texto, video e imágenes.
• Iniciar el video automáticamente al abrir el sitio o manualmente, para elegir, detener el control deslizante al ver el video,
  rebobinar, etc
• Amplia selección de configuraciones de navegación.
• Inserte anuncios de publicaciones con enlaces directamente en el control deslizante, mientras está configurado para la optimización SEO
• Soporte e instalación de Google Fonts
• Usando muchas capas (imágenes, videos, subtítulos y enlaces) en una diapositiva, hay innumerables de ellos
  se superponen entre sí, creando así un video realista o cualquier presentación.

¡Atención! Para poder descargar plantillas deslizantes y objetos de biblioteca premium en línea, debe comprar una licencia por separado de ThemePunch, que al momento de escribir este texto cuesta $ 19, y luego activarla ingresando el código de compra en el campo indicado en la figura de abajo.

Revisión de video modSliderRevolution

Hoy veremos cómo crear un control deslizante Bootstrap usando MIGX. Antes de comenzar el estudio, recomiendo visitar este primero.

Creación de una configuración MIGX

voy a la gerencia migx y agregue un nuevo elemento llamado control deslizante, en el campo de reemplazo escriba " Añadir diapositivas"e ir a la pestaña" fichas de formato».

• Nombre de campo - título, Leyenda - Título.
• Nombre de campo: diapositiva, Título: diapositiva, Tipo de TV de entrada: imagen.
• Nombre de campo - descripción, Título - Descripción.
• Fieldname - idstranici, Caption - Especifique la identificación del documento al que vincular.

• Encabezado - Título, Campo - título.
• Encabezado - Diapositiva, Campo - diapositiva, Renderizador - this.renderImage.
• Encabezado - Descripción, Campo - descripción.
• Encabezado - id del documento, Campo - idpage.

Nota: En esencia, estamos transfiriendo elementos de Formtabs. Sí, también puede completar los campos Ancho de columna: el ancho de las columnas.

Guardar (ejecutar).

Para aquellos que no quieren bañarse en absoluto, creamos una configuración vacía y exportamos el siguiente código:

( "formtabs":[ ( "MIGX_id":1, "título":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u044b", "print_before_tabs ", "print_before_tabs" ":"0", "fields":[ ( "MIGX_id":1, "field":"title", "caption":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432 \u043e\u043a" , "descripción":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u043b\u0430\u0439\u0434\u0430", "descripción_es_código":"0" , "inputTV": "", "inputTVtype":"", "validación":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config" , "fuentes": "", "inputOptionValues":"", "predeterminado":"", "useDefaultIfEmpty":"0", "pos":1 ), ( "MIGX_id":2, "field":"slide ", "caption" :"\u0421\u043b\u0430\u0439\u0434", "description":"", "description_is_code":"0", "inputTV":"", "inputTVtype":"image", " validación":"" , "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config", "sources":"", "inputOptionValues":"", " predeterminado":"" , "useDefaultIfEmpty":"0", "pos":2 ), ( "MIGX_id":3, "campo":"descripción", "título":"\u041e\u043f\u0438\u0441\ u0430\u043d\u0438 \u0435", "descripción":"", "descripción_es_código":"0", "inputTV":"", "inputTVtype":"", "validación":"", "configs":" ", "condición_restrictiva":"", "display":"", "sourceFrom":"config", "sources":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":" 0", "pos ":3 ), ( "MIGX_id":4, "campo":"idstranici", "título":"\u0423\u043a\u0430\u0436\u0438\u0442\u0435 id \u0434\u043e\ u043a\u0443\u043c \u0435\u043d\u0442\u0430 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0441\u044b\u04",\u044c\u0430 \u0442\u044c\u044" "", "description_is_code":"0", "inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition": "", "display": "", "sourceFrom":"config", "sources":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos" :4 ) ], "pos ":1 ) ], "contextmenus":"", "actionbuttons":"", "columnbuttons":"", "filters":"", "extended":( "migx_add": "\u0414\u043e\u0431 \u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u044b", "disable_add_item":"", "add_items_directly":"", "formcaption":" ", "update_win_title":" ", "win_id":"", "maxRecords":"", "addNewItemAt":"bottom", "media_source_id":"", "multiple_formtabs":"", "multiple_formtabs_label":" ", "multiple_formtabs_field":" ", "multiple_formtabs_optionstext":"", "multiple_formtabs_optionsvalue":"", "actionbuttonsperrow":4, "winbuttonslist":"", "extrahandlers":"", "filtersperrow":4, " packageName":"", " classname":"", "tarea":"", "getlistsort":"", "getlistsortdir":"", "sortconfig":"", "gridpagesize":"", "use_custom_prefix ":"0", " prefijo":"", "grid":"", "gridload_mode":1, "check_resid":1, "check_resid_TV":"", "join_alias":"", "has_jointable": "yes", "getlistwhere":"", "joins":"", "hooksnippets":"", "cmpmaincaption":"", "cmptabcaption":"", "cmptabdescription":"", "cmptabcontroller": "", "winbuttons": "", "onsubmitsuccess":"", "submitparams":"" ), "columns":[ ( "MIGX_id":1, "header":"\u0417\u0430\u0433\u043e \u043b\u043e\u0432\ u043e\u043a", "dataIndex":"header", "width":100, "sortable":"false", "show_in_grid":1, "customrenderer":"", "renderer" :"", "clickaction" :"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ), ( "MIGX_id":2, "encabezado" :"\u0421\u043b\ u0430\u0439\u0434", "dataIndex":"slide", "width":100, "sortable":"false", "show_in_grid":1, "customrenderer":"", " renderer":"this.renderImage", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ), ( "MIGX_id": 3, "encabezado":" \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "índice de datos":"descripción", "ancho":200, "ordenable":"falso", "mostrar_en_cuadrícula" :1, "renderista": "", "renderer":"", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":" " ), ( "MIGX_id" :4, "cabecera":"id \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430", "dataIndex":"idstranici", "ancho":50, "sortable":"false" , "show_in_grid":1, "customrenderer":"", "renderer":"", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", " renderoptions":"", " editor":"" ) ], "categoría":"" )

Creación de TV con configuración MIGX

En el árbol MODX, en el " Elementos", prensa + opuesto al punto Campos Adicionales" e ingrese lo siguiente:

• "Nombre" - control deslizante; "Firma" - Control deslizante.
• En la pestaña "Opciones de entrada" en "Tipo de entrada" seleccione migx, y en el campo "Configuraciones" ingrese control deslizante.
• En la pestaña "Disponible para plantillas", seleccione las plantillas para las que estará disponible la entrada en este campo.

Entrada de datos

Abramos un documento para el cual el campo deslizante está asignado con MIGX con configuración e ingresemos algunos datos en él.

Salida de carrusel Bootstrap 3 a página

Tenemos un marcado Html estándar getbootstrap.com/docs/3.3/javascript/#carousel-examples, rehazlo para MIGX y escribe el siguiente código en el lugar requerido en la plantilla:

Y crear trozos:

tplsliderIndicador:

y trozo tplsliderItem con el siguiente contenido:

Bootstrap 4 salida de carrusel por página

Como en el caso anterior, tomamos el marcado estándar getbootstrap.com/docs/4.1/components/carrusel/ y rehacerlo, como resultado obtenemos

donde esta el trozo tplsliderIndicador tiene el siguiente código:

y trozo tplsliderItem con el siguiente código: