画像表示に LightBox を使用する

2.1.1 から Img0ch::Plugin::Rewrite::Image で LightboxJS (またはその互換)を利用して画像を表示することが出来るようになっています。ここでは LightboxJS を使うための方法を記載します。

2.1.3 からは Interface の Imagebox (LightboxJS に似た jQuery のプラグイン)がバンドルされるようになりました。

LightboxJS (v2.0) は以下から入手できます。 http://www.huddletogether.com/projects/lightbox2/

LightboxPlus は以下から入手できます。 http://serennz.sakura.ne.jp/toybox/lightbox/?ja

Img0ch::Plugin::Rewrite::Image を有効にする

zeromin にログインし、「プラグイン」からプラグインの一覧を表示します。一覧から Img0ch::Plugin::Rewrite::Image に絞りこみ、表示された結果を全て有効にします。

必要な JavaScript を追加する

掲示板を選択し、「各種編集処理」からMETA編集を行います。

以下は ImageBox での記述例です。/PATH/TO/STATIC/ は img0ch-config.cgi の Static の値に置換してください。

<link rel="stylesheet" href="/PATH/TO/STATIC/css/imagebox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/PATH/TO/STATIC/js/jquery/interface/imagebox.js"></script>
<script type="text/javascript">
<!--
jQuery(function(){
    jQuery.ImageBox.init({
        "loaderSRC": "/PATH/TO/STATIC/images/imagebox/loading.gif",
        "closeHTML": '<img src="/PATH/TO/STATIC/images/imagebox/close.jpg" border="0" />' });
});
//-->
</script>

さらにimg0ch-config.cgiに以下を記述します。これによりImageboxが利用できるようになります。

UploadImageLinkRelative = imagebox_%s

以下は !LightboxJS (v2.0) での記述例です。/PATH/TO/STATIC/lightbox には lightbox を格納するディレクトリまでのパスを指定してください。

<script type="text/javascript" src="/PATH/TO/STATIC/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="/PATH/TO/STATIC/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/PATH/TO/STATIC/lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="/PATH/TO/STATIC/lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript">
//<!--
    var fileLoadingImage = "/PATH/TO/STATIC/lightbox/images/loading.gif";
    var fileBottomNavCloseImage = "/PATH/TO/STATIC/lightbox/images/close.gif";
//-->
</script>

以下は LightboxPlus での記述例です。/PATH/TO/STATIC/lightbox_plus には lightbox_plus を格納するディレクトリまでのパスを指定してください。

<script type="text/javascript" src="/PATH/TO/STATIC/lightbox_plus/spica.js"></script>
<script type="text/javascript" src="/PATH/TO/STATIC/lightbox_plus/lightbox_plus.js"></script>
<link rel="stylesheet" href="/PATH/TO/STATIC/lightbox_plus/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript">
//<!--
Event.register(window, "load", function() {
    var lightbox = new LightBox({
        "loadingimg": "/PATH/TO/STATIC/lightbox_plus/loading.gif",
        "expandimg": "/PATH/TO/STATIC/lightbox_plus/expand.gif",
        "shrinkimg": "/PATH/TO/STATIC/lightbox_plus/shrink.gif",
        "previmg": "/PATH/TO/STATIC/lightbox_plus/prev.gif",
        "nextimg": "/PATH/TO/STATIC/lightbox_plus/next.gif",
        "effectimg": "/PATH/TO/STATIC/lightbox_plus/zzoop.gif",
        "effectpos": { "x": -20, "y": -20 },
        "effectclass": "i0_image",
        "closeimg": "/PATH/TO/STATIC/lightbox_plus/close.gif",
        "resizable": true
    });
});
//-->
</script>

lightbox_plus.js の最後のコードに lightbox_plus を読み込むコードが入っていますが、これによって以下のコードを実行する前にそのコードが実行されてしまうため、本来読み込むべきでないパスを読み込んでしまう(read.cgiを呼び出してしまう)ため、可能であれば lightbox_plus.js に最後に含まれるコード(Event.register()の部分)を削除するべきでしょう。

インデックスを更新する

掲示板のインデックスを更新し、index.htmlに反映させます。read.cgiの場合はMETA編集を完了させると即座に反映されます。