[オープン][F][レスポンシブ][アクティブ]3ボタン統合スライドショーギャラリーcpFHD_nsg_3b_zdw_os
- ・ サンプルの説明
-
このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください(「名前を付けて保存」で文字コードを指定するなど)。異なる文字コードが混在すると、文字化けの原因になります。
-
サイズやアスペクト比が異なる写真を表示する事ができるスライドショーギャラリーです。
img要素の写真ではなく、div要素の背景写真を使う事で、異なる形状の写真を一定の枠内に表示しています。
要するにこのスライドショーは、厳密にいうと、IMGスライドショーではなくBLOCKスライドショーです。
また、「BLOCKスライドショーは異なる形状の写真のスライドショーとして使用できる」とも言えます。
スライドショーデータは、「ここからスライドショーのデータ。↓」以下のクラス名koboDataのdiv要素で、見本の様に表示する写真を背景に設定してください。
-
アニメーションはです。
別のアニメーションに変更したいときは、このページの最下部「別のアニメーションを見る」のリンクをクリックしてください。
-
このスライドショーは、スライドショーを表示しているWindowを非アクティブにする(最前面ではなくする・選択を外す・blurにする)と停止し、アクティブに戻す(最前面にする・選択する・focusにする)と再開します。
即ち、別のタブを開いたり、別のWindowで別の作業すると、スライドショーは一時停止して待機状態になります。
スライドショーの写真をクリックして、別のタブに設定したページを開いた時も一時停止します。
スライドショーのタブやWindowをクリックしてアクティブに戻すと再開します。
この機能は「カスタマイズ」でON/OFFを設定できます。
-
サムネイルもimg要素ではなくdiv要素の背景として表示されますが、プログラムがスライドショーのデータを自動的に流用するため、サムネイルのデータを記述する必要はありません。
サムネイルが不要の時は、HTML内の「ここからサムネイル一覧。↓」から「ここまでサムネイル一覧。↑」を削除してください。
また、サムネイル一覧はスライドショーの幅に収まるサイズに縮小して表示されます。
即ち、データの数が多ければサムネイルは小さくなり、少なければ大きくなります。
デザインを考えてデータ数を調節してください。
-
操作ボタンは、モバイルではタップパソコンではマウスを重ねると右上に現れます。
モバイルではスライドショーの外をタップするとボタンは消えます。
レスポンシブデザインへの対応はアスペクト比維持型です。
-
このスライドショーは掲載しているソースコードのみで動きます。
jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。
個人・商用を問わず無料で自由に使用できます。
アスペクト比維持型 |
|
⇔ |
|
- ・ マウスホイール縦動&ドラッグ縦横連動orフリック縦横連動の3ボタン統合スライドショーギャラリー