明けましておめでとうございます。
表記の通りMODxサイトをリニューアルする際にスライドショーを設置したので、新年最初の記事にします。
RokSlideshow for MODX 1.1.0-beta
上記のページを見ると、スタンドアロン版のRokSlideshowをダウンロードしなさいと書いていますが、上記ページからダウンロードしたzipにも同じものが入っていました。
- 上記ページからダウンしたzipを解凍し、解凍して出来たjsフォルダの中身をMODxサイトにアップロードします（私はassets/jsにアップしました）。
- 同じくchunkフォルダの中身にある2つを、チャンク「Rokslide」「slidetpl」として作成します。RokslideはDittoコールを含んだ本体で、slidetplはDittoコールのtplです。
- スライドショーで表示したいサブリソースに持たせるテンプレート変数「slideimage」を入力タイプ「Image」で作成します。
- サブリソース内のテンプレート変数で、表示させたいイメージを指定します。
- チャンク「Rokslide」内のDittoコールを編集し、startIDにサブリソースの親を指定します。
- 表示させたいページの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が改行されていると、なぜか動きませんでした。