- ・ サンプルの説明
-
このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください(「名前を付けて保存」で文字コードを指定するなど)。異なる文字コードが混在すると、文字化けの原因になります。
-
同じサイズ(同じアスペクト比であれば可)で、0から99までの不連続番号のファイル名の写真を使うスライドショーです。
不連続番号のファイル名の写真とは、1.jpg・3.jpg・4.jpg・8.jpg・10.jpg・14.jpg ~ の様に数字がトビトビでも構わない写真群です。
使用できる数字は正の整数値として成り立つ数字です。
例えばファイル名が 7.jpg の写真は使えますが 007.jpg は使えません。
もちろん 2022_10.jpg や Y53.jpg などの様に文字が入ったファイル名も使えません。
-
「カスタマイズ」で写真へのパスとして設定したホルダーの中に写真群を入れてください。
スクリプトは、0から99までの不連続番号のファイル名の写真を自動的に読み込み、スライドショーを実行します。
-
ファイルが存在するか否かの判定はasync/awaitのfetchメソッド使用するのが最良と思います。
しかし(私のプログラミングが未熟なためか)動作が不安定になるので、このページでは「存在しないファイルを読み込もうとするとエラーが出る」事を利用しています。
即ち、0.jpgから99.jpgまでの全ファイルを読み込み、エラーが出なければ採用し出れば無視しています。
ただし、存在しないファイルの数だけエラーが出てしまうため、例えばchromeのデベロッパーツールを開くと、同数の「Failed to load resource」が表示されてしまいます。
-
アニメーションはです。
同じスライドショーでアニメーションだけを変更したい方は、このページ最下部「別のアニメーションを見る」をご参照ください。
操作ボタンは3個でスライドショー右上に半透明に表示されています。モバイルではボタンをタップ、パソコンではボタンにマウスを重ねると不透明になります。
-
表示部分のスタイルシートpadding-top:~%;の~部分に、「写真の高さ/写真の幅」を%で表した数値を書いてください。
小さいデバイスで表示してもアスペクト比を維持して縮小してレスポンシブデザインに対応できます。
-
サムネイルは、
スライドショー用の写真を流用して、クラス名"gal_base"のdiv要素の中にスクリプトが自動的に製作し、全サムネイルをスライドショー幅いっぱい横一列に表示します。
即ち、写真の数が少なければサムネイルは大きくなり、写真の数が多くなるほどサムネイルは小さくなります。
デザインを壊さない程度の数を使用してください。
-
このスライドショーは、スライドショーを表示しているWindowを非アクティブにする(最前面ではなくする・選択を外す・blurにする)と停止し、アクティブに戻す(最前面にする・選択する・focusにする)と再開します。
即ち、別のタブを開いたり、別のWindowで別の作業すると、スライドショーは一時停止して待機状態になります。
スライドショーの写真をクリックして、別のタブに設定したページを開いた時も一時停止します。
スライドショーのタブやWindowをクリックしてアクティブに戻すと再開します。
この機能は「カスタマイズ」でON/OFFを設定できます。
-
このスライドショーは掲載しているソースコードのみで動きます。
jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。
個人・商用を問わず無料で自由に使用できます。
|
⇔ |
|
- ・ スライドショーギャラリー
- 設定したホルダーには、ファイル名が
0・2・3・4・6・7・8・9・11・12・13・15・16・17・18・35
(.jpg)の13個の写真ファイルが入っています。スライドショーはこの順番で実行されます。表示部分のスタイルシートでpadding-top:~%;に写真の(高さ/幅)を%で書いてください。このサンプルは(4/3)の縦長の写真を使っているため133.34%です。アクティブ機能ONです。