備忘録10 XOOPS に Lightbox を導入
遅まきながら XOOPSにLightboxを導入してみました。
サムネール写真などをクリックした時に 同一ウィンドウに元画像がおしゃれに表示されるはやりのスクリプトです。
XOOPS THEME でもお世話になっている BCOOL さん とこちらの情報を参考に導入作業を行いました。
まずは こちらから Lightbox本体の入手
DOWNLOAD とかかれた場所の Lightbox v2.03.3 と表記された部分をクリックするとダウンロード作業が始まります。
ダウンロードした Lightbox v2.03.3 を解凍すると lightbox2.03.3 フォルダが出来ます。
+CSS
-lightbox.css
+images
-blank.gif
-close.gif
-closelabdl.gif
-image-1.gif
-loading.gif
-next.gif
-nextlabel.gif
-prev.gif
-prevlabel
-thumb-1.gif
+js
-effects.js
-lightbox.js
-prototype.js
-scriptaculous.js
index.html
これらのファイルをフォルダごと XOOPSのルートディレクトリにアップロード
次の作業は、theme.html のヘッダ部分にlightboxを使用するためのstyleシートとjavascriptへのリンクを指定します。
スタイルシート
<link rel="stylesheet” href=”<{$xoops_url}>/lightbox2.03.3/css/lightbox.css” type="text/css” media="screen” />
javascript
<script type="text/javascript” src=”<{$xoops_url}>/lightbox2.03.3/js/prototype.js”></script>
<script type="text/javascript” src=”<{$xoops_url}>/lightbox2.03.3/js/scriptaculous.js?load=effects”></script>
<script type="text/javascript” src=”<{$xoops_url}>/lightbox2.03.3/js/lightbox.js”></script>
挿入位置は、スタイルシートはその他のスタイルシートへの下 javascriptはその他のjavascript宣言の下に設定しました。
lightboxの設置場所、フォルダ名を変更した場合 lightboxへのパスも変更する必要があります。
基本準備は、これで完了です。themeのリロード、テンプレートキャッシュの削除 を忘れずに！！
後は <a>タグのrel属性でlightboxの文字を指定するだけでlightboxで画像が表示されるようになります。
例：<a href="photo/001.jpg” rel="lightbox”>〜</a>
XOOPSの場合 各modulesのtemplateといじることによりlightbox対応にするようです。
こちらを参考にGIJOEさんのmyalbum-P indexページの最新リストをlightbox化して見ました。
myalbum/templates/myalbum_photo_in_list.htmlの11行目付近
<a href=’<{$mod_url}>/photo.php?lid=<{$photo.lid}>’>
<img src=’<{$photo.imgsrc_thumb}>’ <{$photo.width_spec}> alt=’<{$photo.title}>’ title=’<{$photo.title}>’ /></a>
の aタグ部分を
<a href=”<{$photo.imgsrc_photo}>” target="_blank” rel="lightbox[new added]” title=”<{$photo.title}>”>
<img src=’<{$photo.imgsrc_thumb}>’ <{$photo.width_spec}> alt=’<{$photo.title}>’ title=’<{$photo.title}>’ /></a>
に変更
これでmyalbum-P indexページの最新リストがlightbox化されました。
うまくいったように思ったのですが lightbox化された画像を閉じる Close ボタンと読み込み時の画像が表示されません。
調べて見ると loading.gif closelabel.gif へのパスの指定が不完全なようです。
lightbox.js の66行目あたり
var fileLoadingImage = “/images/loading.gif”;
var fileBottomNavCloseImage = “/images/closelabel.gif”;
この部分を
var fileLoadingImage = ”http://your_site.com/lightbox2.03.3/images/loading.gif”;
var fileBottomNavCloseImage = ”http://your_site.com/lightbox2.03.3/images/closelabel.gif”;
のように変更してパスを指定する必要があります。
少しかっこよくなりましたが その他のテンプレートもlightbox化するためにはまだまだ勉強が必要そうです。
ブログ 
