カスタマイズ＆運用TIPS : lightboxをxoopsで使ってみる
投稿者 : taka 投稿日時： 2007-1-27
突然ですが、一人の知り合いがあまりにうるさく催促するもので、lightboxをXOOPSで使う方法をご紹介したいと思います。（ちょっとだけ今更な感じもしますが...）
そもそもlightboxって何？という方もいらっしゃると思うので、まずは下のサムネイル画像をクリック！
このような感じでサムネイル画像をクリックすると、Flashのようにダイナミックなエフェクトつきで拡大画像を表示するjavascriptです。ちょっとサイトが豪華になった気がしますね。
これをXOOPSに組み込んで使う場合、themeというよりはtemplateやその他の部分にもに手を入れることになりますが、一応テーマも写真が生えるものを使って説明したいので、公開したばかりのbcool theme 2nd シリーズ【studio】を使用して進めていきます。
またココで紹介する方法はあくまでひとつの例ですから、皆さんの環境にあわせて読み替えて解釈してください。
準備をする
まずは必要なものをダウンロードします。- ライトボックス本体
Lightbox JS v2.02 - bcool theme studio
XOOPS テーマ ダウンロード - BCOOL
lightboxをダウンロードできたら解凍します。lightbox2.02というフォルダが出来たら、今回はコレをXOOPSのルートディレクトリにそのまま配置して進めることとします。解凍されたフォルダにあるindex.htmlを開くときっちりとマニュアルが載ってますので、コレになぞらえて、必要な記述を書き加えていきます。
theme.htmlの修正
studioをダウンロードし解凍したら、themes/ディレクトリに配置してください。
/themes/studio/theme.htmlをテキストエディタなどで開きます。
このヘッダの部分に、lightboxを使用するためのstyleシートとjavascriptへのリンクを指定しなければなりません。
今回はXOOPSルートにlightboxを配置しましたので、
スタイルシート
<link rel="stylesheet" href="<{$xoops_url}>/lightbox2.02/css/lightbox.css" type="text/css" media="screen" />javascript
<script type="text/javascript" src="<{$xoops_url}>/lightbox2.02/js/prototype.js"></script>
<script type="text/javascript" src="<{$xoops_url}>/lightbox2.02/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<{$xoops_url}>/lightbox2.02/js/lightbox.js"></script>と記述します。挿入位置はスタイルシートはその他のスタイルシートへの下、javascriptはmetaのjavascript宣言の下が最適です。
以上で基本準備は完了です。後はリンクタグの書き方をlightboxのマニュアルどおりやればいいのですが、それでは芸が無いので、いろいろなモジュールで簡単に使うためにmodule templateなどを編集していきます。
がお勧めです。
で格安ドメインをGET!
