WhiteBOX設定編/(16)イメージ掲示板にLightbox

Last-modified: 2008-06-30 (月) 15:52:37 (5799d)

イメージ掲示板のオーバーレイ表示に挑戦 †

  • ブログ WordpressにLightbox-plusというプラグインを導入して、画像のオーバレイ表示がとてもすっきりしました。何より操作性が気に入りまして、こいつをイメージ掲示板にも利用できないかと考えたのが発端です。
  • Lightbox自体が、そもそもJavascriptで動いていたのが、いけそうだと直感したポイントです。掲示板CGIが作り出すhtml文に、LightboxのJavascript埋め込んでしまえば動くんじゃないかと思って、試してみたらできたというわけです。
  • 例によって、若干、手ばった点もありましたが(^^;)　何とかなりましたので、記録しておきたいと思います。(2006/7/28記）

↑

Javascriptとは †

  • 「Javascript」というのは、HTMLと連動して動作するプログラミング言語です。動きを加えたり、インタラクティブな反応を返したりと多彩な芸をしてくれます。
  • イメージ掲示板もプログラムがうごいてますが、こちらは「CGI」という言語です。動作環境の違いが決定的です。CGIはサーバ側で動きますが、Javascriptはブラウザ側(ユーザのコンピュータ側）で動くものです。
  • Javascriptはテキストで書かれていますが、<SCRIPT>というタグを使ってhtmlに埋め込まています。サーバにアクセスすると、そのhtmlファイルがパソコン側に送られてきて、ブラウザの機能で処理実行して結果を表示してるのです。ブラウザの「ソースを表示」でhtmlソースを見ることができますが、埋め込まれているJavascript自体も読めますね。
  • これに対して、掲示板CGIはサーバの中で処理をして、最終的には表示するページのhtml文を動的に組み立てて、パソコン側に送ってきます。ブラウザでソースを見ても、CGIのソースを見ることはできません。あくまでCGIが処理した結果のhtml文を見ているだけなのです。
  • WordpressはCGIではなく、「PHP」というプログラミング言語で動いていますが、サーバサイドのプログラミング言語という意味では同じです。
↑

掲示板への組み込み †

  • イメージ掲示板のオーバレイをするための作業のポイントは、大きく次の3つです。
    1. Lightboxのインストール　
    2. イメージ掲示板のCGI修正　
      イメージ掲示板CGIが作り出すページのソースに、LightboxのJavascriptを埋め込むために、CGIを修正する
    3. パスの調整
      インストールしたディレクトにより、CGIとJavascriptの関連ファイルのリンクをつける
  • 参考にしたサイトは、Big Kahuna Burger Simple Boxes等です。
↑

Lightbox-plusのファイル構成とインストール †

  • 種々のタイプを試してみたのですが、最終的に成功したファイルのダウンロード先は　Simple Boxesのものです。ファイルは8つあります。イメージファイルは、主にボタン用のアイコンです 
    lightbox_plus.js　　メインスクリプト 
lightbox.css　　　　スタイルシート（改変版らしい) 
overlay.png　　　　 透過率 50% の PNG イメージ (バックグラウンドのマスク用)
loading.gif　　　　 ロード用のアニメーション GIF イメージ 
expand.gif　　　　　拡大ボタン用イメージ 
shrink.gif　　　　　縮小ボタン用イメージ 
blank.gif 　　　　　ブランクイメージ 
close.gif 　　　　　右上に置かれるクローズボタン用イメージ
  • 機能は、

    ・表示画像をクリックすると、オリジナル画像をポップ&オーバレイ表示します。

    ・表示画像のサイズと表示位置がリアルタイムでウィンドウサイズに追従します。

    ・ウィンドウサイズよりも大きな画像の場合は、さらに画像の拡大ができます。

    ・効果画像を貼付けることができます。

　　なお、４番目の効果は、ちょいっとウザイので使っていません。

  • インストールは、特に難しいことはありません。ダウンロードしたファイルを適当なディレクトリーに格納するだけです。イメージ掲示板の場合、アクセス権限の関係でCGI本体とデータ類のディレクトリが分かれており何かと面倒の元になっています。今回もデータ系のディレクトリーに入れましたが、やはり少し悩まされました(^^;)
  • 一応、サーバ内のファイルの位置関係を整理しておくと以下のようになります。 
    /var/www/cgi-bin/bbs16/
　　　　　　　　　|- bbs16.cgi　　　　 CGI本体
　　　　　　　　　|- cgi-lib.pl　　　　ライブラリ

/var/www/html/bbs16/bbsdata/
　　　　　　　　　|- bbs.txt　　　　 アップされた記事データ
　　　　　　　　　|- no.jpg　　　　　アップされた画像ファイル（アップ順にno）
　　　　　　　　　|- style.css　　　　スタイルシート
　　　　　　　　　|- lightbox.js　　　Lightbox関連ファイル
                  |- ・・・　　　　　　【上記の一式】
    なお、Javascript本体のファイル名は lightbox-plus.js ですが、比較動作確認の関係で lightbox.js とrenameして使用しました。（これに起因するトラブルは特にありません。）
↑

イメージ掲示板CGIの修正 †

  • 掲示板のページhtmlを作成するところで、lightbox.jsを使用することを埋め込みます。bbs16.cgi の該当個所は2箇所です。
    1. <head>にJavascriptを追加する部分
      print "<html><head><META HTTP-EQUIV=\"Content-type\" CONTENT=\"text/html; charset=EUC\">\n";
    　 ↓
print "<html><head><META HTTP-EQUIV=\"Content-type\" CONTENT=\"text/html; charset=EUC\"> <script type=\"text/javascript\" src=\"/bbs16/bbsdata/lightbox.js\"></script>  \n";
    2. また、個々の画像を表示する個所で、ligtboxとの関連付けをします。rel=\"lightbox\ がキーワードです。また、当然、別ウィンドウを開くのも止めます。 
      if ($img_big) {print "<a href=\"$imgfile\" target=\"_blank\">$imgsrc</a>";} else {print $imgsrc;}
  　    ↓
if ($img_big) {print "<a href=\"$imgfile\" rel=\"lightbox\"> $imgsrc</a>";} else {print $imgsrc;}
  • これで、画像クリックで、ポップアップ&オーバレイ表示ができました。ただ、なんか変だなと思ったら、拡大縮小ボタンが×印になってたり、バックグラウンドのマスク機能が働いていないという問題に気がつきました。
↑

画像ファイルへのパス修正 †

  • ボタン類が表示してないのに気がつきました。情報を集めてみると、パス指定に問題がありそうだと分かりました。
  • Javascriptがボタン類を呼び出しているところを探してみると、lightbox.js の末尾に 
    addEvent(window,"load",function() {
  var lightbox = new LightBox({
    loadingimg:'loading.gif',
    expandimg:'expand.gif',
    shrinkimg:'shrink.gif',
    effectimg:'zzoop.gif',
    effectpos:{x:-20,y:-20},
    effectclass:'effectable',
    closeimg:'close.gif'
  });
});
    利用されている画像を指定している部分があります。lightbox.jsから見て同じディレクトリなのですが、bbs16.cgiが絡んでいるのでうまくないのかな？というわけで、次のように /bbs16/bbsdata を付加して絶対パス指定してみたら 
         loadingimg:'/bbs16/bbsdata/loading.gif',
     expandimg:'/bbs16/bbsdata/expand.gif',
     shrinkimg:'/bbs16/bbsdata/shrink.gif',
     effectimg:'/bbs16/bbsdata/zzoop.gif',
     effectpos:{x:-40,y:-20},
     effectclass:'effectable',
     closeimg:'/bbs16/bbsdata/close.gif'
    OKになりました。
  • もう一つの、オーバレイ時の背景マスクの問題です。overlay.pngがオープンされてないということです。これもパスの関係だと思うのですが、lightbox.jsには記述がありません。
  • lightbox.css の方で見つかりました。 
    #overlay {
    background-image: url(overlay.png);
}

