製品ページの Modx 画像カルーセル。 大きくて怖い

こんにちはコミュニティ！

このノートでは、複数のフォームタブとは何か、および異なるデータ セットを使用して構成を作成する方法について説明します。 そしてもちろん、さまざまな種類のスライドを持つスライダーを作成します。最後に非常に 興味深い話私は長い間誰にも話すことを敢えてしませんでした（もちろん、あなたが興味を持っている場合を除きますが、話は興味深いです-私を信じてください）。 スライドの例:

• 背景画像
• ビデオの背景
• 無地の背景

注意！ 今回は年齢や性別による差別なので、子供や妊婦を画面から外さないでください！

それがどうなるか

もうひとつのお知らせ！ 繰り返さないように最初のレッスンを参照することが多いので、よく知っておくことを強くお勧めします。

何のために？

想像してみましょう: たとえば、メイン ページにいくつかの種類のスライドを含むスライダーがあり、1 つはビデオの背景、もう 1 つは写真、3 番目は単色などのプロジェクトを取得します。 1 つのフィールド セット (1 つの構成) を作成し、これらすべてのフィールドをそれに詰め込んで (用語集で申し訳ありません)、マネージャーにそれとどのように共存し、どうあるべきかを伝えることはありません。 ではありません 真剣な態度！? （誰かが理解してくれることを願っています）

原因として

私たちはあなたと一緒に「理由」を理解しました。今度は「方法」を見てみましょう。 最初のレッスンをすでに読んでいる場合は、MIGX コンポーネント ページに移動して、3 つの構成を作成する必要があります。 Jako による ColorPicker をプリインストールします (ただし、関係ありません)。:

私が示していないものはすべて飛ばしてください！

立体構成（単色）

• タブ 設定
  • 名前- 個体
  • 新しいカテゴリを追加- スライダー
• タブ フォームタブ
  • 田畑 田畑 3 つのフィールドを作成する
    1. 背景色:
       • フィールド名-bgcolor
       • キャプション- 背景色を選択
       • 入力テレビの種類- ColorPicker (またはあなたが
         使用する）
    2. 題名：
       • フィールド名ヘッダ
       • キャプション- スライドのタイトル
    3. 説明：
       • フィールド名- 説明
       • キャプション- スライドの説明
       • 入力テレビの種類-テキストエリア
  • 複数のフォームタブ フィールド-タイプ（ 与えられた値キーの名前になります
    出力配列。 デフォルト: MIGX_フォーム名)
  • - 背景に単色を使用 (テキスト
    この構成は選択リストにあります)
  • - solid (同じタイプのフィールドの値
    配列内）

ビデオ構成

• タブ 設定
  • 名前- ビデオ
  • カテゴリー- スライダー
• タブ フォームタブ
  • 田畑- 1 つのタブを作成し、フィールドに 田畑ここでも 3 つのフィールドを作成しますが、これらのフィールドの 1 つだけが異なるタイプです。

    ここで、さまざまな構成のフィールドの数とそのタイプは、あなたの想像力が限られているのと同じくらい異なる可能性があることを明確にする必要があります.

    1. ビデオ (つまり、ファイル):
       • フィールド名- ビデオ
       • キャプション- 動画をアップロード
       • 入力テレビの種類- ファイル
    2. 題名：
       • フィールド名ヘッダ
       • キャプション- スライドのタイトル
    3. 説明：
       • フィールド名- 説明
       • キャプション- スライドの説明
       • 入力テレビの種類-テキストエリア
  • 複数のフォームタブ フィールド- タイプ
  • 複数のフォームタブ オプションテキスト- バックグラウンドでビデオを使用
  • 複数のフォームタブ オプション値- ビデオ

スライダー構成

デフォルトでは、画像を受け入れ、一種のメイン構成になります。

• タブ 設定
  • 名前- スライダー
  • カテゴリー- スライダー
  • 「アイテムの追加」を置き換えます- スライドを追加
  • フォームのキャプション
  • ウィンドウタイトル- スライドの追加・編集
• タブ フォームタブ
  • 田畑- 1 つのタブを作成し、[フィールド] フィールドに 3 つのフィールドを再度作成します
    1. 画像：
       • フィールド名- 画像
       • キャプション- 画像をアップロード
       • 入力テレビの種類- 画像
       • 必要なファイルのソースを指定します。このタスクについては最初のレッスンで説明しました
    2. 題名：
       • フィールド名ヘッダ
       • キャプション- スライドのタイトル
    3. 説明：
       • フィールド名- 説明
       • キャプション- スライドの説明
       • 入力テレビの種類-テキストエリア
  • 複数のフォームタブ- これがまさに魔法です。現在作成しているものを含め、前の手順で作成した構成を選択する必要があります。 ビデオ、ソリッド、スライダーを選択

    構成 スライダー実際にはまだ作成されていないため、リストには表示されません。残りのポイントを確認し、構成を保存し、この構成を編集のために再度開くと、今回はリストで使用できるようになります。 スライダー

    
    

    もう1つ明確にします。構成は、選択した順序で正確にソートされます。 デフォルトでは、新しいスライドを追加すると、リストの最初のスライドが選択されます
    

  • 複数のフォームタブ ラベル- スライドの種類を選択します (ここにテキストが表示されます)
    スライド タイプ選択リストの横に表示されます)
  • 複数のフォームタブ フィールド- タイプ
  • 複数のフォームタブ オプションテキスト- 背景に画像あり
  • 複数のフォームタブ オプション値- 画像
