Carrousel d'images Modx sur la page du produit. grand et effrayant

Bonjour la communauté !

Dans cette note, vous apprendrez ce que sont les onglets multiples et comment créer une configuration avec un ensemble de données différent. Et bien sûr, nous créerons avec vous un slider qui aura différents types de slides, et à la fin vous trouverez un très histoire intéressante que je n'ai osé dire à personne pendant longtemps (à moins, bien sûr, que cela ne vous intéresse, mais l'histoire est intéressante - croyez-moi). Et donc, exemples de slides :

• Image de fond
• Arrière-plan vidéo
• fond de couleur unie

Attention! Cette fois, ne retirez pas les enfants et les femmes enceintes des écrans, car il s'agit d'une sorte de discrimination fondée sur l'âge et le sexe !

C'est comme ça que ce sera

Une autre annonce ! Je vais souvent me référer à la première leçon pour ne pas me répéter, je vous recommande donc fortement de vous familiariser avec

Pourquoi?

Fantasmons : vous obtenez un projet où, par exemple, sur la page principale, il y a un curseur qui a plusieurs types de diapositives, l'un a un arrière-plan vidéo, un autre a une image et le troisième a une couleur unie, par exemple. Vous n'allez pas créer un ensemble de champs (une configuration) et entasser (désolé pour le lexique) tous ces champs dedans et dire au gestionnaire comment vivre avec et être. N'est pas attitude sérieuse !? (j'espère que quelqu'un comprendra)

Pour la cause

Nous avons compris le "pourquoi" avec vous, découvrons maintenant le "comment". Si vous avez déjà lu la première leçon, nous devons aller sur la page des composants MIGX et créer 3 configurations. Pré-installez ColorPicker de Jako (mais cela n'a pas d'importance):

Tout ce qui n'est pas indiqué par moi, sautez !

configuration solide (couleur unie)

• Languette Réglages
  • Nom- solide
  • Ajouter une nouvelle catégorie- Glissière
• Languette Onglets de formulaire
  • Des champs Des champs créer 3 champs
    1. Couleur de l'arrière plan:
       • nom de domaine-bgcolor
       • Légende- Sélectionnez la couleur de fond
       • Type de téléviseur d'entrée- ColorPicker (ou celui que vous
         utilisation)
    2. Titre:
       • nom de domaine entête
       • Légende- Titre de la diapositive
    3. La description:
       • nom de domaine- la description
       • Légende- Description de la diapositive
       • Type de téléviseur d'entrée-zone de texte
  • Champ d'onglets multiples-taper( Valeur donnée sera le nom de la clé dans
    tableau de sortie. Par défaut : MIGX_formname)
  • - Avec une couleur unie sur le fond (Texte
    cette configuration dans la liste de sélection)
  • - solide (La valeur du même champ de type
    en tableau)

configuration vidéo

• Languette Réglages
  • Nom- vidéo
  • Catégorie- Glissière
