Under the Bridge

a Picture of the Late Him

lightboxの画像観覧ページ

2007年4月15日 22:25 | Writer: yoshi | 記事本文 | コメント(0) | トラックバック(0)

いちおう、Ajaxライブラリを使用しているのでAjaxカテゴリのほうへ書く。lightboxの画像観覧ページの基本形とも言える形を作成し、実際に使ってみた。テストサイトは私の所有する谷建、画像数は80枚ちょっと。

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

サイトルート下に"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時間ほど(疲れた。もう二度とやりたくない)。

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

トラックバック(0)

このブログ記事を参照しているブログ一覧: lightboxの画像観覧ページ

このブログ記事に対するトラックバックURL:

コメントする






Categories
Entries
Feed
スポンサードリンク

parts

フィードメーター - Under the Bridge

あわせて読みたい

なかのひと

2008年4月5日開催、MT4LP5

2008 yoshi(apstar)