liferayには画像ギャラリーというポートレットがあります。
が、これでlightboxのようにギャラリー表示できるのかと思っていたら、どうやら違うらしい。
見たところ、ページに表示されている画像フォルダ名をクリックし、それから一個一個の画像を管理者が確認するためにしか使えない模様。

ということで、前回までの『「Webコンテンツ」で任意の項目を表示する』の方法を応用し、lightbox2でギャラリーの実装をしました。


注意    ：lightboxに必要なjavascript、CSS、画像ファイルは任意のディレクトリに入れて、使用中のページ全体のテンプレート（potal_normal.vmなど）にscriptタグ、linkタグを入れて呼び出してください。
その際、


#if ($user_name == " ")

　<script>～</script>

#end

 
などして、ログインしていない場合はJSを読み込む、という設定にしないと、JSがコンフリクトするのか画面右上のべろべろ（と社内で呼んでる）が出ません。
  べろべろ↓

（ログインしてるユーザの権限によって出し分ける方法はまた後日）

では、jsを読み込んだら実装方法です。 まずは適当なWebコンテンツを作成します。

構成の作成：
右側の構成欄の「選択」をクリックし、出てきたポップアップウィンドウで「構成の追加」をクリック。
任意の名前、説明をつけ、IDを自動生成し、XMLスキーマ欄の「行の追加」をクリックします。
ここでは「image1」と名前を付け、入力タイプに「画像」を選択し、「繰り返し可能」にチェックを入れます。
次に画像のタイトルとなる子要素を追加します。
繰り返し可能の横にある「＋」アイコンをクリックし、「image_title」と名前を付け、入力タイプ「テキストボックス」を選択します。
ここでは「繰り返し可能」のチェックは入れません。
保存を押し、構成選択画面に戻ります。作成した構成をクリックして、Webコンテンツの編集画面に戻ります。


画像の選択/タイトルの入力：
Image1では画像を選択し、image_titleにはライトボックスに表示させるタイトルを入力します。
画像の数だけ「＋」アイコンをクリックし、入力フィールドを増やしていきます。


テンプレートの作成：
右側のテンプレート欄の「選択」をクリックし、出てきたポップアップウィンドウで「テンプレートの追加」をクリック。
構成と同様、任意の名前、説明をつけ、IDを自動生成し、構成欄で先ほど作成した構成名を選択します。
次に「エディタの起動」をクリックしてVMファイルを編集します。

画像の数だけimgタグを繰り返し表示させるには以下のような書き方をします。



#foreach($item in $image.getSiblings())

        #foreach($title in $item.getChildren())

                <a href="$item.getData()" rel="lightbox[gallery]" class="floatL" title="$title.getData()">

                  <img src="$item.getData()" width="150" height="100" alt="$title.getData()" title="$title.getData()"/>

                </a>

        #end

#end

 

1行目：getSiblings()は繰り返し可能にチェックが入っているとき、すべての兄弟要素を取得するための書き方のようです。
ここではforeachで回して$itemという変数に入れています。
2行目：更に$item.getChildren()で$item（＝$image）の子要素を$titleという変数に入れています。
このテンプレートが吐き出すhtmlは以下のようになります。
3行目：$item.getData()でlightboxで表示させる画像のパスを取得しています。
rel属性ではlightboxであることと、グルーピングされた画像であることを指定しています。
title属性では$title.getData()で取得した各画像のタイトルを表示させています。
title属性に書くとそれがlightbox内の画像の下に表示されます。
4行目：サムネイル画像のパスを取得しています。
今回はlightboxで表示させる画像のサイズを小さくしてimgタグに入れています。
alt属性、title属性も同様です。


上のテンプレートで最終的にページに吐き出されるhtmlソースは以下の通りです。
(画像は3枚：画像1のタイトルに「木。」、画像2のタイトルに「花。」、画像3のタイトルに「青い。」を入力した場合)


<a href="/image/journal/article?img_id=11143&t=1250142666810" rel="lightbox[gallery]" class="floatL" title="木。">

        <img src="/image/journal/article?img_id=11143&t=1250142666810" alt="木。" title="木。" height="100" width="150">

</a>

<a href="/image/journal/article?img_id=11147&t=1250142666813" rel="lightbox[gallery]" class="floatL" title="花。">

        <img src="/image/journal/article?img_id=11147&t=1250142666813" alt="花。" title="花。" height="100" width="150">

</a>

<a href="/image/journal/article?img_id=11146&t=1250142666816" rel="lightbox[gallery]" class="floatL" title="青い。">

        <img src="/image/journal/article?img_id=11146&t=1250142666816" alt="青い。" title="青い。" height="100" width="150">

</a>

 
  見た目はこんな感じ↓   これをクリックすると、無事にlightboxが動き、拡大表示されます。