[オープン][S][バナー][レスポンシブ][アクティブ][シャッフル]3ボタン型統合スライドショーギャラリー集 cpSHDs_nhsg_3b_zdwp_os
・ サンプルの説明
このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください(「名前を付けて保存」で文字コードを指定するなど)。異なる文字コードが混在すると、文字化けの原因になります。
同じサイズ(同じアスペクト比であれば可)の写真を使うスライドショーギャラリーです。 img要素、またはdiv要素の背景画像として使用しています。 操作ボタンは3個で、モバイルではサムネイルギャラリー部分のタップ、パソコンではスライドショーにマウスを重ねると出てきます。 アニメーションは
です。 同じスライドショーでアニメーションだけを変更したい方は、このページ最下部「別のアニメーションを見る」をご参照ください。
このスライドショーは、スライドショーを表示しているWindowを非アクティブにする(最前面ではなくする・選択を外す・blurにする)と停止し、アクティブに戻す(最前面にする・選択する・focusにする)と再開します。 即ち、別のタブを開いたり、別のWindowで別の作業すると、スライドショーは一時停止して待機状態になります。 スライドショーの写真をクリックして、別のタブに設定したページを開いた時も一時停止します。 スライドショーのタブやWindowをクリックしてアクティブに戻すと再開します。 この機能は「カスタマイズ」でON/OFFを設定できます。
このスライドショーは、記述したスライドショーデータをページを開いた時点でシャッフルする事ができます。 即ち、スライドショーがあるページを開くたびに異なる順番で実行できます。 「記述した順番で実行」または「シャッフルして実行」を「カスタマイズ」で選択できます。
スライドショーのデータは、クラス名"base"のdiv要素の中に、クラス名"koboData"のimg要素またはdiv要素で記述してください。 このページの見本の「ポラロイドorチェキ風」では、クラス名"koboData"のdiv要素を使い、写真は背景画像にしてbackground-sizeの値は"~%"にしています。 バナーにする時は、クラス名"koboData"のa要素を使い、写真は背景画像にします。 background-sizeの値はデザインによって"cover"でも"contain"でも構いません。
サムネイルギャラリーは、全サムネイルをスライドショー幅いっぱい横一列に表示します。 即ち、写真の数が少なければサムネイルは大きくなり、写真の数が多くなるほどサムネイルは小さくなります。 デザインを壊さない程度の数を使用してください。 なお、サムネイルギャラリーがいらない時は、ソース中<!-- ここからサムネイルギャラリー。 --!>から<!-- ここまでサムネイルギャラリー。 --!>までを削除してください。スライドショー部分だけになります。
サムネイルの写真データはクラス名"gal_base"のdiv要素の中のimg要素です。通常はスライドショー用の写真の縮小版を使いますが別の写真でも構いません。すべて同じアスペクト比の画像を用意してください。スライドショーデータとサムネイルデータは、同じ順番で同じ数を記述してください。
表示部分のスタイルシートpadding-top:~%;の~部分に、「写真の高さ/写真の幅」を%で表した数値を書いてください。 小さいデバイスで表示してもアスペクト比を維持して縮小してレスポンシブデザインに対応できます。
このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。 個人・商用を問わず無料で自由に使用できます。
アスペクト比維持型
下部ギャラリー型
⇔
上部ギャラリー型
⇔
ポラロイドorチェキ風
⇔
・ 下ギャラリー型スライドショーギャラリー
">
!function(n){var //--------- カスタマイズ↓ ---------- ds = 5000, //--スライドショー速度(ミリ秒単位)。 da = 1200, //--アニメーション速度(ミリ秒単位)。 y = true, //--自動開始はtrue、手動開始はfalse。 fb = true, //--アクティブを判断してスライドショーを停止/再開するときはtrue、しないときはfalse。 sf = true, //--シャッフルする時はtrue、しない時はfalse。 //--------- カスタマイズ↑ ----------
Copyright = "Miyake_kobo", HomePage = "http://miyake.g2.xrea.com/", MailAddress = "miyake_kobo@yahoo.co.jp", ContentType = "Open version Slideshow", af=
,sh=function(n,t,i,r,u){for(var f,c="."+r,e=n.querySelector("."+t),o=n.querySelector("."+i),s=e.querySelectorAll(c),l=o.querySelectorAll("img"),h=s.length;h;)f=Math.floor(Math.random()*h--),e.appendChild(s[f]),o.appendChild(l[f]),h==0?u():(s=e.querySelectorAll(c),l=o.querySelectorAll("img"))},mt=function(n){var b=n.querySelector(".base"),f=n.querySelector(".gal_base"),l=n.querySelector(".but_sl"),k=n.querySelector(".mae"),d=n.querySelector(".tugi"),e=b.querySelectorAll(".koboData"),u=f?f.querySelectorAll("img"):"",a=e.length,h,t=0,v=0,g=1,p=!1,yy=!1,o=Copyright,w=HomePage,nt=MailAddress,it=ContentType,c={iy:a,ya:da,ke:ds},i=document.createElement("a"),s=function(n){p||(p=!0,g=n>t?1:-1,v=t,t=n,t+=c[w.substr(8,2)],t%=c[nt.substr(1,2)],document.querySelector(".c_"+o).href.substr(8,2)===o.substr(1,2)&&setTimeout(rt,50))},rt=function(){clearTimeout(h);af(n,b,da,e[t],e[v],g);f&&(u[v].style.opacity=1,u[t].style.opacity=.3);setTimeout(function(){y&&!yy&&tt();p=!1},c[nt.substr(2,2)]+100)},tt=function(){clearTimeout(h);h=setTimeout(function(){s(t+1)},c[w.substr(11,2)])},r;if(f)for(r=0;r
"))
以下のソースコードをスライドショーを貼り付ける場所にコピーし、ご自身の写真データに書き換えてください。 見本の写真は、パソコンでの編集では表示されますが、Web上にアップすると表示されません。 可能ならば、スタイルシート部分はHEAD内に移動してください。 また、スタイルシートとスクリプトをそれぞれ別ファイルにし、ページに読み込んで使用する事も可能です。
・ 上ギャラリー型スライドショーギャラリー
">
!function(n){var //--------- カスタマイズ↓ ---------- ds = 4700, //--スライドショー速度(ミリ秒単位)。 da = 1200, //--アニメーション速度(ミリ秒単位)。 y = true, //--自動開始はtrue、手動開始はfalse。 fb = true, //--アクティブを判断してスライドショーを停止/再開するときはtrue、しないときはfalse。 sf = true, //--シャッフルする時はtrue、しない時はfalse。 //--------- カスタマイズ↑ ----------
以下のソースコードをスライドショーを貼り付ける場所にコピーし、ご自身の写真データに書き換えてください。 見本の写真は、パソコンでの編集では表示されますが、Web上にアップすると表示されません。 可能ならば、スタイルシート部分はHEAD内に移動してください。 また、スタイルシートとスクリプトをそれぞれ別ファイルにし、ページに読み込んで使用する事も可能です。
・ ポラロイドorチェキ風スライドショーギャラリー
写真の枠を白色にしているためスライドショーの親要素の背景色をベージュにしてありますが、下部のソースコードにはその部分はありません。ご自身のページのデザインに合わせて、スライドショーを張り付ける部分のスタイルシートで背景色を設定してください。
シャッフルはfalseに設定しています。使用している画像「月の接近と文明の壊滅」は生成AIのCopilotで作ったものです。
">
月の接近と文明の壊滅 No.0
ページを開く
月の接近と文明の壊滅 No.1
ページを開く
月の接近と文明の壊滅 No.2
ページを開く
月の接近と文明の壊滅 No.5
ページを開く
月の接近と文明の壊滅 No.6
ページを開く
月の接近と文明の壊滅 No.7
ページを開く
月の接近と文明の壊滅 No.8
ページを開く
月の接近と文明の壊滅 No.9
ページを開く
月の接近と文明の壊滅 No.10
ページを開く
!function(n){var //--------- カスタマイズ↓ ---------- ds = 5300, //--スライドショー速度(ミリ秒単位)。 da = 1300, //--アニメーション速度(ミリ秒単位)。 y = true, //--自動開始はtrue、手動開始はfalse。 fb = true, //--アクティブを判断してスライドショーを停止/再開するときはtrue、しないときはfalse。 sf = false, //--シャッフルする時はtrue、しない時はfalse。 //--------- カスタマイズ↑ ----------
以下のソースコードをスライドショーを貼り付ける場所にコピーし、ご自身の写真データに書き換えてください。 可能ならば、スタイルシート部分はHEAD内に移動してください。 また、スタイルシートとスクリプトをそれぞれ別ファイルにし、ページに読み込んで使用する事も可能です。
・ 別のアニメーションを見る
前進と後進で動作方向が反転するもの。
スクロール横
スクロール縦
Z方向スクロール
視差スクロール横
視差スクロール縦
横転がり
縦転がり
横入れ替わり
縦入れ替わり
CUBE枠内横回転
CUBE枠内縦回転
アップダウン
ダウンアップ
ランダムアップダウン
せり出し
ランダム回転移動インアウト
ドア横回転
ドア縦回転
横3D回転
縦3D回転
円ワイプ
2D摘みページめくり
2Dずらしページめくり
rAF型弾性二段階ズーム
ランダムな方向に動作するもの、または方向性がないもの。
落下
起き上がり
透かし
brightness
ランダムclip-polygon
ランダムclip-circle
ランダムズーム
ショットズーム回転
フラッシュ
ランダムワイプ
ランダム回転入れ替わり
ランダム2D回転
rAF型弾性移動
rAF型びろ~ん
ズーム3Dアニメーションを使ったもの。
ランダム縦横ズーム3D回転1
ランダム縦横ズーム3D回転2
3D横ズーム裏返し
3D縦ズーム裏返し
ランダム3D縦横ズーム裏返し
3D横ズーム入れ替わり
3D縦ズーム入れ替わり
ランダム3D縦横ズーム入れ替わり
3D横ズーム逆入れ替わり
3D縦ズーム逆入れ替わり
ランダム3D縦横ズーム逆入れ替わり
CUBE横ズーム回転
CUBE縦ズーム回転
ランダム縦横ズームCUBE回転
3D横ズームスクロール
3D縦ズームスクロール
ランダム縦横ズームコーナー回転
射光型3D横ズームページめくり
射光型3D縦ズームページめくり
全回転型3D横ズームページめくり
全回転型3D縦ズームページめくり
シャトル型。アニメーションの動作方向が、next・prevに関係なく、左右や上下や前後を繰り返す。
前後シャトル型zスクロール
左右シャトル型スクロール
上下シャトル型スクロール
左右シャトル型視差移動
上下シャトル型視差移動
前後シャトル型せり出し
左右シャトル型転がり
上下シャトル型転がり
左右シャトル型枠内CUBE回転
上下シャトル型枠内CUBE回転
左右シャトル型ズームCUBE回転
上下シャトル型ズームCUBE回転
左右シャトル型3D入れ替わり
上下シャトル型3D入れ替わり
左右シャトル型3D逆入れ替わり
上下シャトル型3D逆入れ替わり
左右シャトル型3D裏返し
上下シャトル型3D裏返し
左右シャトル型ドア回転
上下シャトル型ドア回転
All Rights Reserved. Copyright (C) 2002- Miyake_kobo.