* html #overlay {
   background-color: #000;
   background-image: url(blank.gif);
   filter: Alpha(opacity=50);
}
  • これだ！これで！！と小躍りして、パスを同じように修正してみるが変化がありません(^^;)　ひょっとして、スタイルシート自体が読み込まれていないのでは？？　と bbs16.cgi本体の、スタイルシートを適用するところを探してみると 
    print "<title>$title</title><link rel=\"stylesheet\" type=\"text/css\" href=\"$loaddir/style.css\"></head>\n";
　　　　↓
print "<title>$title</title><link rel=\"stylesheet\" type=\"text/css\" href=\"$loaddir/lightbox.css\"></head>\n";
  • スタイルシートの指定があるが、ファイル名が違う！　これかな？？と修正してみると、ばっちり表示(^^)　ようやく解決の運びになりました。

　　　image_ovelay

↑

バックナンバー：山記録にもLightbox †

  • もとは同じCGIを使っているだけなので、同様な修正をして、ばっちグー！でした。
  • ただ、イメージ掲示板はサムネール画像を別に持っているわけではありません。オリジナルの画像を全部読み込んだ後で、プログラム処理で縮小表示しているだけです。したがって、最初表示するのに多少時間がかかります。Wordpressのサムネールのような軽さはないです。ただし、逆に、クリック拡大表示はあっという間。
  • なお、Javascriptの特徴ですが、ブラウザがソースファイルを全部読みきる前に画像をクリックしてしまうと、Javasceiptが正常に動作しないことがあります。これは、クライアントサイドの実行なのでやむを得ません。一応ご了解の程を。
トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   リンク元