Lightbox JS
概要
Lightbox JSはjavascriptで作られていて、
画像を表示するときに同じページ内にポップアップして
表示することのできるものをMODx用に多少、手を加えたものです。
サンプル
[[lightboxImage]]と書くだけで表示できます。
インストールにはちょっとした設定が必要ですが、
すぐにできることでしょう。
Lightbox JSの導入
lightbox JSを入手する
lightboxImageはMODx公式サイトフォーラムで簡単に入手することができます。
1.http://modxcms.com/forums/index.php/topic,3163.0.html
を開いてlighbox_js_and_phpthumb.zipをダウンロードします。
2.任意の解凍ソフトで解凍してください。
解凍すると以下のようなフォルダ構成になっているかと思います。
-assets
-manager
readme.txt
3.readme.txt以外のファイルをMODxのルートディレクトリにアップロードします。
(assets,managerなどがある場所)
4./assets/snippets/phpThumb/cache/
のパーミッションを777へ変更してください。
テンプレート変数とスニペットの作成
5.MODx 管理画面を開いて上部メニューで
リソース→テンプレート変数の作成をクリックします。
そして以下のように設定してください。
テンプレート変数
変数名→lightboxImage
見出し→Lightbox Image
説明→This is the image you wish to appear in the Lightbox.
入力タイプ→Image
テンプレートへのアクセス
Lightbox JSを使うテンプレートにチェックしてください。
わからなければ全部にチェックしても構いません。
参考画像:
6.次にスニペットを作成します。
スニペット名、説明→lightboxImage
スニペットコード→
readme.txt内の70行目～88行目をコピーします。
内容:
if (!$tv_image) {$tv_image = "lightboxImage";}
～～～～～～
return $output;
}
入力したら保存してください。
これで設定は完了です。
ページ内での使用方法
Lightbox JSは簡単に使えるようなつくりになっていて
ページ編集画面を開くと下のような感じのフォームが表示されているはずです。
挿入をクリックするとFCKeditorについてくるファイルマネージャーが使えますし、
画像のURLを直接入力してもOKです。
そして画像を挿入したい場所に
[[lightboxImage]]
と入れてください。
そして保存をするとphpthumbsが自動的に画像のサムネイルを作成してくれて
クリックするとポップアップする画像がページ内に挿入されます。
同じページに複数の画像を挿入したい場合は、テンプレート変数の変数名だけを
変えたものをもうひとつ作成してください。
例えば、
変数名→lightboxImage2
見出し→lightboxImageのときと同じ
説明→lightboxImageのときと同じ
入力タイプ→Image
作成した後に、編集画面を見るとlightboxImageの下にlightboxImage2と
表示されるはずです。
そうしましたらそこで画像を選択orURL入力します。
そして
[[lightboxImage? &tv_image=`lightboxImage2`]]
とページ内に挿入するだけです。
これを繰り返せば何個でも増やせるはずです。
特定のページだけで使いたい場合は使用しているテンプレートをコピーし
もうひとつテンプレートを作ってそのテンプレートに対して
テンプレート変数を作成すればいいかもしれませんね。
