md_slide510nsU2016.2.14 各種サンプル 概要・使い方
 ★ md_slide510ns のファイル構成
   ・ メインファイルを写真に合わせて修正するだけで使える。
   ・ 写真とサムネイルはphotoフォルダに入れる。
   ・ srcフォルダ内のファイルは全てを一括してアップロードする。
[1] メインファイル(標準)
10. md_main_b90n.htm 小サムネイル表示
11. md_main_b91n.htm 大小サムネイル表示
12. md_main_b94n.htm 操作説明などは上のタイトル部に表示
13. md_main_b95w.htm 大判写真の表示に対応サンプル
[2] サブファイル(共通) 21. md_sub_bs5n.htm
22. md_sub_bs51n.htm

・[2]〜[4]は src フォルダ内のファイル
・ この全ファイルをフォルダごとアップロードする。
・ どれも修正や編集など不要 (修正可)

サブファイルをソースのコメントを参考に修正すると
サブ画面の表示を変更できる。

◎ は、大判写真の表示対応で追加したファイル
[3] jsファイル(プログラム) 31. md_main5n.js
32. md_slide5n.js
33. md_slide51n.js
jsファイル(配色指定) 33. main_colors.js
34. sub_colors.js
[4] 背景画像ファイル サブ画面用
(srcフォルダ)
      bg1_green.jpg  bg2_blue.jpg
      bg3_red.jpg    bg4_yellow.jpg
      bg5_silver.jpg bg6_cyan.jpg
      bg7_black.jpg  bg8_pink.jpg
      bg9_brown.jpg
      
[5] 写真ファイル
サムネイルファイル
・写真ファイルと写真を縮小したサムネイルは photo フォルダに入れる。
・photo フォルダが無い場合はphoto フォルダを作って入れる。
※ ダウンロード  更新 2016.2.14 md_slide510ns2.zip 以上の[1]〜[4]を一括圧縮したファイル
  photoフォルダー内の写真は、ご自分の写真と入れ替えてください。
★ ダウンロードした zip ファイルは注意事項を参考にしセキュリティを解除する。
.
※ 各種サンプルや資料
サムネイル配置 101. md_main_b97n 小サムネイル6列 102. md_main_b92n 横長大サムネイル
  103. md_main_b93d2 2段サムネイル 104. md_main_b93d2r 2段連結サムネイル
  105. md_main_b93d3 3段サムネイル 106. md_main_b93d3r 3段連結サムネイル
107. md_main_b93d4 4段サムネイル 108. md_main_b97mn サムネイル配置記号
サムネイル変化 201. md_main_b91h1 サムネイル変化 tm_source = 11 202. md_main_b91h4 サムネイル変化 tm_source = 14
  203. md_main_b90k 背景画像の変化    
サムネイル変化 211. md_main_cs31 サムネイルの傾き変化 212. md_main_cs32 枠の縮小と写真の傾き
 (CSS3応用) 213. md_main_cs33 左右斜めに伸縮 214. md_main_cs34 画像が横に回転
  215. md_main_cs35 写真の透過変化 216. md_main_cs36 左右に移動
  217. md_main_cs37 画像が縦に回転 218. md_main_cs38 サムネイル枠が収縮
サムネイル応用 301. md_main_tms サムネイルのタイトル表示 302. md_main_b91g2 サムネイル間に一行コメント
  303. md_main_b91nk サムネイルからリンク 304. md_main_b92nk 2段サムネイルからリンク
メイン画面 401. md_main_bgm1 タイトル部にBGMボタン 1 402. md_main_bgm2 タイトル部にBGMボタン 2
403. md_main_b95n タイトル部に多数のリンクボタン 410. md_main_bgm10 ★ 新ブラウザ対応のBGMボタン
サブ画面 501. md_main_b93tp 開始画像の指定 502. md_main_b96n 終了画像 終了メッセージ サブタイトル
  503. md_main_b97w 特に大きい写真の表示
配色サンプル 601. md_main_c1 サムネイル変化 tm_source 11 12 602. md_main_d1 サムネイル変化 tm_source 13 14
         

