[オープン][F][大小][バナー][レスポンシブ][アクティブ][シャッフル]ドラッグ・フリック・マウスホイール連動型サムネイル不揃カルーセル連動スライドショーギャラリー
- ・ サンプルの説明
-
このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください(「名前を付けて保存」で文字コードを指定するなど)。異なる文字コードが混在すると、文字化けの原因になります。
-
サイズやアスペクト比が異なる写真を表示する事ができるスライドショーギャラリーです。
img要素の写真ではなく、div要素の背景写真を使う事で、異なる形状の写真を一定の枠内に表示しています。
バナーにするときはdiv要素ではなくa要素を使い、href属性に開くページのurlを書いてください。
要するにこのスライドショーは、厳密にいうと、IMGスライドショーではなくBLOCKスライドショーです。
また逆に、「BLOCKスライドショーは異なる形状の写真のスライドショーとして使用できる」とも言えます。
スライドショーデータは、「ここからスライドショーのデータ。↓」以下のクラス名koboDataのdiv要素(a要素)で、表示する写真を背景に設定してください。
-
スライドショーの切り替えアニメーションはです。
スライドショーの機能はこのままでアニメーションだけを変更する場合は、このページ最下部「別のアニメーションを見る」内のお好みのリンクをクリックしてください。
-
ドラッグ(パソコン)やフリック(スマホやタブレット)でも操作でき、縦横連動型のアニメーションでは縦横それぞれの操作でアニメーション方向も連動します。
即ちアニメーションは、モバイルでは縦フリックと横フリック操作でフリックした方向に動作し、パソコンでは縦ドラッグと横ドラッグでドラッグした方向に動作します。
マウスが使える環境ではマウスホイールでも操作でき、アニメーションは縦方向に動作します。
-
ドラッグ・フリック・マウスホイール操作は「カスタマイズ」で機能の有無を選択できます。
-
このスライドショーは、スライドショーを表示しているWindowを非アクティブにする(最前面ではなくする・選択を外す・blurにする)と停止し、アクティブに戻す(最前面にする・選択する・focusにする)と再開します。
即ち、別のタブを開いたり、別のWindowで別の作業すると、スライドショーは一時停止して待機状態になります。
スライドショーの写真をクリックして、別のタブに設定したページを開いた時も一時停止します。
スライドショーのタブやWindowをクリックしてアクティブに戻すと再開します。
この機能は「カスタマイズ」でON/OFFを設定できます。
-
このスライドショーは、記述したスライドショーデータをページを開いた時点でシャッフルする事ができます。
即ち、スライドショーがあるページを開くたびに異なる順番で実行できます。
「記述した順番で実行」または「シャッフルして実行」を「カスタマイズ」で選択できます。
-
サムネイルもimg要素ではなくdiv要素の背景として表示します。
クラス名gal_baseのDIV要素の中の、クラス名thumbのDIV要素の背景に、サムネイル用の画像を設定してください。
画像の形状やサイズは自由です。
-
サムネイルギャラリーは、現在選択されているデータのサムネイルが画面の中央に自動的にスクロールするカルーセル型です。
-
操作ボタンは3個でスライドショーの左上部に半透明に表示されています。
モバイルではボタンをタップ、パソコンではスライドショーにマウスを重ねると不透明になり可視化されます。
-
このスライドショーは掲載しているソースコードのみで動きます。
jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。
個人・商用を問わず無料で自由に使用できますが、スライドショーを張り付けたページの最下部に著作権表記が表示されます。
なお、使用している都市の写真は
Unsplash
の無料画像です。
アスペクト非維持型 |
|
⇔ |
|
- ・ ドラッグ・フリック・マウスホイール連動型サムネイル不揃カルーセル連動スライドショーギャラリー