Topics Board + Lightbox2.0

KENT WEBさんのTopics Board (Ver:2.22)にLightbox 2.0を導入し、再配布するものです。

Lightbox 2.0 の解説

Lightboxは画像を別ウィンドウを開かずに、そのブラウザ上で画像を開くものです。サンプルはこちら。写真をクリックしてみて下さい。

1ページに複数の写真がある場合には写真の左右をクリックする事でスライドショーする事が出来ます。

Lightbox2.0についてはこちらをご覧下さい。（英語）

サンプル＆ダウンロード

サンプルはこちら。

ダウンロード (topics_lb.zip)

設置方法

ダウンロードしてご覧下さい。

設置方法はKENT WEBをご参照ください。

lightboxを設置する位置

付属のLightbox本体は設置したCGIのディレクトリ下に置いてください。
他の位置に置く場合やCGIサーバーが別になっている場合は、lightbox.jsの次の箇所を変更してください。

lightbox.js

/* lightboxを別の位置に置く場合、CGIサーバーが別になるプロバイダの場合は、
Lightboxを設置したURLを入れてください。 
例：http://www.hogehoge.ne.jp/~user/joyful/lightbox/ に設置した場合、
 durl="http://www.hogehoge.ne.jp/~user/joyful/lightbox/"; のようにする。
通常はこのままでOK。
*/
var durl="lightbox/";

init.cgiの修正

Lightbox2.0 の設定

# [ 以下は Lightbox2.0 の設定 ]

# Lightboxのスライドショー機能
# 0 : スライドショー機能を使わない
# 1 : スライドショー機能を使う
$cf{lb_slideshow} = 1;

# lightboxを設置した位置。通常はこのままでOK。
# CGIサーバーを別にしているプロバイダは、Lightboxを設置したURLを記述（lightbox.jsも変更する。）
#  例：http://www.hogehoge.ne.jp/~user/joyful/lightbox/ に設置した場合、
# lburl="http://www.hogehoge.ne.jp/~user/joyful/lightbox/";  のようにする。
$cf{lb_url} = "lightbox2/";

テンプレートを変更する場合

テンプレートを変更する時は、テンプレートのhead内に!lightbox_tag!を必ず入れて下さい。

テンプレート先頭のDOCTYPEのURLの有無によっては”NEXT”,”PERV”クリック時に四角の罫線が表示される場合があります。修正する場合は以下を参照。

bbs.html のヘッダ部分

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
body,td,th { font-size:80%; background:#f0f0f0; }
a:hover { color:#dd0000; }
div.main { text-align:center; }
h1 { font-size:200%; color:#5f5faf; }
div.msg { width:150px; text-align:left; white-space:nowap; margin-left:auto; margin-right:auto; }
div.sub,div.com { width:85%; padding:7px; text-align:left; margin-left:auto; margin-right:auto; }
div.sub { background:#dcdced; margin-top:1em; border:1px solid #5f5faf; font-weight:bold; }
div.com { background:#fff; border-left:1px solid #5f5faf; border-right:1px solid #5f5faf; border-bottom:1px solid #5f5faf; }
div.com p { margin-left:1em; }
div.pg-btn { width:85%; text-align:left; margin:0.8em 0; margin-left:auto; margin-right:auto; }
img.img { border:none; vertical-align:top; margin-right:0.2em; }
div.right { text-align:right; }
-->
</style>
<title>!bbs_title!</title>
!lightbox_tag!
</head>

任意：DOCTYPEにURLを追加互換モードから標準モードへ変更。
但しレイアウトが崩れるのでスタイルシートを修正する必要あり。(KENT-WEBさんも全プログラムを標準モードまたはXHTMLへ変えるべきですよね。CGIは良く出来ているのに、HTMLとスタイルシートは使えません。)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

参考サイト

KENT WEB

Lightbox 2.0

利用規約

このCGIを使用した、いかなる損害に対しても開発者は一切の責任を負いません。CGIスクリプト利用規定

無料で利用できます。全てのサーバーでの動作を保証するものではありません。

このスクリプトを利用した方は、使用報告掲示板に利用報告、Sawa'sFactoryへのリンクを張って頂けると幸いです。

更新履歴

2007年10月25日公開
2008年 3月 2日一部修正
2012年 3月 20日 Topics Board (Ver:2.22)に入れ替えし更新