• Languette Onglets de formulaire
  • Des champs- Créer 1 onglet et sur le terrain Des champs encore une fois, nous créons 3 champs, un seul de ces champs est d'un type différent.

    Je dois préciser ici que le nombre de champs et leurs types dans différentes configurations peuvent être aussi différents que votre imagination est limitée... Mais je sais que tout est en ordre avec vos fantasmes ?

    1. Vidéo (c'est-à-dire fichier) :
       • nom de domaine- vidéo
       • Légende- Télécharger une video
       • Type de téléviseur d'entrée- dossier
    2. Titre:
       • nom de domaine entête
       • Légende- Titre de la diapositive
    3. La description:
       • nom de domaine- la description
       • Légende- Description de la diapositive
       • Type de téléviseur d'entrée-zone de texte
  • Champ d'onglets multiples- taper
  • Options de plusieurs onglets de formulairetexte- Avec vidéo en arrière-plan
  • Valeur des options d'onglets multiples- vidéo

configuration du curseur

Par défaut, il acceptera une image et sera une sorte de configuration principale.

• Languette Réglages
  • Nom- glissière
  • Catégorie- Glissière
  • Remplacer "Ajouter un élément"- Ajouter une diapositive
  • Légende du formulaire
  • titre de la fenêtre- Ajouter/modifier une diapositive
• Languette Onglets de formulaire
  • Des champs- Créez 1 onglet et dans le champ Champs créez à nouveau 3 champs
    1. Image:
       • nom de domaine- image
       • Légende- Télécharger une image
       • Type de téléviseur d'entrée- image
       • Spécifiez la source des fichiers dont vous avez besoin, j'ai décrit cette tâche dans la première leçon
    2. Titre:
       • nom de domaine entête
       • Légende- Titre de la diapositive
    3. La description:
       • nom de domaine- la description
       • Légende- Description de la diapositive
       • Type de téléviseur d'entrée-zone de texte
  • Plusieurs onglets de formulaire- Voici la magie même, nous devons sélectionner les configurations créées dans les étapes précédentes, y compris celle que nous sommes en train de créer, c'est-à-dire sélectionnez vidéo, solide et curseur

    Configurations glissière ne sera pas dans la liste, car en fait elle n'a pas encore été créée, il faudra donc passer par les points restants, enregistrer la configuration, rouvrir cette configuration pour l'éditer, et cette fois elle sera disponible dans la liste glissière

    
    

    Une précision supplémentaire : les configurations seront triées exactement dans l'ordre dans lequel vous avez choisi, c'est-à-dire par défaut, lors de l'ajout d'une nouvelle diapositive, celle qui sera la première de la liste sera sélectionnée
    

  • Étiquette de plusieurs onglets de formulaire- Sélectionnez le type de diapositive (le texte est indiqué ici
    que l'utilisateur verra à côté de la liste de sélection de type de diapositive)
  • Champ d'onglets multiples- taper
  • Options de plusieurs onglets de formulairetexte- Avec une image en arrière-plan
  • Valeur des options d'onglets multiples- image
• Languette Colonnes
  • Champ Colonnes. Ajout de deux éléments
    1. entête
       • Languette Colonne
         • entête- Titre
         • champ entête
       • Languette Éditeur de cellule
         • Éditeur- this.textEditor
    2. La description
       • Languette Colonne
         • entête- La description
         • champ- la description
       • Languette Éditeur de cellule
         • Éditeur- this.textEditor

Comme vous l'avez déjà remarqué, dans les deux premières configurations, nous n'avons pas créé les soi-disant colonnes de sortie dans le panneau de configuration, c'est-à-dire lors de la modification du paramètre TV lui-même. Ces colonnes doivent être créées dans ce dernier, c'est-à-dire dans la configuration qui sera indiquée dans le téléviseur et dans laquelle dans le champ Plusieurs onglets de formulaire languette Onglets de formulaire toutes les configurations dont nous avons besoin seront répertoriées, y compris la même configuration elle-même

Allons-y et créons rapidement un téléviseur avec le type d'entrée migx , dans le champ Configurationsécrivez le nom de notre configuration, c'est-à-dire slider , attribuez les modèles nécessaires et ouvrez la ressource pour modification, ou créez-la. Si nous avons tout fait correctement, nous devrions voir l'image suivante :

L'image est cliquable, et si vous avez déjà regardé le gif du lien au début de la note, alors celui-ci est celui-là

Nous remplissons rapidement les données et passons à la sortie de nos diapositives.

Comment retirer ?

L'entrée de données est bonne, mais qu'en est-il de la sortie ? Ne vous inquiétez pas camarades, tout ira bien. Pour la sortie, nous avons à nouveau 2 bonnes options, et nous avons considéré ces deux options dans , il s'agit d'un extrait MIGX natif getImageList et tout-puissant phénomène. Voyons à quoi ressemblent nos données :

getImageList

Appelons l'extrait sans spécifier le paramètre tpl afin de voir les données brutes :

[] Array ( => 14 => image => files/avatar.png => Ceci est une diapositive avec une image => Eh bien, une courte description) [_alt] => 0 [_first] => 1 [_last] => => 1 => curseur) Array ( => 15 => vidéo => fichiers/Ma maison est honteuse.MOV => Et ceci est une vidéo => Oui, en effet ! [_alt] => 1 [_first] => [ _last] => => 2 => slider) Array ( => 16 => solid => ff0000 => Et le rouge est une belle couleur ici => j'aime bien ! [_alt] => 0 [_first] => [_last ] => 1 => 3 => curseur)

phénomène

($_modx->resource.slider| fromJSON | print) Array ( => Array ( => 14 => image => files/avatar.png => Ceci est une diapositive d'image => Eh bien, courte description)) => Array ( => 15 => vidéo => fichiers/Ma maison est honteuse.MOV => Et ceci est une vidéo => Oui, en effet !) => Array ( => 16 => solide => ff0000 => Et ici le rouge est une belle couleur => j'aime !))
Comme nous pouvons le voir, dans nos tableaux, entre autres, la clé taper avec les valeurs que nous avons spécifiées lors de la création des configurations.

Pour afficher notre slider avec getImageList, nous devons créer 3 morceaux avec les noms de nos valeurs clés taper, c'est-à-dire : image , vidéo et solid . De plus, vous comprendrez pourquoi.

Exemples de blocs :

// Morceau d'image

// Couper la vidéo // Morceau solide
Et l'appel devrait ressembler à ceci :

Ici, nous prenons des valeurs dans les tableaux de chaque diapositive, et nous avons donc créé trois morceaux dont les noms correspondent aux valeurs des champs Champ d'onglets multiples

Eh bien, sur phénomène tout a l'air bien plus simple :

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

(/si)

Résultat et histoire promise

Comme nous pouvons le voir, MIGX fait face à cette tâche, sinon "excellent", mais au moins "bon". Je répète encore une fois que MIGX ne vous limite pas dans le nombre de configurations, d'onglets dans chaque configuration et dans le nombre de champs qu'elles contiennent. Et les exemples, comme vous espérez déjà comprendre, sont assez simples pour que vous puissiez également vous familiariser avec cette fonctionnalité. Et autre chose importante : lors de la sortie de blocs, je recommande fortement de vérifier la plénitude des champs et de toujours tenir compte du fait que les données peuvent ou non être remplies ou, pour une raison quelconque, peuvent ne pas venir, et donc utiliser des filtres phx pour la syntaxe MODX ou conditions dans fenom.

Merci à tous pour votre attention, je souhaiterais bonne chance à tout le monde, mais je ne le ferai pas, car comme on dit: "Souhaitez bonne chance aux perdants", alors je vous souhaite bonheur et santé ou quelque chose, mais peu importe, alors le histoire.

Une fois mes parents sont venus nous rendre visite, parmi lesquels mon neveu (fils de ma sœur) de pays voisin et mes deux neveux (Nous avons presque tous le même âge). Maison de campagne, Asie centrale ensoleillée, une petite montagne et une rivière à proximité. Cette même nuit, nous avons décidé de nous promener tous les quatre le long de cette même rivière, et au début tout était calme, il n'y avait aucune raison de s'exciter. Ils se sont beaucoup amusés, ont raconté des histoires (parfois effrayantes et effrayantes), ont plaisanté et des trucs comme ça. Mais à un moment donné, j'ai remarqué qu'un de mes neveux était devenu pâle et ce n'est pas seulement une tournure verbale ou un embellissement, car je n'ai jamais vu une telle peur et un tel égarement sur le visage d'une personne avant et après cet incident. Sans quitter les yeux, il regarda dans la direction où j'avais le dos tourné, c'est-à-dire il semblait regarder quelque chose ou quelqu'un derrière moi, mais pas directement derrière et de près, il me semblait qu'il regardait quelque part au loin. C'était effrayant et je lui ai demandé : - Que s'est-il passé ? Et il…

Ce paragraphe devra prétendre que l'histoire de cette note a une suite, mais en fait je vous ai juste un peu trompé, en espérant pouvoir vous remonter le moral un peu du texte technique, ennuyeux et volumineux et vous serez dans un bon ambiance. L'histoire elle-même est réelle et très intéressante. Maintenant, merci à tous pour votre attention !

UPD :
Si je suis Baha ! ?

Si tout à coup quelqu'un veut remercier le rouble, qu'il en soit ainsi: carte Sberbank +79609354545

Dans cette leçon, nous couvrirons les bases de MIGX et travaillerons sur un nouveau curseur que vous pourrez utiliser sur votre blog.

Conditions:

• Site Web MODX Révolution.
• Type de variable de modèle personnalisé MIGX installé (via la gestion des packages).
• Curseur ou script de galerie que nous aimerions intégrer. J'ai utilisé le FlexSlider de WooThemes car il s'ajuste pour s'adapter à la largeur du conteneur (très important pour un design réactif !). Il est également hautement configurable, prend en charge le défilement sur les smartphones et semble très bien prêt à l'emploi.
• Extrait de code phpthumbof installé via le gestionnaire de packages pour le recadrage automatique des images.
• Toutes les images !

Commencer

L'œuvre utilise plusieurs parties. Nous devons d'abord installer MIGX TV et nous devons prendre ces données du front-end et faire fonctionner notre curseur. Ce tutoriel suppose d'utiliser le FlexSlider, nous nous assurerons que le balisage est ce dont il a besoin, mais il devrait également être très facile à adapter à d'autres curseurs.

Étape 1 : Installer MIGX TV pour la gestion des images

Commençons par configurer le téléviseur. La force de MIGX est que vous pouvez définir les champs dont vous avez besoin. Vous les verrez sous forme de tableau et vous n'aurez qu'à nommer les titres. Dans ce cas, j'aurai besoin de trois champs différents :

• Champ de saisie permettant de sélectionner une image dans le système de fichiers (ou en 2.2 depuis vos sources média).
• Champ de saisie de texte pour saisir une légende / une balise / une description. FlexSlider fait un excellent travail avec les sous-titres, nous allons donc les utiliser.
• J'ai également ajouté une entrée de texte pour "Set". Comme nous le verrons plus tard, je l'utiliserai pour un nombre infini de curseurs individuels qui seront ajoutés de n'importe où dans la ressource.

Vous pouvez utiliser d'autres champs si vous le souhaitez, mais le didacticiel utilisera exactement les champs que j'ai énumérés ci-dessus.

Passons à la création de télévision. Voici un slider avec les descriptions des images (au cas où rien n'est visible dans la vignette).

Créez une nouvelle variable de modèle dans l'onglet Éléments et donnez-lui un nom approprié. Je l'appellerai ws.images, si vous lui donnez votre propre nom, n'oubliez pas de remplacer [[*ws.images]] par votre nom. Dans l'onglet Options d'entrée, sélectionnez le type "migx" dans le menu déroulant. Si vous ne voyez pas ce type, vérifiez si vous avez installé le package MIGX via le gestionnaire de packages. Vous remarquerez que plusieurs options ont été ajoutées au bas de l'écran, notamment les onglets de formulaire et les colonnes de grille. Cela s'applique à MODX> 2.0, pour les versions antérieures, je recommande la mise à niveau.

Notez que les champs Form Tabs et Grid Columns doivent être remplis avec des chaînes JSON valides. JSON est essentiellement un moyen d'afficher des objets, des tableaux ou des combinaisons clé-> valeur d'une manière prise en charge par presque tous les langages de programmation. Voici la spécification technique et quelques exemples du site officiel JSON.

Définition des onglets de formulaire

Le formulaire vous permet d'utiliser différents onglets. Chaque onglet a une description et plusieurs champs. Vous pouvez faire beaucoup de choses avancées avec cela car vous utiliserez un seul onglet la plupart du temps, alors rappelez-vous juste pour l'instant. Voici le code JSON pour les onglets de formulaire que j'utilise :

[("caption":"Image", "fields": [ ("field":"set","caption":"Set"), ("field":"description","caption":"Description") , ("field":"image","caption":"Image","inputTVtype":"image") ] )]

Passons en revue chaque ligne :

• Le premier montre l'ouverture du tableau d'onglets avec un crochet ([), et l'objet d'ouverture de l'onglet avec une accolade ((). Après cela, nous définissons la légende du champ Image. Notez que vous avez besoin pour utiliser des guillemets doubles (" ") pour les propriétés et leurs valeurs, les simples peuvent conduire à des résultats inattendus. Si vous avez ces crochets dans des propriétés, des valeurs, échappez-les avec une barre oblique (\). Après avoir défini la description (légende), continuons et commençons à définir le tableau de "champs", en l'ouvrant avec des crochets ([) .
• Nous définirons notre premier champ comme défini. "field": "set" signifie que nous voulons avoir une entrée de texte brut dans ce champ. "Légende":"Set" - nous donnons une description du nom "set" - ce sera le nom pour la saisie de texte brut. Ensuite, donnez-lui la légende "Set", qui sera affichée sur le formulaire en tant qu'étiquette de champ.
• Ensuite, définissez le champ de description de la même manière
• La ligne 4 définit l'image. Ce qui est spécial ici, c'est que nous utilisons un autre téléviseur (nommé "image") comme type d'entrée. Il s'agit d'une fonctionnalité très puissante de MIGX qui vous permet d'utiliser d'autres téléviseurs pour créer votre formulaire. Dans ce cas, le téléviseur "image" est très simple : le type d'entrée est image, et en 2.2, vous pouvez l'affecter à la bonne source multimédia. Vous n'avez pas besoin de l'associer à des modèles comme vous le feriez avec une télévision ordinaire. Une autre façon de procéder (que j'utilise sur d'autres téléviseurs MIGX) consiste à créer des boîtiers radio ou des boîtiers de sélection.
• La cinquième ligne ferme le tableau de champs. Notez également que la dernière ligne définissant le champ (image) ne se termine pas par une virgule - c'est important ! Si vous mettez une virgule dans un tableau, le JSON ne sera pas analysé et votre formulaire ne fonctionnera pas.
• La sixième ligne ferme l'objet onglet et l'ensemble du tableau d'onglets.

Ainsi, de cette façon, nous avons créé la télévision "d'image" ! Vous devriez déjà avoir un formulaire pour remplir les données, mais vous avez besoin d'un balisage pour l'afficher...

Définition du balisage de colonne

La disposition des colonnes est un tableau sur le panneau TV de la ressource. Vous devez définir les en-têtes de ce tableau via les options de saisie Column Markup. Voici la définition (JSON à nouveau) de ce que j'utilise : [( "header": "Set", "sortable": "true", "dataIndex": "set" ),( "header": "Description" , "sortable" : "true", "dataIndex": "description" ),( "header": "Image", "sortable": "false", "dataIndex": "image","renderer": "this. renderImage" )]

Passons en revue chaque ligne :

• Ouvrez le tableau d'en-tête avec des crochets ([) et le titre de la cinquième colonne avec des accolades (()).
• Nous nommons l'en-tête "Set", indiquons qu'il peut être triable (sortable) et spécifions le paramètre "set", qui correspond à la définition de Set Form Tabs, qui ont "field":"set".
• Fin de série / début de description
• Nous nommons l'en-tête "Description", triable et le faisons correspondre avec la description du champ dataIndex.
• Description de fin / Image de début
• Nommez l'en-tête "Image", non triable, et associez-le au champ dataIndex - image. Nous définirons également un moteur de rendu qui, dans ExtJS, vous permettra de modifier l'apparence des données de sortie. Dans ce cas "this.renderImage", le moteur de rendu prendra automatiquement l'URL de l'image sélectionnée et restituera une vignette à la place.
• La fin d'un objet Image et d'un tableau d'en-têtes.

Après cela, vous pouvez attribuer ce téléviseur MIGX à votre modèle et vérifier le résultat. Le balisage ne s'affiche pas ? Revenez aux onglets et assurez-vous que toutes les valeurs sont entre guillemets doubles et non entre guillemets simples et vérifiez les virgules supplémentaires.

Informations

Pour valider JSON, utilisez JSONLint .

• Remplissez les détails
• Apporter des données sur le site

Remplissez notre variable de modèle ws.image avec des données arbitraires

Si vous essayez d'afficher ces données comme un téléviseur normal, vous verrez quelque chose comme ceci :

[( "MIGX_id":"1","set":"set1","description":"Marquez le chat, qui vole des saucisses et mange quand il est éveillé","image":"demo/uroki/15/1 .jpg" ),( "MIGX_id":"2","set":"set1","description":"drum","image":"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":"tu peux tuer un homme avec ce livre","image":"demo/uroki/15/4.jpg" )]

Il s'agit d'un tableau JSON avec des champs et des valeurs saisis !

Étant donné que MIGX est fourni avec un extrait de code getImageList, vous pouvez essayer d'afficher les données en l'utilisant. La documentation de cet extrait est disponible ici. Ou créez votre propre extrait (parseMIGXToGallery), que j'utilise pour générer un balisage à partir du bloc &tpl basé sur les données TV :

fromJSON($input); $sortie = tableau(); if (!$input || empty($tpl)) return "no stuff" ; foreach ($input as $row) ( if (isset($set) && !empty($set) && ($set != $row["set"])) continue ; $output = $modx->getChunk($ tpl, $ligne); ) return implode("\n", $sortie);

Passons en revue chaque ligne :

• Nous prenons la variable $input (qui prend les données contenues dans le paramètre &input dans l'appel d'extrait de code, nous en reparlerons plus tard) et analysons le JSON dans un tableau php.
• Nous allons définir un tableau vide pour contenir notre sortie.
• Assurons-nous que la variable $input n'est pas NULL ou False, ce qui signifierait que JSON n'a pas été passé ou qu'il est invalide, et vérifions également si la variable $tpl (passée par le paramètre &tpl dans l'appel d'extrait) n'est pas vide. Si l'une ou l'autre des conditions est vraie, nous imprimerons un message d'erreur "vide", qui servira d'indice au gestionnaire de contenu que quelque chose ne va pas.
• Ensuite, parcourez chaque élément du tableau $input en tant que $row.
• Nous vérifions si la variable $set est définie (qui est définie dans l'appel d'extrait de code dans le paramètre &set) et si elle n'est pas vide, nous vérifions sa valeur par rapport à la valeur "set" de la ligne actuelle. Si ce n'est pas ce que vous voulez, passez à l'élément suivant du tableau.
• Nous obtenons un morceau nommé $ tpl et y insérons les valeurs de la ligne actuelle en tant qu'espaces réservés.
• Nous fermons la boucle foreach.
• Enfin, nous collons ensemble le tableau $output, en séparant chaque élément par un saut de ligne, et le sortons sur la page.
• Donc, pour résumer ce qui précède, nous prenons l'entrée, parcourons chaque ligne et vérifions si elles appartiennent à l'ensemble que nous avons défini, puis il obtient un morceau et ajoute tout à la sortie.
• Exécuter l'extrait

Tout ce dont nous avons besoin est un appel d'extrait où nous avons besoin de nos images et d'un morceau qui affichera tout de la bonne manière pour le FlexSlider. Voici comment l'extrait s'appelle :

[]` &set=`set1` ]]

Et le morceau images.gallery.tpl :

[[+description]]

Vous devez également encapsuler l'intégralité de la sortie de l'extrait de code dans une div et une liste non ordonnée, selon la documentation FlexSlider. Pour rendre tout cela plus facile, mettons tout cela en un seul morceau. Mon bloc s'appelle slider et contient les éléments suivants :

En utilisant ce morceau, je peux simplement créer un lien vers quelque chose dans le contenu, ce qui est beaucoup plus facile à retenir ou à mettre dans une feuille de triche.

[[$slider?set=`nom de l'ensemble`]]

Vous pouvez maintenant commencer à disposer le FlexSlider.

Étape 3 : Utiliser FlexSlider

FlexSlider est relativement facile à utiliser (téléchargez ses fichiers) et il y a des tonnes d'exemples sur son site Web. Vous devez également inclure l'appel à jQuery sur la page et son fichier CSS (emballé dans un fichier zip) et le plugin FlexSlider (également dans l'archive zip). Après cela, vous devez déclencher le bon élément en utilisant le code suivant :

Le site conseille de tout mettre en tête du dossier, mais personnellement je mets tout en bas. Si votre curseur est affiché en haut de la page, alors il est préférable de le placer dans pour qu'il se charge avant que la page n'apparaisse, alors placez-le où vous voulez.

C'est tout! J'espère que ce long article aidera quelqu'un à commencer à utiliser MIGX et des curseurs comme FlexSlider !

Aujourd'hui un petit article sur comment créer un curseur dans modx en utilisant le package BanerY. Ce package peut être téléchargé et installé à partir du référentiel.

Créer un slider avec BanerY

Et donc il y a un slider statique, que ce soit un slider bootstrap régulier, avec ce balisage :

L'objectif est de créer un curseur géré à partir de ce balisage. Commençons.

Commençons par créer des diapositives dans BannerY, pour cela nous allons dans Applications - BannerY - Positions et créons une position (par exemple, home-slider).

Après cela, allez dans l'onglet Bannières et cliquez sur le bouton Nouvelle bannière. Une fenêtre de création d'une nouvelle bannière s'ouvrira.

Nous remplissons tout :

• Nom, il peut être affiché en utilisant [[+nom]].
• Sélectionnez une image - [[+image]].
• Spécifiez l'URL où aller - [[+url]].
• Remplissez la description - [[+description]] - ici, au fait, vous pouvez facturer non seulement du texte, mais aussi du html normal, et c'est cool.
• Eh bien, sélectionnez la position (créée plus tôt).

Et donc nous créons le nombre requis de diapositives.

Maintenant, vous devez diviser le balisage ci-dessus en morceaux et adapter le code dans les morceaux à la syntaxe BanerY

Créer un morceau pour un curseur séparé avec une classe actif, qu'il en soit ainsi faire glisser et injectez-y la syntaxe :

Maintenant, copiez ce morceau et donnez-lui un nom slide2 et supprimer la classe actif

Eh bien, il ne reste, en fait, qu'à afficher les diapositives.

[]

En conséquence, nous obtenons ce qui suit :

C'est tout) Il est si facile de créer un curseur sur modx en utilisant BanerY.

Oui, au fait, sa documentation est ici : docs.modx.pro/components/bannery/snippet

Slider Revolution est l'un des curseurs les plus populaires en raison de sa vaste gamme de fonctionnalités et de sa facilité d'utilisation.
de ThemePunch. Ce curseur a été acheté plus de 273 441 fois et est utilisé par plus de 2 500 000 sites dans le monde.

Voici quelques-uns des principaux avantages de ce slider, qui le distingue de gratuit et
la plupart des analogues haut de gamme :

• Éditeur visuel puissant - personnalisez l'affichage du curseur en fonction des besoins de votre projet grâce à un menu pratique dans lequel
  chaque fonction est à sa place. Une gradation stricte ne vous permettra pas de vous perdre. La seule difficulté à
  la première fois sera l'envie de tous les essayer.
• Contrôle de la variabilité de chaque diapositive - l'affichage prévu des blocs sur l'écran d'un PC, d'une tablette et d'un téléphone
  affiché dans l'éditeur visuel. Vous pouvez modifier la taille des diapositives individuellement pour chaque appareil.
  Le modèle réactif ne permettra pas aux images et aux vidéos d'être déformées ou de prendre plus d'espace que nécessaire pour
  visualisation pratique.
• Travailler avec les réseaux sociaux et l'hébergement vidéo - Slider Revolution cinquième génération vous permet d'inclure dans le curseur
  données d'Instagram, Facebook, Flickr, Twitter, Vimeo et Youtube. Si vous envisagez de publier la vidéo par vous-même
  serveur, vous pouvez utiliser le langage HTML5. Des parties du code seront écrites automatiquement.
• Haute performance et optimisation des diapositives - le plugin fonctionne rapidement en mode édition et réduit
  le poids du curseur sans perdre la qualité du contenu. Vous n'avez pas à vous soucier des longs temps de chargement des pages. Qu'est-ce qui est surtout
  pertinent par rapport aux appareils mobiles qui sont hors de portée des connexions WiFi.
• Un grand nombre d'effets spéciaux lors de la transition des diapositives
• De nombreux effets d'animation lors de l'affichage de texte, de vidéo et d'images
• Démarrage automatique de la vidéo à l'ouverture du site ou manuel, au choix, arrêt du slider lors du visionnage de la vidéo,
  rembobiner, etc.
• Grand choix de paramètres de navigation
• Insérez des annonces de publication avec des liens directement dans le curseur, pendant qu'il est configuré pour l'optimisation du référencement
• Prise en charge et installation de Google Fonts
• En utilisant de nombreuses couches (images, vidéos, légendes et liens) dans une seule diapositive, il y en a d'innombrables
  se superposent, créant ainsi une vidéo réaliste ou toute présentation.

Attention! Pour pouvoir télécharger des modèles de curseurs et des objets de bibliothèque premium en ligne, vous devez acheter une licence distincte auprès de ThemePunch, qui au moment de la rédaction de ce texte coûte 19 $, puis l'activer en entrant le code d'achat dans le champ indiqué. dans la figure ci-dessous.

Revue vidéo modSliderRevolution

Aujourd'hui, nous verrons comment créer un curseur Bootstrap à l'aide de MIGX. Avant de commencer l'étude, je vous recommande de visiter celle-ci en premier.

Création d'une configuration MIGX

je vais à la direction MIGX et ajoutez un nouvel élément nommé glissière, dans le champ de remplacement écrivez " Ajouter des diapositives"et allez dans l'onglet" Onglets de formulaire».

• Nom du champ - titre, Légende - Titre.
• Nom de champ - diapositive, Légende - Diapositive, Type d'entrée TV - image.
• Nom du champ - description, Légende - Description.
• Nom de champ - idstranici, Légende - Spécifiez l'identifiant du document à lier.

• En-tête - Titre, Champ - titre.
• En-tête - Diapositive, Champ - diapositive, Moteur de rendu - this.renderImage.
• En-tête - Description, Champ - description.
• En-tête - identifiant du document, Champ - idpage.

Noter: Essentiellement, nous transférons des éléments de Formtabs. Oui, vous pouvez également remplir les champs Largeur de colonne - la largeur des colonnes.

Enregistrer (exécuter).

Pour ceux qui ne veulent pas du tout se baigner, on crée une configuration vide et on y exporte le code suivant :

( "formtabs":[ ( "MIGX_id":1, "caption":"\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", "description":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u043b\u0430\u0439\u0434\u0430", "description_is_code":"0" , "inputTV": "", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config" , "sources": "", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":1 ), ( "MIGX_id":2, "field":"slide ", "caption" :"\u0421\u043b\u0430\u0439\u0434", "description":"", "description_is_code":"0", "inputTV":"", "inputTVtype":"image", " validation":"" , "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config", "sources":"", "inputOptionValues":"", " default":"" , "useDefaultIfEmpty":"0", "pos" :2 ), ( "ID_MIGX":3, "champ":"description", "légende":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "description":"", " description_is_code":"0", "inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":"", " sourceFrom":"config", "sources":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":3 ), ( "MIGX_id":4, "field":"idstranici", "caption":"\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\u043b\u0430\u0442\u044c\u0441\u044f", "description":"", "description_is_code":"0", " inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config", " sources":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":4 ) ], "pos":1 ) ], "contextmenus":"" , "actionbuttons":"", "bouton de colonne s":"", "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":" bas", "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":"", "task":"", "getlistsort":"", " getlistsortdir":"", "sortconfig":"", "gridpagesize":"", "use_custom_prefix":"0", "prefix":"", "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, "header":"\u0421\ u043b\u0430\u0439\u0434", "dataIndex":"slide", "width":100, "sortable":"false", "show_in_grid":1, "customrenderer":"", "renderer":"ce .renderImage", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ), ( "MIGX_id":3, "header" :"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "dataIndex":"description", "width":200, "sortable":"false", "show_in_grid":1, "rendu personnalisé ":"", "renderer":"", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ), ( " MIGX_id":4, "header":"identifiant \u0434\u043 e\u043a\u0443\u043c\u0435\u043d\u0442\u0430", "dataIndex":"idstranici", "width":50, "sortable":"false", "show_in_grid":1, "customrenderer":" ", "renderer":"", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ) ], "category": "")

Création d'un téléviseur avec la configuration MIGX

Dans l'arborescence MODX, sur le " Éléments", presse + en face de la pointe Champs supplémentaires" et entrez ce qui suit :

• "Nom" - curseur ; "Signature" - Curseur.
• Dans l'onglet "Options d'entrée" dans le "Type d'entrée", sélectionnez migx, et dans le champ "Configurations", entrez glissière.
• Dans l'onglet "Disponible pour les modèles", sélectionnez les modèles pour lesquels la saisie dans ce champ sera disponible.

Entrée de données

Ouvrons un document pour lequel le champ du curseur est attribué avec MIGX avec configuration et entrons-y des données.

Bootstrap 3 sortie du carusel à la page

Nous avons un balisage HTML standard getbootstrap.com/docs/3.3/javascript/#carousel-examples, refaites-le pour MIGX et écrivez le code suivant à l'endroit requis dans le modèle :

Et créez des morceaux :

tplsliderIndicateur:

et morceau tplsliderItem avec le contenu suivant :

Bootstrap 4 sorties carusel par page

Comme dans le cas précédent, on prend le balisage standard getbootstrap.com/docs/4.1/components/carousel/ et le refaire, en conséquence nous obtenons

Où est le morceau tplsliderIndicateur a le code suivant :

et morceau tplsliderItem avec le code suivant :