• タブ 列
  • 分野 列。 2 つの要素を追加する
    1. ヘッダ
       • タブ 桁
         • ヘッダ- 題名
         • 分野ヘッダ
       • タブ セル エディタ
         • 編集者- this.textEditor
    2. 説明
       • タブ 桁
         • ヘッダ- 説明
         • 分野- 説明
       • タブ セル エディタ
         • 編集者- this.textEditor

すでにお気付きのように、最初の 2 つの構成では、コントロール パネルに出力用のいわゆる列を作成しませんでした。 TV パラメータ自体を編集する場合。 これらの列は後者で作成する必要があります。 テレビで示される構成で、フィールドで 複数のフォームタブタブ フォームタブ同じ構成自体を含め、必要なすべての構成がリストされます

フィールドで、入力タイプ mix を使用して TV をすばやく作成しましょう。 構成構成の名前を書きます。 スライダー 、必要なテンプレートを割り当て、編集用にリソースを開くか、作成します。 すべてを正しく行った場合、次の図が表示されます。

画像はクリック可能で、メモの冒頭にあるリンクから gif を既に見ている場合は、これがその 1 つです。

すぐにデータを入力し、スライドの出力に進みます。

退会方法は？

データの入力は良いが、出力はどうだろう？ 同志諸君、心配するな、すべてうまくいく。 出力についても、2 つの適切なオプションがあり、これらのオプションの両方を で検討しました。これはネイティブ MIGX スニペットです。 getImageListそして全能 現象. データがどのように見えるか見てみましょう。

getImageList

生データを表示するために、tpl パラメータを指定せずにスニペットを呼び出してみましょう。

[] 配列 ( => 14 => 画像 => files/avatar.png => これは画像付きのスライドです => 簡単な説明) [_alt] => 0 [_first] => 1 [_last] => => 1 => スライダー) 配列 ( => 15 => ビデオ => ファイル/私の家は恥ずべき.MOV => そして、これはビデオです => はい、確かに! [_alt] => 1 [_first] => [ _last] => => 2 => スライダー) 配列 ( => 16 => solid => ff0000 => ここの赤は美しい色です => いいね! [_alt] => 0 [_first] => [_last ] => 1 => 3 => スライダー)

現象

($_modx->resource.slider| fromJSON | print) 配列 ( => 配列 ( => 14 => 画像 => files/avatar.png => これは画像スライドです => まあ、簡単な説明)) => 配列( = > 15 => ビデオ => ファイル/私の家は恥ずべきことです.MOV => そして、これはビデオです => はい、確かに!) => 配列 ( => 16 => 実線 => ff0000 => ここで赤はきれいな色 => いいね!))
ご覧のとおり、配列では、とりわけ、キー タイプ構成を作成するときに指定した値を使用します。

スライダーを表示するには getImageList、キー値の名前で 3 つのチャンクを作成する必要があります タイプ、つまり: image 、 video 、および solid 。 さらに、その理由がわかります。

チャンクの例:

//チャンク画像

//チャンクビデオ //チャンクソリッド
呼び出しは次のようになります。

