Under the Bridge

TOPページ > 214Ajax > lightboxの画像観覧ページ

何とか、実用的に使えるライブラリにしたい。ということで、ライブラリは一ヶ所に置いて、絶対パスで指定するようにした。以後はその場所のファイルを使用しようと思っている。

サイトルート下に"ajaxlib"という名前のフォルダを作成し、今のところlightboxとricoのライブラリのみ置いている。内部には"css"、"images"、"js"というフォルダをつくり、使途によってファイルを分けて設置。

手順-1

宣言部分へ下記コードを埋め込む。

    <link rel="stylesheet" href="http://www.apstars.com/ajaxlib/lightbox/css/lightbox.css" type="text/css" media="all" />
    <link rel="stylesheet" href="http://www.apstars.com/ajaxlib/lightbox/css/lightboxlist.css" type="text/css" media="all" />
    <script type="text/javascript" src="http://www.apstars.com/ajaxlib/lightbox/js/prototype.js"></script>
    <script type="text/javascript" src="http://www.apstars.com/ajaxlib/lightbox/js/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="http://www.apstars.com/ajaxlib/lightbox/js/lightbox.js"></script>

手順-2

使用するときには以下のようなコードを書き、拡張子phpでどこかへ設置する。本文とは別の場所である。イメージと同じ場所がいい。なお、イメージはメインが800×600ピクセル（平均150kB）、サムネイルは"thumbnail"というフォルダへ100×75ピクセル（平均6kB）で格納。

サムネイル画像の生成は、http://www.vector.co.jp/soft/win95/art/se153674.html などを使用すると良いと思う（わたしはこれを使用）。

<!-- php フォトリスト -->

<div class="lbbox">
<h3>ポーチ柱土台</h3>
<a href="http://www.apstars.com/ie/kikumimore/001.jpg" rel="lightbox[house]" title="ポーチ柱土台"><img src="http://www.apstars.com/ie/kikumimore/thumbnail/s001.jpg" width="100" height="75" alt="ポーチ柱土台" /></a>
<p>ポーチ柱にも土台が存在します。材質はヒノキ、太さは120×120の太さがあります。基礎パッキンの上に置かれています。棟上当日はこのように塩とお神酒が撒かれました。</p>
<br style="clear:both;" />
</div>

<div class="lbbox">
<h3>土台</h3>
<a href="http://www.apstars.com/ie/kikumimore/002.jpg" rel="lightbox[house]" title="土台"><img src="http://www.apstars.com/ie/kikumimore/thumbnail/s002.jpg" width="100" height="75" alt="土台" /></a>
<p>米と酒と塩が撒かれました。土台に火打ちが見えます。拙宅の土台には火打ちが多く入っております。</p>
<br style="clear:both;" />
</div>
（...以下略）

手順-3

MTで使用する際には以下のようにphpを呼び出す。ここはすごく簡単。ブログのスタイルを崩さずにサムネイルを追加できるところがミソかも知れない。

後記

完成品はここ http://www.apstars.com/ie/pictures/

所要時間は全部で4時間ほど（疲れた。もう二度とやりたくない）。

しかし、上手く使えば有効かも知れない。