Joyful Note + Lightbox2.0

KENT WEBさんの掲示板 Joyful Note(Ver:3.7)にLightbox 2.0を導入し、再配布するものです。

Lightbox 2.0 の解説

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

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

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

サンプル&ダウンロード

設置方法

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

設置方法はJoyful Noteと同じです。KENT WEBをご参照ください。

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-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<link href="./css/bbs.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
<!--
function popup(url) {
	window.open(url, "notice", "width=550,height=350,scrollbars=1");
}
// -->
</script>
<title>!bbs_title!</title>
!lightbox_tag!
</head>
任意:DOCTYPEにURLを追加 互換モードから標準モードへ変更。
但しレイアウトが崩れるのでスタイルシートを修正する必要あり。(KENT-WEBさんも全プログラムを標準モードまたはXHTMLへ変えるべきですよね。CGIは良く出来ているのに、HTMLとスタイルシートは使えません。)
サンプルはCSSの見直しが必要、面倒なので変更してません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

参考サイト

利用規約

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

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

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

更新履歴

2007年10月24日 公開
2008年 3月 2日 一部修正
2012年 3月 20日 Joyful Note(Ver:3.7)に入れ替えし更新