|
［ 応用編メニュー ］
1) 複数のスライドショーの組みを表示するには
2) 番号呼び出しの方法
3) 全画面表示の方法
4) 送りボタンを変更する
5) 送り： コマ送りの文字変更／削除、文字色の変更
６) 連番ファイルによる画像データ定義ファイル作成の簡略化
７) 画像の幅、高さを固定する場合
８) スクロールバーに色を付ける 2004.2.5 追加
８ 利用手順 ［ 応用編 ］
この応用編では、一部 HTML文または JAVAスクリプトを編集していただくことで実現できる機能もあります。
説明に従って変更すれば簡単に出来ますので挑戦してみて下さい。
修正前の動作している状態をバックアップし、少しずつ確認しながら変更してください。
1) 複数のスライドショーの組みを表示するには
新たなテーマの画像ファイルと画像定義ファイルを保存することで実現できます。
この増やす数は制限ありません。
slide01 と同じ階層のフォルダ；例えば slide02
を作り、ここに次のファイルを用意すれば完成です。
(1) auto_slide01.htm ： 下の説明を参考に。
(2) 画像データ
(3) 画像定義ファイル slide_data.js ： 新しい画像のファイル名と説明文で定義ファイルを作って下さい。
auto_slide01.htmは、 貴方のイメージに編集した slide01フォルダ内の
auto_slide01.htmをコピーすれば必要に応じタイトル等の編集だけで利用できます。
またフォルダ名称は Slide** ではなく適切な名称にしてもかまいません。
imagesフォルダはもとのまま１つで結構です。
右図のイメージ →
2) 番号呼び出しの方法
サムネイルから大きな画像を表示する時に使用します。
一般的にギャラリーでサムネイルから大画像を呼び出すには、大画像用のHTMLファイルを作成し、
サムネイル画像からリンクを貼ります。 しかし画像数が多くなるとこの作業が大変になります。
ましてや、同一テーマの画像間の前後送りボタンを付けると、そのリンクを画像毎に設定するのは大変です。
本方法を使うと画像定義を行うだけでHTML文を作らずにこれらを実現できます。
またスライドショーでの表示もできます。
これを実現するには
・ 先ず大画像をスライドショー形式で表示できるようにします。
・ 通常のスライドショーで表示するには メニューから
***/slideshow/slide01/auto_slide01.htm とリンクを貼りますが
これに対しサムネイル画像からその画像へのリンクを
***/slideshow/slide01/auto_slide01.htm?12 のようにします。
スライドショー用auto_slide01.htm の後に半角の ? に続き、画像定義でのその画像の番号を記載します。
***/slideshow/slide01/auto_slide01.htm?12 はサムネイルから１２番目の画像を呼び出すことになります。
・ 基本設定では番号で画像を呼び出した時はスライドショーの画像送りは停止状態です。
番号呼び出し後自動で画像を切り替えるスライドショーにしたいときは、画像定義作成ツールで
「番号呼び出し時自動起動フラグ」を 自動 にチェックを入れて定義ファイルを作成するか
画像定義ファイル slide_data.js の中を書き換えます。
var NstartF= 0; // 番号呼び出し時自動起動フラグ
の 0 を 1 （半角数字の1） に書き換えることで自動起動します。 （ 自動起動フラグ 1 の場合）
・ 全画面表示で 番号呼び出しを行う場合、リンクアドレスを
***/slideshow/slide01/auto_slide01.htm?full12 のようにします。 （ ?full の後に画像番号を記入 ）
.
3) 全画面表示の方法
ＰＣの画面でウインドウを最大化して見ていても各種バーがや枠が面積を取り実効画面が小さくなっています。
全画面表示を行うことでスッキリしたインパクトが大きい表示を行えます。
特に大きな画像を表示する場合に効果があります。
また番号呼び出しと併用できます。
(1) スライドショーHTMLの呼び出し方法
スライドショーのリンクURLに
***/slideshow/slide01/auto_slide01.htm?full
のようにHTMLファイル名の後に半角小文字の
?full を付けます。
全画面表示で 番号呼び出しを行う場合、
リンクアドレスを
***/slideshow/slide01/auto_slide01.htm?full12
のようにします。 （ ?full の後に画像番号を記入 ）
. |
|
(2) 全画面表示での注意事項
1) 前ページに戻れること
2) スライドショーから他ページへリンクしない
［重要］ スライドショーから他のページへジャンプするとフルスクリーンのブラウザウインドウを消すことができなくなります。
3) スライドショーファイル名 auto_slide01.htm を変更することはできません。
(3) 画像サイズ
モニタ解像度 1024x768 を想定した場合最大表示できるサイズを以下のように設定しています。
（ＩＥ6.02では縦のバーは常時表示）
画像サイズ ９９０ ｘ ６６０ ピクセル
説明文 １〜２行で収まるように
コントロールボタンのモード ３
最上の一行に 「全画面表示しています。 戻るには画像か戻るボタンをクリックして下さい。」を１０ポイントフォントで表示
もちろん、これより小さいサイズの画像でも画面をスッキリして見られるメリットがあります。
画像サイズ ９９０ ｘ ６６０ は画像縦横比が ２：３で一部のディジタルカメラが採用しています。
ディジタルカメラの画像縦横比は ３：４ が多くこの場合 最大表示サイズは下記の対応をします。
１． 縦横比 ２．３ （ 最大 990x660 ） にトリミングする ・・・ 青森ねぶた祭り がその例です。
２． 縦 最大の ６６０に合わせ 880x660 とする ・・・ 青森 八甲田 がその例です。
３． 一部のノートＰＣの表示サイズ 800x600 とする ・・・ 沖縄・慶良間諸島 がその例です。
４． 壁紙で保存されているファイルのサイズ 1024x768、 1280x960 の画像を画面内に収める場合
画像の幅、高さを固定する場合 で縮小表示する。
横幅一杯でコントロールボタン等が画面内に入る範囲で適当と思われる値にしてみました。
画像の幅が600〜800ピクセルより大きい場合、画像切替時間を 1.5秒以上長く設定することでスムースに切り替わります。
4) 送りボタンを変更する
送りボタンのデザインはお好きなものに変更していただいて結構です。
ファイル名と画像の対応は 必要なフォルダとファイル
を参考にして画像を差し替えて下さい。
サイズも制限ありませんが、コントロールボタンの罫線の大きさの調整を必要に応じて行って下さい。
・ ファイル名は変更せず標準のものと同じ画像を imagesフォルダに入れて下さい。
・ pb_fow_f.gif pb_halt_f.gif pb_rev_f.gif の３つのボタンは、標準ボタンでは動作中点滅状態としています。
動作中である事が解るデザイン等にして下さい。
5) 送り： コマ送りの文字変更／削除、文字色の変更
これらの文字を変更するには ファイル auto_slide01.htm を編集します。
エディタを開きＨＴＭＬ文の下記の赤文字の部分を変更します。
文字を消したいときはスペースも含めて削除して下さい。
また文字を変更・削除したら上下の位置関係が適当になるようスペース文字を書き込んで調整して下さい。
if(PBmode>=1){document.write("<font size='1'
color='"+CHcolor+"'><B>送り:
</B></font>")}
if(PBmode==4){document.write("<B>コマ送:</B></font>
")}
文字の色を変更する場合、画像定義ファイル作成ツールで文字色の指定をして定義データを作成してください。
また既に作成されたデータは 画像定義データファイル slide_data.js の下記画像コード（ピンク文字部分）を変更して下さい。
var CHcolor = '#000000';//
送り:／コマ: 文字色
var COMcolor= '#000000';//
説明文 文字色 <--- 説明文の文字色を変更できます
６) 連番ファイルによる画像データ定義ファイル作成の簡略化
ファイル名の文字が同一で、連番の場合、ファイル名を簡単に入力できます。
画像定義ファイルの ファイル名
が連番時 の簡易入力 枠内の説明に従って入力して下さい。
例えば image01.jpg image02.jpg･･･ hana01.jpg･･･ fuji01.jpg･･･ のように一連の画像名が
固定文字と２桁の連番、jpg
ファイルの場合に入力を簡易化できます。
この場合、画像ファイル名をスライドショーの表示順に番号を付ける感覚で画像にファイル名を付けます。
７) 画像の幅、高さを固定する場合
これらの文字を変更するには ファイル auto_slide01.htm を編集します。
auto_slide01.htmファイルの <Body
．．． の少し下に次のように記述された行があります。
<SCRIPT language=JavaScript><!--
document.write("<IMG
name=myImg
style='FILTER: revealTrans(Duration="+transDur+",Transition="+transNr+")'
onload='Next_F()'>");
// -->
</SCRIPT>
この <IMG の後に赤色の文字を追加します。
この数字 600、450は好きな画像の大きさ （ピクセル）に差し替え、下記注意をお読み下さい。
(1) 横幅一定で表示する
<IMG
width='600' name=myImg ・・・・
(2) 縦の高さ一定で表示する
<IMG
height='450' name=myImg ・・・・
(3) 縦横一定で表示する
<IMG
width='600' height='450' name=myImg ・・・・
注意 １) IMG と width
または height の間は半角スペースを入れて下さい。
注意 ２) ピクセル数指定の数字は両側を ' （半角のアポストロフィー）でくくって下さい。 HTMLで使う "
ではエラーになります。
注意 ３) 縦横比が異なる画像を表示した場合次の状態になります。
・ 横幅、または縦の高さだけを指定した場合、 指定と反対側の寸法が変化します。
・ 縦横とも指定した場合、強制的に幅・高さを合わせるので縦横比が変わり、押しつぶされた（伸ばされた）ような状態になります。
注意 ４) 小さいサイズの画像を、大きく指定した場合、拡大されて見えますが画像が粗くなります。
.
８) スクロールバーに色を付ける
大きな画面で画像を表示すると、ウインドウズ標準のスクロールバーが目障りになることがあります。
スクリプトでは、スクロールバーを表示しない命令語を入れてありますがIEでは表示されています。
これを目立たなくなるよう背景画像／色に近い色にスタイルシートの設定をします。
ページの head タグ内に以下の赤色文字部分を挿入します。
.
|
