アルバムあるいはギャラリーを作って、『ＨＰをエディタで』の応用をしよう。同じ素材を使って、４種類、それぞれに２とおり、それと私が好んで使っているフレームによるアルバムを１つ、合計９つのページを作ってみた。用いた写真は１０枚で、そのうち９枚は、１年を通じてほぼ同じ位置から撮影したものである。これをスライドショーとアルバムに作り、コメントやデータなどを入れた。個々のアルバムのソースは、開いたページで確認して欲しい。
このページから別ウィンドーに開くサンプルのアルバムは、全て同じターゲットに開く。リンクから開いたギャラリーは、
をクリックすると閉じることができる。
Gallery 1 ＆ Gallery 2
よく見かける形式だ。テーブルを利用して、サムネールと簡単なキャプションと撮影日を配置し、それをクリックすると拡大された画像が表示される。ここでは、拡大画像が別のウィンドウに表示されるものを試みた。写真の数が多いときや、キャプション程度の情報で済ませたいときに適する。
テーブルを使ってサムネールを配置したもの。サムネールをクリックすると写真が別ウィンドーに拡大表示される。それぞれの写真およびスライドショーは、別々の新しいウィンドーに表示されるため、ユーザーがいちいち閉じるという負担が生じる。このページの長所は、相当数の写真を掲載しても整然としている点で、画像以外の情報量が少なくなりがちという欠点がある。
Gallery 1 に手を加えたもので、サムネールをクリックすると写真が皆同じサブウィンドーに拡大表示される。写真のサイズを統一しておけば、サブウィンドーは次の写真で入れ替わるので、いちいち閉じる必要がない。
Gallery2では、改行を使って写真とキャプションの上下に変化をつけたので、手作り感が出る。こういうことは好みの問題だから、気に入らない人もあるだろうが、私の初期のサイトにはこの形式のものが多い。
Gallery 3 ＆ Gallery 4
『JavaScript 活用テクニック』（成美堂出版）に収録の『サムネイル画像の表示サイズを変更する』を改変したもの。有用なスクリプトが数多く掲載されているので、一読を勧める。このアルバムは、写真の数が少ない場合に大変良い。全体のレイアウトはテーブルを使った。なお背景色を変える際には、罫線の色も変える必要がある。
拡大画像の表示窓にスライドショーを表示することができないので、Gallery 2 と同じ方法でサブウィンドーで表示させる。この場合、FireFox などの Mozilla 系のブラウザでは、ショーと同時に、開いている同じブラウザの別ウィンドウをも同時にフォーカスさせるので、そういうブラウザをメーンに実用の際は、元のウィンドーで入れ替わるリンクが良い。
ブラウザによって画像の表示の仕方が違うので、ここでは Mozilla 系のブラウザに合わせた。Windows 版の IE では、枠が現れることがある。どちらを主にするかによって、拡大画像の表示サイズを変更する必要が生じる。
マウスがサムネールに触れると、初期画面の写真と入れ替わって表示される。スライドショーはサブウィンドウで表示する。
何気なくマウスが触れただけで、写真が入れ替わるのを面白いと見るか、自由意志を阻害されたと感じるかはユーザーの感性による。どちらを使うかは、内容にもよるが、私はあまり好まない。
Gallery 3 の「onmouseover」を「onclick」と書き換え、サムネール画像を下に配した以外は変更がない。サムネールをクリックすると、初期画面の写真と入れ替わって表示される。サムネールの位置は、上下左右、好みで変えられる。サムネールを写真のタイトルやキャプションと置き換えれば、写真の数がある程度多くても対応できる。
Gallery 5 ＆ Gallery 6
『JavaScrip 辞典』（秀和システム）に収録の『インラインフレームを変更する』を応用したもので、写真の数があまり多くない場合に活用すると良い。この方法では、拡大画像の表示窓に別ファイルのスライドショーを表示することができるが、Gallery 2 の自動終了するものは使えない。
インラインフレームを有効に活用しているサイトは少ないようだが、私は非常に有用な方法だと考えている。なお背景色を変える際には、罫線の色も変える必要がある。好みによっては、「onclick」を「onmouseover」とすることで、ロールオーバーに変更可能だ。
サムネールをクリックすると、初期画面の写真と入れ替わって表示され、スライドショーも同じフレームに表示される。
Gallery 5 のサムネールを画面の下に配し、サムネールからのリンクをロールオーバーに設定した。文字からのリンクは、クリック方式による。
Gallery 7 ＆ Gallery 8
写真とコメントの双方を重視する場合、あるいはコメントを主に、写真を従にするサイトの作成に適す。画像の位置・サイズと文章への回り込みについて不規則に配し、視覚的なマンネリズムを避けた。文章についての説明的な写真を多用するので、私の最近のページは、この形式によるものが多い。
写真やサムネールのクリックで、拡大画像とスライドショーはすべて同一のサブウィンドーに開く。
サムネールのクリックで、拡大画像はすべて同一のサブウィンドーに開く。Gallery 7との違いは、最初の大きな画像のクリックで、その位置でスライドショーが始まることと、初期画面に戻すボタンを用意したことだけだ。
Gallery 9
こういうページも可能だという意味で、フレームを使ったページを試みた。商業サイトではフレームを使うのを避ける傾向が見られるが、私は大変重宝している。何よりもサイト内のリンクが明快なことが好ましいと考えている。
サムネールから拡大写真が表示され、それぞれの拡大写真をクリックするとスライドショーが始まる。スライドショーを中止するには、いずれかのサムネールをクリックする。この程度の写真とコメントならば、簡潔明瞭で使いやすいものができるだろう。
画像をそれぞれのhtmlファイルに貼りつけておかなければならないのが面倒だと言われそうだが、写真とコメントを一つのファイルに入れることで、いくらかは作業を軽減している。『庭のスミレたち』では写真とコメントを別のフレームにして、サムネールから開くファイルを一方だけと両方と使い分けた。一つのコメントに対して、複数の写真を対応させるためだ。
