- ・ サンプルの説明
-
このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。
- 連番数字のファイル名の写真を使うガイド付きスライドショーで、すべてをスクリプトが自動製作します。 スタイルシートやHTMLの記述は必要ありません。 その代わり（スクリプトを書き換えない限り）写真表示部分やガイドボタンの色以外のデザインを変更する事はできません。 このページでは、汎用性の高いデザインとポラロイドorチェキ風デザインの2種類を掲載しています。 スライドショーの切り替えアニメーションはです。 アニメーションの変更は、このページ最下部「別のアニメーションを見る」内のお好みのリンクをクリックしてください。
- 連番とは0.jpg・1.jpg・2.jpg・・・の様にファイル名が数値で順番になっているファイル群です。 数値（実際の量を表す）ですから007.jpgは使えませんが1007.jpgは使えます。 9.jpgの次は10.jpgです。 スクリプト内の「設定部分」で連番の最初と最後と写真へのパス、ガイドボタンの文字や背景色などを設定してください。
- このスライドショーは、スライドショーを表示しているWindowを非アクティブにする（最前面ではなくする・選択を外す・blurにする）と停止し、アクティブに戻す（最前面にする・選択する・focusにする）と再開します。 即ち、別のタブを開いたり、別のWindowで別の作業すると、スライドショーは一時停止して待機状態になります。 スライドショーの写真をクリックして、別のタブに設定したページを開いた時も一時停止します。 スライドショーのタブやWindowをクリックしてアクティブに戻すと再開します。 この機能は「設定部分」でON／OFFを設定できます。
- スライドショーはガイドボタンのクリックで操作します。 スライドショー動作中に訪問者が何らかの操作をした場合（興味を示したと判断して）スライドショーは停止し、写真部分の右上に「start」ボタンが現れます。クリックでスライドショーが再開し、ボタンは消えます。
- このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。 個人・商用を問わず無料で自由に使用できます。
- この見本で使用している画像「惑星の接近と文明の終焉」は生成AIのCopilotで作ったものです。
- 連番数字のファイル名の写真を使うガイド付きスライドショーで、すべてをスクリプトが自動製作します。 スタイルシートやHTMLの記述は必要ありません。 その代わり（スクリプトを書き換えない限り）写真表示部分やガイドボタンの色以外のデザインを変更する事はできません。 このページでは、汎用性の高いデザインとポラロイドorチェキ風デザインの2種類を掲載しています。 スライドショーの切り替えアニメーションはです。 アニメーションの変更は、このページ最下部「別のアニメーションを見る」内のお好みのリンクをクリックしてください。
| 汎用デザイン | ||
|---|---|---|
 |
⇔ |  |
| チェキ風デザイン | ||
|---|---|---|
 |
⇔ |  |
- ・ 汎用型スライドショーギャラリー
以下のソースコードをスライドショーを貼り付ける場所にコピーし、ご自身の写真データに書き換えてください。
見本の写真は、パソコンでの編集では表示されますが、Web上にアップすると表示されない事があります。
- ・ チェキ風ガイド付きスライドショー
- 写真の枠を白色にしているためスライドショーの親要素の背景色をベージュにしてありますが、下部のソースコードにはその部分はありません。ご自身のページのデザインに合わせて、スライドショーを張り付ける部分のスタイルシートで背景色を設定してください。