文書操作

アルバムを lightbox で表示

作成者 takanori 最終変更日時 2006年07月25日 12時13分

plone 2.1 の atct_album_view の表示形式を、lightbox.js を使用したものに変更します。

(注)ここに書いた手順を行うよりも PloneLightboxJS プロダクトを使うほうが、今は楽だと思います。

plone 2.1 ではフォルダにたくさんある画像をアルバムっぽく見せるための atct_album_view という表示形式が最初からついています。

ここでは、その atct_album_view をカスタマイズして、 Lightbox JS というものを使用して、Web 2.0 っぽく表示させる方法について説明します。

ダウンロード[download]

Lightbox JS のページから以下の4つのファイルをダウンロードします。

ダウンロード後、ZMI から portal_skins/custom/ にこれらのファイルをアップロードします。

lightbox.js lightbox の本体の javascript です。File として保存します。
lightbox.css lightbox が使用する css です。File として保存します。
overlay.png 影として使用する画像です。Image として保存します。
loading.gif 読み込み中に表示する gif です。Image として保存します。

javascript を追加[javasciprt]

つぎに、アップロードした lightbox.js を plone に登録します。

javascript を登録するために、ZMI で portal_javascripts をクリックします。

Click portal_javascripts

すると、plone 2.1 に登録されている javascript の一覧が表示されます。

ここに、lightbox.js を追加します。ID に lightbox.js と記述して Add ボタンをクリックします。他の項目は初期状態のままです。

これで、lightbox.js もマージされた javascript が plone のサイトで読み込まれるようになります。

css を追加[css]

同様に lightbox.css も plone に登録します。

css を登録するために、ZMI で portal_css をクリックします。

Click 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">

変更した内容は以下の通りです。

画像をクリックしたときのリンク先が ${image/absolute_url}/view (画像の表次ページ) となっているのを ${image/absolute_url}/image_large (最大 768x768 の画像)に変更します。
リンク先はオリジナルの画像でもいいんですが、PC 上で 1600x1200 の画像とか表示してもしょうがないかなと思い、とりあえず image_large にしています。
lightbox で title の中身をキャプションとして表示するようになったので、画像の title と Description を使うように変更します。
rel="lightbox" という記述を追加して、lightbox を使用するように変更します。

以上で、atct_album_view が lightbox を使用して拡大画像を表示するようになりました。

実際の動作は写真のページで画像をクリックして確認してみてください。

takanory.net

セクション

パーソナルツール