本来は、WordPressより先に書くつもりだったんだけど、今やっと書けます。
現在、私はOpenPNEで、SNSの真似事テストサイトなんかもやっています。一応、30人位の予定表共有サイトなんですが、僕のお勉強のために、日記やアルバム、コミュニティーなども使ってもらっていろんなテストをしています。それで、やっぱり画像は別窓よりLightBoxにしたほうが、窓がいっぱいあかなくていいだろうということで、導入することにしました。
参考サイトは こちらとか、 こことか。
■インストール
Lightbox2のサイトからダウンロード。解凍して、ルートにlightboxのフォルダーごとコピー
■テンプレートファイルの改造
私はVer2.14を使っていますので、元ネタと違ってしまうのですが、基本、検索置換なので、詳しい表記は省略。
- 読み取りファイルの修正
- OpenPNEの管理画面からデザイン→HTML挿入→HTML挿入(HTML head内)を利用すればできると書いてあるサイトがあったんだけど、なんか読み込む順番が違うみたいでOUT。しょうがないので、webapp/modules/pc/templates/common/layput.tplを変更。
この14行目以降（</head>の前）に <script type="text/javascript" src="./lightbox/js/scriptaculous.js?load=effects,builder"> </script> <script type="text/javascript" src="./lightbox/js/lightbox.js"> </script> <link rel="stylesheet" href="./lightbox/css/lightbox.css" type="text/css" media="screen" /> を追加。 どうも、Prototype.jpの後ろでないとうまくいかないみたい。
最初、管理画面から追加したらだめで、テンプレート修正したら使えたのですが、管理画面で書いたものを消し忘れているので、2回スクリプトの指定をしていたんです。やっぱり呼び出す順番かなぁと思っています。
- 画像がつくのは、日記、トピック、イベントの3種類、それとアルバム。アルバム以外の3つは似たようなものなので、次々と変更。
- 日記webapp/modules/pc/templates/fh_daialy.tplを target=”_blank”で検索すると3つづつ2ブロックでてきます。上が日記の添付画像、下がコメントの画像。
日記リストwebapp/modules/pc/templates/fh_daialy_list.tplを target=”_blank”で、検索すると、3つブロックになってます。
fh_daialy.tplをあけて、
110行近辺
target="_blank"3個を rel="lightbox[d({$target_diary.c_diary_id})]" に変更
190行近辺
target="_blank"3個を、rel="lightbox[d({$target_diary.c_diary_id})]" に変更
fh_daialy_list.tplをあけて、
114行近辺
target="_blank"3個を、rel="lightbox[d({$item.c_diary_id})]" に変更- トピックは、webapp/modules/pc/templates/c_topic_detail.tpl
トピックリストは、webapp/modules/pc/templates/c_topic_list.tpl。
c_topic_detail.tpl
25行目付近
target="blank"を、rel="lightbox[t({$c_topic.c_commu_topic_id})]"に変更
100行目付近
target="blank"を、rel="lightbox[c({$item.c_commu_topic_comment_id})]"に変更
c_topic_list.tpl
65行目付近
target="blank"を、rel="lightbox[d({$item.c_commu_topic_id})]"に変更- イベント詳細 webapp/modules/pc/templates/c_event_detail.tpl
イベント一覧 webapp/modules/pc/templates/c_event_list.tpl
この２つは、トピックと一緒。
c_event_detail.tpl
30行目付近
target="blank"を、rel="lightbox[t({$c_topic.c_commu_topic_id})]"
140行目付近
target="blank"を、rel="lightbox[c({$item.c_commu_topic_comment_id})]"
webapp/modules/pc/templates/c_event_list.tpl
65行目付近
target="blank"を、rel="lightbox[d({$item.c_commu_topic_id})]"に変更- アルバムは、またちょっと違います。
webapp/modules/pc/templates/fh_album.php
fh_album.php
28行目
<a href="({t_img_url filename=$album_info.album_cover_image})" target="_blank">
<img src="({t_img_url filename=$album_info.album_cover_image w=180 h=180})" alt="" /></a>
を、
<a href="({t_img_url filename=$album_info.album_cover_image})" rel="lightbox">
<img src="({t_img_url filename=$album_info.album_cover_image w=180 h=180})" alt="" /></a>
97行目（2.42は、103行目）
<a href="({t_url m=pc a=page_fh_album_image_show})&target_c_album_image_id=
({$item.c_album_image_id})">
<img src="({t_img_url filename=$item.image_filename w=180 h=180})" alt="" /></a>
を、
<a href="({t_img_url filename=$item.image_filename w=600 h=600})" alt=""
rel="lightbox[({$item.c_album_image_id})]">
<img src="({t_img_url filename=$item.image_filename w=240 h=320})" alt="" /></a>こんな変更でほぼOK。詳細のページに行かせないで、そのまま画像を表示させる風に改造。
LIteboxの調整等はあんまりしていません。なんとか表示できた程度。またおいおい考えるとします。
あと、日記本文にリンクさせたアルバム画像をクリックしたときに、lightboxを立ち上げようというのは、なんかいろんな絡みがあるようで、私の力不足ということで断念。詳しいお方、私に教えてください。
では。
