MODx EvoサイトでもRokSlideshowでスライドショーを

CMS, WEBマスター

明けましておめでとうございます。

表記の通りMODxサイトをリニューアルする際にスライドショーを設置したので、新年最初の記事にします。

RokSlideshow for MODX 1.1.0-beta

上記のページを見ると、スタンドアロン版のRokSlideshowをダウンロードしなさいと書いていますが、上記ページからダウンロードしたzipにも同じものが入っていました。

  1. 上記ページからダウンしたzipを解凍し、解凍して出来たjsフォルダの中身をMODxサイトにアップロードします(私はassets/jsにアップしました)。
  2. 同じくchunkフォルダの中身にある2つを、チャンク「Rokslide」「slidetpl」として作成します。RokslideはDittoコールを含んだ本体で、slidetplはDittoコールのtplです。
  3. スライドショーで表示したいサブリソースに持たせるテンプレート変数「slideimage」を入力タイプ「Image」で作成します。
  4. サブリソース内のテンプレート変数で、表示させたいイメージを指定します。
  5. チャンク「Rokslide」内のDittoコールを編集し、startIDにサブリソースの親を指定します。
  6. 表示させたいページのheadタグ内に

    <script type=”text/javascript” src=”assets/js/mootools-release-1.11.js”></script>
    <script type=”text/javascript” src=”assets/js/rokslideshow.js”></script>

    を記述します。

これで表示されました。

  • 私の環境では表示させたいサブリソースはウェブページではなくウェブリンクでしたので、「slidetpl」を

    imgs.push({
    file: ‘[+slideimage+]’,
    title: ‘[+pagetitle+]’,
    desc: ‘[+introtext+]’,
    url: ‘[+content+]’
    });

    としました。

  • 数あるサブリソースの中から表示させたいサブリソースだけを選択するために、入力タイプ「Radio Options」、入力時のオプション「表示する==-1||表示しない==0」、規定値「0」として、チェック用の新たなテンプレート変数を作り、サブリソース内のテンプレート変数で「表示する」を選択し、さらにチャンク「Rokslide」内のDittoコールに、

    &filter=`(チェック用のテンプレート変数名),-1,7`

    を加えると、チェックしたサブリソースを選んで表示されました。

  • 画面切り替えタイプは何種類かあるようですが、自分が試したのは「wipe」「pan」です(デフォルトはcombo)。
  • 解凍したフォルダにはCSSファイルも含まれますが、私はそのファイルの内容を、テンプレートのCSSに追記でコピーしました。
  • プラグイン「DirectResize」を使うページでは動きませんでした。
  • 上記slidetplでdesc:に設定してあるintrotextが改行されていると、なぜか動きませんでした。

スポンサーリンク

CMS, WEBマスターMODx

Posted by エコタウン