アルバムを lightbox で表示
plone 2.1 の atct_album_view の表示形式を、lightbox.js を使用したものに変更します。
takanori
(注)ここに書いた手順を行うよりも
PloneLightboxJS
プロダクトを使うほうが、今は楽だと思います。
plone 2.1 ではフォルダにたくさんある画像をアルバムっぽく見せるための
atct_album_view という表示形式が最初からついています。
ここでは、その atct_album_view をカスタマイズして、
Lightbox JS
というものを使用して、Web 2.0 っぽく表示させる方法について説明します。
Lightbox JS
のページから以下の4つのファイルをダウンロードします。
ダウンロード後、ZMI から
portal_skins/custom/ にこれらのファイルをアップロードします。
- lightbox.js lightbox の本体の javascript です。File として保存します。
- lightbox.css lightbox が使用する css です。File として保存します。
- overlay.png 影として使用する画像です。Image として保存します。
- loading.gif 読み込み中に表示する gif です。Image として保存します。
つぎに、アップロードした lightbox.js を plone に登録します。
javascript を登録するために、ZMI で portal_javascripts をクリックします。
すると、plone 2.1 に登録されている javascript の一覧が表示されます。
ここに、lightbox.js を追加します。ID に lightbox.js と記述して Add
ボタンをクリックします。他の項目は初期状態のままです。
これで、lightbox.js もマージされた javascript が plone のサイトで読み込まれるようになります。
同様に lightbox.css も plone に登録します。
css を登録するために、ZMI で portal_css をクリックします。
そして lightbox.js のときと同じように、lightbox.css を追加します。
CSS Media には screen と記述します。他の項目は初期状態のままです。
これで、lightbox.css がマージされた css を plone サイトが読み込むようになります。
lighbox.js を使う[use]
ここまでの設定で lightbox.js を plone サイトで使えるようになっています。
ちなみに、上のほうにある lightbox.js と lightbox.css の追加画面は lightbox
を使用しているため、画像をクリックすると周辺がグレイになって拡大画像が表示されるようになっています。
この部分は StructuredText で以下のように記述してあります。:
<a href="../images/lightbox02.png" rel="lightbox">
"Add lightbox.js":img:../images/lightbox02.png/image_preview
</a>
このように、リンク先に画像を指定して rel="lightbox" という記述を追加すると、
lightbox を使用して表示するようになります。
atct_album_view をカスタマイズ[album]
最後に atct_album_view をカスタマイズして、アルバムの画像を
lightbox を使用して表示するようにします。
portal_skins/ATContentTypes に移動して atct_album_view
を開き、Customize ボタンをクリックして custom フォルダにコピーを作成します。
そして 41, 42 行目あたりを以下のように変更します。
変更前:
<a tal:define="id python:int(b_start)+int(repeat['image'].number()-1)"
tal:attributes="href string:${image/absolute_url}/view;
title image/Description">
変更後:
<a tal:define="id python:int(b_start)+int(repeat['image'].number()-1)"
tal:attributes="href string:${image/absolute_url}/image_large;
title string:${image/title} ${image/Description}" rel="lightbox">
変更した内容は以下の通りです。
以上で、atct_album_view が lightbox を使用して拡大画像を表示するようになりました。
実際の動作は
写真のページ
で画像をクリックして確認してみてください。