ここでは、各スライドの配列から値を取得するため、フィールド値と名前が一致する 3 つのチャンクを作成しました 複数のフォームタブ フィールド

さて、 現象すべてがはるかに簡単に見えます:

(var $slider = $_modx->resource.slider| fromJSON) ($slider の場合)

（/もしも）

結末と約束の物語

ご覧のとおり、MIGX は、「優れている」とは言えませんが、少なくとも「良い」とは言えませんが、このタスクに対応しています。 もう一度繰り返しますが、MIGX は構成の数、各構成のタブ、およびそれらのフィールドの数を制限していません。 そして、あなたがすでに理解していることを望んでいるように、例は非常に単純であるため、この機能に慣れることもできます. もう1つ重要なこと：チャンクを出力するときは、フィールドがいっぱいであることを確認することを強くお勧めします。データが入力されているかどうか、または何らかの理由で入力されていない可能性があることを常に考慮してください。したがって、MODX構文にはphxフィルターを使用しますまたはフェノムの条件。

ご清聴ありがとうございました。皆様のご多幸をお祈りいたしますが、そうはなりません。話。

私の親戚が私たちを訪ねてきたとき、その中には私の甥（私の妹の息子）がいます。 隣国と私の2人の甥（私たちはほぼ同じ年齢です）。 カントリーハウス、日当たりの良い中央アジア、近くの小さな山と川。 その同じ夜、私たち4人はまさにこの川に沿って散歩することに決めました。最初はすべてが穏やかで、興奮する理由はありませんでした。 彼らはとても楽しかったし、話をしたり（時には怖くて気味が悪い）、冗談を言ったり、そのようなことをしました。 しかし、ある時、私の甥の一人が顔面蒼白になったことに気付きました。これは単なる口頭や装飾ではありません。なぜなら、この事件の前後に、人の顔にそのような恐怖と戸惑いを見たことがなかったからです。 彼は目を離さず、俺の背を向けた方向、つまり 彼は私の後ろの何かまたは誰かを見ているように見えましたが、真後ろや近くではなく、遠くのどこかを見ているように見えました。 怖かったので、彼に尋ねました： - どうしたの？ そして彼…

この段落は、このメモのストーリーに続きがあるふりをする必要がありますが、実際には、技術的で退屈で大きなテキストから少し元気づけられることを期待して、あなたを少しだましました。ムード。 話自体はリアルでとても面白いです。 それでは、ご清聴ありがとうございました！

更新:
もし私がバハ!?

突然誰かがルーブルに感謝したい場合は、それで構いません: Sberbank card +79609354545

このレッスンでは、MIGX の基本について説明し、ブログで使用できる新しいスライダーに取り組みます。

要件：

• MODXレボリューションのサイト。
• インストールされた MIGX カスタム テンプレート変数タイプ (パッケージ管理経由)。
• 統合したいギャラリー スライダーまたはスクリプト。 WooThemes の FlexSlider を使用したのは、コンテナーの幅に合わせて調整されるためです (レスポンシブ デザインには非常に重要です!)。 また、高度な構成が可能で、スマートフォンでのスクロールをサポートし、箱から出してすぐにきれいに見えます.
• 画像のオートクロッピング用にパッケージ マネージャー経由で phpthumbof スニペットをインストールしました。
• どんな画像でも！

始める

この作品はいくつかのパーツを使用しています。 まず、MIGX TV をインストールする必要があります。このデータをフロント エンドから取得して、スライダーを機能させる必要があります。 このチュートリアルでは、FlexSlider を使用することを前提としています。マークアップが必要なものであることを確認しますが、他のスライダーにも非常に簡単に適応できるはずです。

ステップ 1: 画像管理用に MIGX TV をインストールする

まずはテレビの設置から。 MIGX の強みは、必要なフィールドを定義できることです。 それらは表として表示され、タイトルに名前を付けるだけで済みます。 この場合、3 つの異なるフィールドが必要になります。

• ファイル システム (またはメディア ソースからの 2.2) で画像を選択するための入力フィールド。
• キャプション/タグ/説明を入力するためのテキスト入力フィールド。 FlexSlider はキャプションをうまく処理するので、キャプションを使用します。
• また、「セット」のテキスト入力を追加しました。 後で説明するように、リソースのどこからでも追加される無限の数の個々のスライダーに使用します..

