テキストメニューskin版ver.2.0解説

このファイルはダウンロードファイルに入っているものと全く同じです。

テキストメニューskin版について少し詳しく解説します。読むと余計わからなくなるかも・・・。何も変更せず、解凍した「pa」ディレクトリをそのままアップロードして「big」ディレクトリにファイル名が「1」から連番の「.jpg」ファイルを数枚アップロードして、「photo_album.php」にアクセスしてみてください。これだけでOKです。

テキストメニューskin版の概要

  1. 画像をアップロードするだけで、メニューページと画像1枚を表示するページを自動的に生成します。
  2. 画像拡張子は「jpg、gif、png」などと設定します。(試していませんが、swfなどもできるかもしれません。)
  3. メニューページと画像表示ページはHTMLのテンプレートで簡単にカスタムできます。
  4. PHPファイル(photo_album.php)と画像保存ディレクトリを複製することで、いくつものアルバムができます。
  5. メニュー表示ページの表示順を昇順、降順を選択できます。

ページトップにもどる

スクリプト設置方法とphoto_album.phpの設定方法

長々と書いていますが、設置方法の注意点は以下の3点です。

  1. 「photo_album.php」と「htmltemplate.inc」は同じ階層に置く。
  2. 画像保存ディレクトリに入れる画像のファイル名は「1」や「01」など「1」からの数字の連番にする(*)。
  3. 画像ファイルの拡張子は1つのディレクトリ内で混在させてはいけません。

この3点以外は、変更してもphoto_album.phpで正しく設定すれば機能します。skinのカスタム方法はHTMLファイルの作成方法とほとんど同じです。

(*):ファイル名は「1」、「01」、「001」などを基点にした連番である必要があります。ファイル名の基点桁数は設定できます。初期設定では「1」を基点としています。

スクリプト設置方法詳解

ダウンロードファイルを解凍すると「pa」ディレクトリの中に、次の6つのファイルと1つのディレクトリが入っています。

まずは何も考えずに「pa」ディレクトリごとサーバーにアップロードしてください。次にbigディレクトリの中に「1」から連番のjpg画像ファイル(1.jpg、2.jpg、3.jpg・・・)を適当な枚数アップロードします。そしてphoto_album.phpにアクセスします。これで機能するはずです。

この時点でうまく機能しない場合は次のような原因が考えられます。

  1. bigディレクトリにアップロードした画像の拡張子が「jpg」以外である。(初期設定はjpgになっています。)
  2. 画像のファイル名が「1」からの連番になっていない。(初期設定は「1」からになっています。)
  3. アップロードに失敗している。
  4. photo_album.phpのバグ(報告していただけると助かります。)
  5. サーバーでPHPが使えない。
  6. PHPのバージョンが4.0以下である。

メニューページで、クリックしても画像ページが表示されない場合。

「photo_album.php」の27行目からの4行を下記のように書き換えてみてください。

if (phpversion()>="4.1.0"){
extract($_SERVER);
extract($_REQUEST);
}

この4行を

if(phpversion() >= "4.2.0") {
extract($HTTP_POST_VARS);
extract($HTTP_GET_VARS);
}

に書き換えてみてください。

photo_album.phpの設定方法詳解

設定項目は下記の9つです。

  1. $arg["title"] = "Photo Album(テキストメニュー:skin版)"; → ページタイトルなどを指定します。
  2. $filetype = "jpg"; → 画像の拡張子を指定します。jpg,gif,pngなど。
  3. $beams = "1";  → ファイル名の数字の基点桁数(1から始まるなら「1」、01から始まるなら「2」、001から始まるなら「3」・・・)
  4. $menufile = "menu.html"; → photo_album.phpからみたメニュー表示テンプレートへのパス。
  5. $photofile = "photo.html"; → photo_album.phpからみた画像表示テンプレートへのパス。
  6. $arg["home_url"] = "../index.html" → photo_album.phからの戻りURLへのパス
  7. $arg["home"] = "HOME" → 戻りURLアンカーの文句
  8. $imgdir = "big/"; → photo_album.phpから画像保存ディレクトリへのパス
  9. $maindir = "../"; → 画像保存ディレクトリからphoto_album.phpのあるディレクトリまでのパス
  10. $rev = "0"; → メニュー表示ページのファイル表示順の選択(0=昇順、1=降順)

複数のカテゴリーのアルバムを作る

PHPファイル(photo_album.php)と画像保存ディレクトリを複製することで無限にカテゴリーを作ることができます。テンプレートファイルを複製する必要はありません。いくつカテゴリーを作ってもテンプレートファイルを書き換えるだけで全てに反映されます。

【複数カテゴリーディレクトリ構成例】

public_html / index.html (トップページ)
    |
    +--- pa / photo_album01.php
         |  / photo_album02.php
         |  / photo_album03.php
         |  / pa.css
         |  / menu.html (メニューページテンプレート)
         |  / photo.html(画像表示ページテンプレート)
         |  / htmltemplate.inc
         | 
         +-- big01 / [画像ファイルを格納]
         +-- big02 / [画像ファイルを格納]
         +-- big03 / [画像ファイルを格納]

これでそれぞれのPHPファイルで画像を表示させるディレクトリ名を設定(設定項目の8番目)すればOKです。

カテゴリー毎にテンプレートを変えたい場合は、それぞれのテンプレートを用意してPHPファイルでテンプレートのファイル名を正しく設定(設定項目の4、5番目)すればOKです。