※ 各サンプルはsrcフォルダ内のファイルが最新でないと不具合が起きる場合があります。
★ md_slide510ns の使い方
 1.パソコンに作成するページ専用のフォルダを作り、そこに md_slide510ns2.zip をダウンロードする。
 2.そのzipファイルのプロパティを確認し『セキュリティ設定を解除』してから解凍する。
 3.解凍して出来たメインファイルをクリックして写真が表示されることを確認する。
 4.photo フォルダの中のサンプル画像を削除し、そのフォルダに自分の写真とサムネイルのファイルを入れる。
 5.写真に合わせてメインファイル中の写真データを修正する。 修正個所は ◆ === 写真データ=== ◆ の部分
 6. この時点でメインファイルのサムネイルをクリックし正常に表示されることを確認する。
   ・サムネイルが表示されない場合はデータの区切りの ” や , を誤って消してないか確認する。
 7.写真やページのテーマに合わせてメインファイル中の<title>や操作説明文などを修正する。
   ※ メインファイルのソース中の各行の // の右は説明文で動作に無関係です。
 8.必要があれば配色指定など、いろいろな設定を変更する。
 9.srcフォルダを含めたファイル一式をアップロードする。使わなかったメインファイルは削除しても良い。
※ 写真ファイル ・写真を表示するサイズに縮小した写真ファイルを用意する
・ 写真とサムネイルのファイル名の拡張子は小文字 jpg に統一する
・ 写真サイズは、縦768 のモニターでもコメント表示が隠れないよう、縦 570px 未満を推奨
・ 更に大きい写真を表示する場合はメインファイルの「サブ画面の写真枠サイズ」を変更する
※ サムネイルファイル ・ 写真をサムネイルのサイズに縮小した画像を用意する
・ サムネイルの作成はフリーソフト「縮小専用」「リサイズ超簡単!Pro」などを使うと簡単
・ サンプルでは小サムネイルのサイズを 160x106 としているが任意
・ サンプルと違うサイズを使う場合はメインファイルのサムネイルサイズ指定を合わせる
   〔例〕 tm_width = 160  tm_height = 120
・ サムネイルのファイル名は写真ファイル ****.jpg に対して小文字の s を追加して ****s.jpg とする
・ サムネイルの作成は「縮小専用」などソフトを使うと縮小や s の追加などを簡単にできる
・ 大サムネイルは作らないで元の写真ファイルを指定することもできる
※ md_slide510nsの概要
 ・ md_slide510ns は md_slide510c の機能を整理し使いやすくしたものです。
 ・メインファイル以外の修正不要のファイルを srcフォルダに集約する。
 ・サムネイルやサブ画面の写真の外枠はコーナーRを標準とする。
 ・シャッター音 など一部の機能は廃止や簡略化

・配色指定ファイルを新設 main_colors.js  sub_colors.js
・スライドショーは md_slide510ss2 と別にする。
・IE8やIE9ではコーナーR表示しない
※ 更新記録    改訂は md_main5n.js と md_slide5n.js をペアで行ってます。 個々にダウンロードした場合は一緒に上書きして下さい。
2016.2.14
2015.12.10
2015.06.28
2015.04.20
2015.04.11
2015.03.23
2015.02.18
2015.02.14
2015.02.09
2015.01.30
2015.01.22
2015.01.21
2015.01.11
表示細部の修正
Ms Edge など新ブラウザのBGM対応
サムネイル変化(CSS3応用)218 を追加
大判や縦長混在の写真の組み合わせの不具合個所を修正
大判や縦長混在の写真の組み合わせに対応
CSS3応用例を分離
HTMLファイルのミス修正
スクロールバーの配色を修正
3段サムネイル 4段サムネイルに対応  標準メインファイルを修正
サブ画面の開始画像を可能にする。 CSS3応用集を追加
サブファイルにシャドウ効果を追加
サムネイルからリンクを追加
メインファイルにサブ画面の写真枠サイズ指定を追加