必要に応じて他のフィールドを使用することもできますが、チュートリアルでは上記のフィールドを正確に使用します。

テレビの作成に移りましょう。 これは、画像の説明を含むスライダーです (サムネイルに何も表示されていない場合)。

[要素] タブで新しいテンプレート変数を作成し、適切な名前を付けます。 自分の名前を付ける場合は、[[*ws.images]] を自分の名前に置き換えることを忘れないでください。 [入力オプション] タブで、ドロップダウン メニューから「migx」タイプを選択します。 このタイプが表示されない場合は、パッケージ マネージャーを介して MIGX パッケージがインストールされているかどうかを確認してください。 画面の下部に、フォーム タブやグリッド列など、いくつかのオプションが追加されていることがわかります。 これは MODX >2.0 に適用されます。以前のバージョンでは、アップグレードをお勧めします。

Form Tabs および Grid Columns フィールドには、有効な JSON 文字列を入力する必要があることに注意してください。 JSON は基本的に、ほとんどすべてのプログラミング言語がサポートする方法で、オブジェクト、配列、またはキー -> 値の組み合わせを表示する方法です。 以下は、JSON の公式サイトからの技術仕様といくつかの例です。

フォーム タブの設定

フォームでは、さまざまなタブを使用できます。 各タブには、説明といくつかのフィールドがあります。 ほとんどの場合、単一のタブを使用するため、これを使用して多くの高度なことを行うことができます。 使用しているフォーム タブの JSON コードは次のとおりです。

[("キャプション":"画像", "フィールド": [ ("フィールド":"設定","キャプション":"設定"), ("フィールド":"説明","キャプション":"説明") , ("フィールド":"画像","キャプション":"画像","inputTVtype":"画像") ] )]

各行を見てみましょう：

