- ・ サンプルの説明
-
このページは文字コード「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の外部ファイルも不要です。 個人・商用を問わず無料で自由に使用できます。
- 連番数字のファイル名の画像を使うガイド付きスライドショーで、すべてをスクリプトが自動製作します。 スタイルシートやHTMLの記述は必要ありません。 その代わり（スクリプトを書き換えない限り）画像表示部分やガイドボタンの色以外のデザインを変更する事はできません。 このページでは、汎用性の高いデザインとポラロイドorチェキ風デザインの2種類を掲載しています。 スライドショーの切り替えアニメーションはです。 アニメーションの変更は、このページ最下部「別のアニメーションを見る」内のお好みのリンクをクリックしてください。
| 汎用デザイン | ||
|---|---|---|
 |
⇔ |  |
| チェキ風デザイン | ||
|---|---|---|
 |
⇔ |  |
- ・ 汎用型スライドショーギャラリー
- この見本で使用している画像は生成AIのCopilotで作ったものです。
以下のソースコードをスライドショーを貼り付ける場所にコピーし、ご自身の画像へのパスに書き換えてください。
このページの見本は画像へのパスを相対表記で書いているため、このままでは画像が表示されません。
- ・ チェキ風ガイド付きスライドショー
- 画像の枠を白色にしているためスライドショーの親要素の背景色をベージュにしてありますが、下部のソースコードにはその部分はありません。ご自身のページのデザインに合わせて、スライドショーを張り付ける部分のスタイルシートで背景色を設定してください。この見本で使用している画像は生成AIのCopilotで作ったものです。