ページトップにもどる

テンプレートをカスタムする

テキストメニューskin版のテンプレート(「menu.html」、「photo.html」)のカスタム方法を少し解説します。基本的に通常のHTMLファイルと同じですが、テンプレートタグがいくつかあり、それを駆使して作ります。

両方のページで使用できるテンプレートタグ

{val title}
「photo_album.php」で設定したページタイトル
{val self_url}
メニューページのURL。
{val home_url}
「photo_album.php」で設定した戻りURL。
{val home}
「photo_album.php」で設定した戻りURLアンカーの文句。
<!--{each menu_loop}-->
メニュー生成ループ開始。メニュー生成ループの頭に置きます。
<!--{/each}-->
メニュー生成ループ終了。メニュー生成ループの最後に置きます。
以下は上記「<!--{each menu_loop}--><!--{/each}-->」の間でのみ有効です。
{val menu_loop/photo_url}
画像表示ページへのURL
{val menu_loop/photono}
画像番号。
{val menu_loop/allimg_url}
画像のURL。
{val menu_loop/size}
画像のファイルサイズ(KB表示)。
{val menu_loop/allimg_width}
画像のwidth。
{val menu_loop/allimg_height}
画像のheight。
{val menu_loop/allimg_size}
画像のwidthとheight。これだけで「width="454" height="326"」などと表示されます。。

画像表示ページ(photo.html)でのみで使用できるテンプレートタグ

{val img_url}
画像のURL。
{val img_size}
画像のwidthとheight。これだけで「width="454" height="326"」などと表示されます。
{val back_url}
ひとつ前の画像表示ページURL。1枚目の場合は、一番最後の画像表示ページURLとなります。
{val next_url}
次の画像表示ページURL。最後の画像の場合は、1枚目の画像表示ページURLとなります。
以下は「<!--{each menu_loop}--><!--{/each}-->」の間でのみ有効です。
{val menu_loop/now_page}
メニュー生成ループ内で現在表示されている画像と一致した場合「 id="now"」と表示されます。先頭には半角空白が入ります。aタグなどと組み合わせてCSSで色々できます。(具体例

テンプレートタグの具体的な使用例を少し

テンプレートタグの具体的な使用例を少し挙げておきます。ダウンロードしたテンプレートを眺めたりしてうまくテンプレートタグを活用してください。

画像を表示する

<img src="{val img_url}" {val img_size} alt="画像です">

これで下記のようなソースが生成されます。

<img src="big/2.jpg" width="454" height="326" alt="画像です">

画像表示ファイルへリンクを貼る

<ul>
<!--{each menu_loop}-->
	<li><a href="{val menu_loop/photo_url}">Photo No.{val menu_loop/photono}<span>({val menu_loop/size})</span></a></li>
<!--{/each}-->
</ul>

これで下記のようなソースが生成されます。「<!--{each menu_loop}--><!--{/each}-->」で囲まれた範囲は画像の数だけループを繰り返し、メニューを生成します。

<ul>
	<li><a href="/pa/photo_album.php?num=1">Photo NO.1<span>(134KB)</span></a></li>
	<li><a href="/pa/photo_album.phpp?num=2">Photo NO.2<span>(88KB)</span></a></li>
	<li><a href="/pa/photo_album.php?num=3">Photo NO.3<span>(180KB)</span></a></li>
	<li><a href="/pa/photo_album.php?num=4">Photo NO.4<span>(75KB)</span></a></li>
</ul>

{val menu_loop/now_page}

下記のようにテンプレートに記述する。

<ul>
<!--{each menu_loop}-->
	<li><a href="{val menu_loop/photo_url}{val menu_loop/now_page}">Photo No.{val menu_loop/photono}<span>({val menu_loop/size})</span></a></li>
<!--{/each}-->
</ul>

そして例えば画像3のページを開くとソースは下記のようになります。

<ul>
	<li><a href="/pa/photo_album.php?num=1">Photo NO.1<span>(134KB)</span></a></li>
	<li><a href="/pa/photo_album.phpp?num=2">Photo NO.2<span>(88KB)</span></a></li>
	<li><a href="/pa/photo_album.php?num=3" id="now">Photo NO.3<span>(180KB)</span></a></li>
	<li><a href="/pa/photo_album.php?num=4">Photo NO.4<span>(75KB)</span></a></li>
</ul>

そしてCSSで「#now a {・・・}」などと装飾を指定してやれば、他のアンカーと違った表示をしてやることができます。文字で説明するのが難しいので実際にダウンロードした「photo.html」と「pa.css」やサンプルを眺めてみてください。今何番目の画像を見ているのかわかりやすいという仕組みです。

ページトップにもどる

更新履歴

ページトップにもどる

最後に

  1. このスクリプトはLOLIPOP、XREAでのみで動作確認しております。
  2. 改造はOKです。ど素人な管理人が作ったので粗があると思います。スマートに改造してみてください。アドバイスなどいただけるとうれしいです。
  3. 再配布は二次的著作物に限りOKです。
  4. 著作権表示は残していただけるとうれしいです。デザインの関係でどうしても消したい場合は消してもらってかまいません。その際はサイトのどこかのページでこっそりリンクを張っていただけるとうれしいです。
  5. このスクリプトを利用した事によるいかなる損害も、作者は一切の責任を負いません。

作成者:a340(http://a340.oops.jp/cb400ss/php/)

ページトップにもどる