• 最初のものは、角括弧 ([) でタブの配列の開始を示し、中括弧 (() でタブの開始オブジェクトを示します。その後、Image フィールドのキャプションを定義します。必要であることに注意してください。プロパティとその値に二重引用符 (" ") を使用すると、単一の引用符を使用すると予期しない結果が生じる可能性があります。これらの括弧がプロパティや値に含まれている場合は、スラッシュ (\) でエスケープします。説明 (キャプション) を定義した後、続けて、「フィールド」の配列の定義を開始し、角括弧 ([) で開きます。
• 最初のフィールドを set として定義します。 "field": "set" は、このフィールドにプレーン テキストを入力することを意味します。 「キャプション」：「セット」 - 「セット」という名前の説明を付けます - これは、プレーンテキストを入力するための名前になります。 次に、キャプション「設定」を付けます。これは、フィールド ラベルとしてフォームに表示されます。
• 次に、同じ方法で説明フィールドを定義します
• 4 行目で画像を定義します。 ここで特別なのは、入力タイプとして別の TV (「画像」という名前) を使用していることです。 これは MIGX の非常に強力な機能で、他の TV を使用してフォームを作成できます。 この場合、「画像」TV は非常に単純です。入力タイプは画像で、2.2 ではそれを正しいメディア ソースに割り当てることができます。 通常のテレビのようにテンプレートに関連付ける必要はありません。 これを行う別の方法 (私は他の MIGX TV で使用しています) は、ラジオ ボックスまたは選択ボックスを作成することです。
• 5 行目は、フィールドの配列を閉じます。 また、フィールド (画像) を定義する最後の行がカンマで終わっていないことにも注意してください - これは重要です! 配列にカンマを入れると、JSON が解析されず、フォームが機能しません。
• 6 行目は、タブ オブジェクトとタブの配列全体を閉じます。

というわけで、このようにして「イメージ」TVができあがりました！ データを入力するためのフォームは既にあるはずですが、それを表示するにはマークアップが必要です...

列マークアップの設定

列のレイアウトは、リソースの TV パネル上のテーブルです。 列マークアップ入力オプションを使用して、このテーブルのヘッダーを定義する必要があります。 これが私が使用しているものの（JSON再び）定義です： [( "header": "Set", "sortable": "true", "dataIndex": "set" ),( "header": "Description" , "sortable" : "true", "dataIndex": "description" ),( "header": "Image", "sortable": "false", "dataIndex": "image","re​​nderer": "this. renderImage" )]

各行を見てみましょう：

• 角かっこ ([) で見出し配列を開き、中かっこ (() で 5 番目の列見出しを開きます。
• ヘッダーに "Set" という名前を付け、並べ替え可能 (並べ替え可能) であることを示し、パラメーター "set" を指定します。これは、"field":"set" を持つセット フォーム タブの定義に対応します。
• セットの終わり / 説明の始まり
• ヘッダーに「Description」という名前を付け、ソート可能にして、フィールドの説明 dataIndex と一致させます。
• 終了説明/開始画像
• ヘッダーに「Image」という名前を付けて並べ替え不可にし、それを dataIndex - image フィールドにマップします。 また、ExtJS で出力データの外観を変更できるレンダラーも定義します。 この場合、「this.renderImage」では、レンダラーは選択された画像の URL を自動的に取得し、代わりにサムネイルをレンダリングします。
• Image オブジェクトの末尾とヘッダーの配列。

その後、この MIX TV をテンプレートに割り当てて、結果を確認できます。 マークアップが表示されない? タブに戻り、すべての値が一重引用符ではなく二重引用符で囲まれていることを確認し、余分なコンマを確認します。

情報

JSON を検証するには、 JSONLint を使用します。

• 詳細を入力してください
• データをサイトに持ち込む

ws.image テンプレート変数に任意のデータを入力します

このデータを通常の TV として表示しようとすると、次のように表示されます。

[( "MIGX_id":"1","set":"set1","description":"目が覚めたらソーセージを盗んで食べる猫に印をつける","image":"demo/uroki/15/1 .jpg" ),( "MIGX_id":"2","set":"set1","説明":"ドラム","画像":"demo/uroki/15/2.jpg" ),( "MIGX_id" ":"3","set":"set1","説明":"como esta nuevo","画像":"demo/uroki/15/3.jpg" ),( "MIGX_id":"4", "set":"set1","description":"この本で男を殺すことができます","image":"demo/uroki/15/4.jpg" )]

これは、フィールドと値が入力された JSON 配列です。

MIGX には getImageList スニペットが付属しているため、それを使用してデータの表示を試すことができます。 このスニペットのドキュメントは、こちらにあります。 または、TV データに基づいて &tpl チャンクからマークアップを生成するために使用する独自のスニペット (parseMIGXToGallery) を作成します。

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

各行を見てみましょう：

• $input 変数 (スニペット呼び出しの &input パラメーターに含まれるデータを取得します。これについては後で詳しく説明します) を取得し、JSON を php 配列に解析します。
• 出力を保持するために空の配列を設定します。
• $input 変数が NULL または False でないことを確認します。これは、JSON が渡されなかったか、無効であることを意味します。また、$tpl 変数 (スニペット呼び出しで &tpl パラメーターによって渡された) が空でないかどうかも確認します。 いずれかの条件が True の場合、「空」のエラー メッセージが出力されます。これは、何かが間違っていることを示すコンテンツ マネージャーへのヒントとして機能します。
• 次に、$input 配列の各要素を $row として反復処理します。
• $set 変数が設定されているかどうか (スニペット呼び出しで &set パラメーターに設定されている) を確認し、空でない場合は、現在の行の "set" 値に対してその値を確認します。 これが望ましくない場合は、配列内の次の要素に進みます。
• $tpl という名前のチャンクを取得し、現在の行の値をプレースホルダーとして挿入します。
• foreach ループを閉じます。
• 最後に、$output 配列をまとめて、各要素を改行で区切り、ページに出力します。
• 上記を要約すると、入力を取得し、各行を調べて、定義したセットに属しているかどうかを確認し、チャンクを取得してすべてを出力に追加します。
• スニペットを実行

必要なのは、画像が必要なスニペット呼び出しと、FlexSlider の正しい方法ですべてを出力するチャンクだけです。 スニペットの呼び出し方法は次のとおりです。

[]` &set=`set1` ]]

そして images.gallery.tpl チャンク:

[[+説明]]

FlexSlider のドキュメントによると、スニペット出力全体を div と順序なしリストでラップする必要もあります。 すべてを簡単にするために、すべてを 1 つのチャンクにまとめましょう。 私のチャンクはスライダーと呼ばれ、以下が含まれています：

このチャンクを使用すると、コンテンツ内の何かに簡単にリンクできます。これにより、覚えたりチート シートに入れたりするのがはるかに簡単になります。

[[$slider?set=`セットの名前`]]

これで、FlexSlider のレイアウトを開始できます。

ステップ 3: FlexSlider の使用

FlexSlider は比較的使いやすく (ファイルをダウンロード)、その Web サイトにはたくさんの例があります。 また、ページに jQuery への呼び出しとその CSS ファイル (zip ファイルにパックされています) および FlexSlider プラグイン (同じく zip アーカイブ) を含める必要があります。 その後、次のコードを使用して正しい要素をトリガーする必要があります。

このサイトでは、すべてをファイルの先頭に入れることをお勧めしていますが、個人的にはすべて末尾に入れています。 スライダーがページの上部に表示されている場合は、それを配置することをお勧めします ページが表示される前に読み込まれるので、好きな場所に配置してください。

それで全部です！ この長い記事が、誰かが MIGX や FlexSlider のようなスライダーを使い始めるのに役立つことを願っています!

今日はについての小さな記事 modxでスライダーを作成する方法 BanerY パッケージを使用します。 このパッケージは、リポジトリからダウンロードしてインストールできます。

BanerY でスライダーを作成する

そして、静的スライダーがあります。これを通常のブートストラップ スライダーにします。次のマークアップを使用します。

目標は、このマークアップからマネージド スライダーを作成することです。 始めましょう。

BannerY でスライドを作成することから始めましょう。このために、[アプリケーション] - [BannerY] - [位置] に移動し、位置 (たとえば、ホーム スライダー) を作成します。

その後、[バナー] タブに移動し、[新しいバナー] ボタンをクリックします。 新しいバナーを作成するためのウィンドウが開きます。

私たちはすべてを満たします：

• 名前、[[+name]]で表示できます。
• 画像を選択 - [[+画像]]。
• 移動先の URL を指定します - [[+url]]。
• 説明を入力してください - [[+description]] - ちなみに、テキストだけでなく、通常の html も請求できます。
• さて、位置を選択します（以前に作成しました）。

そのため、必要な数のスライドを作成します。

次に、上記のマークアップをチャンクに分割し、チャンク内のコードを BanerY 構文に適合させる必要があります。

クラスで別のスライダーのチャンクを作成する アクティブ、 なるがままに 滑り台それに構文を挿入します。

そのチャンクをコピーして名前を付けます スライド2クラスを削除します アクティブ

まあ、実際には、スライドを表示するだけです。

[]

その結果、次のようになります。

それだけです) BanerY を使用して modx でスライダーを作成するのはとても簡単です。

はい、ちなみに、そのドキュメントは次のとおりです。 docs.modx.pro/components/bannery/snippet

Slider Revolution は、その幅広い機能と使いやすさから、最も人気のあるスライダーの 1 つです。
テーマパンチより。 このスライダーは 273,441 回以上購入され、世界中の 2500000 以上のサイトで使用されています。

以下に、このスライダーの主な利点のいくつかを示します。これにより、無料とは異なります。
最もプレミアムなアナログ:

• 強力なビジュアル エディター - 便利なメニューを使用して、プロジェクトのニーズに合わせてスライダー表示をカスタマイズします。
  すべての機能がその場所にあります。 厳密なグラデーションにより、混乱することはありません。 唯一の難点は
  初めてそれらすべてを試してみたいという欲求になります。
• 各スライドの可変性の制御 - PC、タブレット、電話の画面上でのブロックの計画的な表示
  ビジュアルエディターに表示されます。 デバイスごとに個別にスライドのサイズを変更できます。
  レスポンシブ テンプレートでは、写真やビデオが歪んだり、必要以上のスペースを占有したりすることはありません。
  便利な表示。
• ソーシャル ネットワークやビデオ ホスティングと連携 - Slider Revolution の第 5 世代では、スライダーに含めることができます
  Instagramm、Facebook、Flickr、Twitter、Vimeo、Youtube からのデータ。 自分で動画を投稿する場合
  サーバーでは、HTML5 言語を使用できます。 コードの一部は自動的に書き込まれます。
• 高いパフォーマンスとスライドの最適化 - プラグインは編集モードで高速に動作し、
  コンテンツの品質を損なうことなく、スライダーの重みを軽減します。 ページの読み込み時間が長いことを心配する必要はありません。 特に何が
  WiFi 接続の範囲外にあるモバイル デバイスに関連します。
• スライド遷移時の膨大な数の特殊効果
• テキスト、ビデオ、写真を表示する際の多くのアニメーション効果
• サイトを開いたときにビデオを自動的に開始するか、手動で選択するか、ビデオを見ているときにスライダーを停止するか、
  巻き戻しなど
• 豊富なナビゲーション設定
• seo最適化用に構成されている間に、リンク付きの投稿通知をスライダーに直接挿入します
• Google Fonts のサポートとインストール
• 1 つのスライドに多くのレイヤー (写真、ビデオ、キャプション、リンク) を使用すると、それらは無数にあります
  互いにオーバーレイし、リアルなビデオやプレゼンテーションを作成します。

注意！オンライン プレミアム スライダー テンプレートとライブラリ オブジェクトをダウンロードできるようにするには、ThemePunch から別のライセンスを購入する必要があります。このテキストの執筆時点では 19 ドルかかります。下の図。

ビデオレビュー modSliderRevolution

今日は、MIGX を使用して Bootstrap スライダーを作成する方法を見ていきます。 研究を始める前に、まずこれを訪れることをお勧めします。

MIGX 構成の作成

運営に行ってきます MIGXという名前の新しい要素を追加します スライダー、置換フィールドに「 スライドを追加「そしてタブに行きます」 フォームタブ».

• フィールド名 - タイトル、キャプション - タイトル。
• フィールド名 - スライド、キャプション - スライド、入力 TV タイプ - 画像。
• フィールド名 - 説明、キャプション - 説明。
• フィールド名 - idstranici、キャプション - リンク先のドキュメントの ID を指定します。

• ヘッダー - タイトル、フィールド - タイトル。
• ヘッダー - スライド、フィールド - スライド、レンダラー - this.renderImage。
• ヘッダー - 説明、フィールド - 説明。
• ヘッダー - ドキュメント ID、フィールド - idpage。

ノート：本質的に、フォームタブから要素を転送しています。 はい、フィールドに入力することもできます 列幅 - 列の幅。

保存（実行）します。

まったく入浴したくない人のために、空の構成を作成し、次のコードをエクスポートします。

( "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"、"説明":"\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 ", "キャプション":"\u0421\u043b\u0430\u0439\u0434", "説明":"", "description_is_code":"0", "inputTV":"", "inputTVtype":"画像"," validation":"" , "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config", "sources":"", "inputOptionValues":""," default":""、"useDefaultIfEmpty":"0"、"pos" :2 ), ( "MIGX_id":3, "フィールド":"説明", "キャプション":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "説明":""," description_is_code":"0", "inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":""," sourceFrom":"config", "sources":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":3 ), ( "MIGX_id":4, "フィールド":"idstranici"、"キャプション":"\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_is_code":"0"," inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config"," sources":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":4 ) ], "pos":1 ) ], "contextmenus":"" , "アクションボタン":"", "列ボタン 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":" 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":"", "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":"this .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, "customrenderer ":"", "renderer":"", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ), ( " MIGX_id":4、"ヘッダー":"id \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": "")

MIGX 構成で TV を作成する

MODX ツリーの「 要素"、 押す + ポイントの反対側 追加フィールド」を入力し、次のように入力します。

• 「名前」 - スライダー; 「署名」 - スライダー。
• [入力オプション] タブの [入力タイプ] で mix を選択し、[構成] フィールドに次のように入力します。 スライダー.
• [テンプレートに使用可能] タブで、このフィールドに入力できるテンプレートを選択します。

データ入力

MIGX with configuration でスライダー フィールドが割り当てられているドキュメントを開き、データを入力してみましょう。

ページへのBootstrap 3カルセル出力

標準の Html マークアップ getbootstrap.com/docs/3.3/javascript/#carousel-examples があり、MIGX 用に作り直して、テンプレートの必要な場所に次のコードを記述します。

そしてチャンクを作成します:

tplsliderIndicator:

とチャンク tplsliderItem次の内容で：

ブートストラップ 1 ページあたり 4 つのカルセル出力

前のケースと同様に、標準のマークアップを使用します getbootstrap.com/docs/4.1/components/carousel/やり直すと、結果として得られます

チャンクはどこですか tplsliderIndicator次のコードがあります。

とチャンク tplsliderItem次のコードを使用します。