[オープン][S][連番][レスポンシブ]3ボタン型統合スライドショーギャラリー集 cpSRs_nsg_3b_zdw

・　サンプルの説明: 　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。; 　同じサイズ（同じアスペクト比であれば可）で連番のファイル名の写真を使うスライドショーギャラリーです。アニメーションはです。他のアニメーションへのリンクはこのページ最下部にあります。連番のファイル名とは、0.jpg・1.jpg・2.jpg～や 12.jpg・13.jpg・14.jpg～などの、連続する正の整数値として成り立つ数字をファイル名にした写真群です。例えばファイル名が 700.jpg の写真は使えますが 007.jpg は使えません。もちろん 2022_10.jpg や Y1953.jpg などの様に文字が入ったファイル名も使えません。連番の最初の数字は何番でも構いません。「書き換える部分」で最初と最後の数字と写真へのパスを設定してください。; 　操作ボタンは3個で、モバイルではタップ、パソコンではマウスを重ねると現れます。; 　サムネイルギャラリーは、全サムネイルをスライドショー幅いっぱい横一列に表示します。即ち、写真の数が少なければサムネイルは大きくなり、写真の数が多くなるほどサムネイルは小さくなります。デザインを壊さない程度の数を使用してください。なお、サムネイルギャラリーがいらない時は、ソース中<!-- ここからサムネイルギャラリー。 --!>から<!-- ここまでサムネイルギャラリー。 --!>までを削除してください。スライドショー部分だけになります。; 　写真表示部分のスタイルシートpadding-top:～%;の～部分に、「写真の高さ／写真の幅」を％で表した数値を書いてください。小さいデバイスで表示してもアスペクト比を維持して縮小してレスポンシブデザインに対応できます。; 　このスライドショーギャラリーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。個人・商用を問わず無料で自由に使用できます。

アスペクト比維持型
下部ギャラリー型
	⇔
上部ギャラリー型
	⇔

・　下ギャラリー型スライドショーギャラリー

/** スライドショー全体。max-width:～px;に最大表示サイズを書く。 **/
.cpSR_nsg_h3b_zdw_os{position:relative;top:0;left:0;width:100%;max-width:640px;margin:auto;overflow:hidden;font-family:"メイリオ";text-align:center;}

/** 写真表示部分。アスペクト比維持型はpadding-top:～%;に写真の（高さ／幅）を％で書く。 **/
.cpSR_nsg_h3b_zdw_os .base{position:relative;top:0;left:0;padding-top:75%;}

/** 個々のデータ。 **/
.cpSR_nsg_h3b_zdw_os .base .koboData{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;opacity:0;}

/** サムネイル。 **/
.cpSR_nsg_h3b_zdw_os .gal_base{position:relative;top:0;left:0;width:100%;display: flex;z-index:10;background-color:#fff;}
.cpSR_nsg_h3b_zdw_os .gal_base img{cursor:pointer;transition-duration:.5s;}

/** ボタン。transition-duration:～s;は出没アニメーション速度。 **/
.cpSR_nsg_h3b_zdw_os .but_sl{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;z-index:10;width:40px;height:40px;border:0;outline:0;border-radius:50%;line-height:40px;color:#fff;font-family:'メイリオ';font-size:10px;text-align:center;cursor:pointer;opacity:0;transition-duration:0.5s;background-color:rgba(0,0,0,0.5);}
.cpSR_nsg_h3b_zdw_os:hover .but_sl{width:80px;height:80px;opacity:1;line-height:80px;font-size:16px;}
.cpSR_nsg_h3b_zdw_os .mae{position:absolute;top:0;bottom:0;left:0;margin:auto 0px;z-index:20;color:#fff;background-color:rgba(0,0,0,0.5);border-radius:50%;height:50px;width:50px;cursor:pointer;box-sizing:border-box;opacity:0;transition-duration:.5s;}
.cpSR_nsg_h3b_zdw_os .mae::before{content:'';width:8px;height:8px;display:block;border-top:solid 2px;border-right:solid 2px;transform:rotate(-135deg);position:absolute;top:0;bottom:0;left:4px;right:0;margin:auto;}
.cpSR_nsg_h3b_zdw_os:hover .mae{left:calc(20% - 25px);opacity:1;}
.cpSR_nsg_h3b_zdw_os .tugi{position:absolute;top:0;bottom:0;right:0;margin:auto 0px;z-index:20;color:#fff;background-color:rgba(0,0,0,0.5);border-radius:50%;height:50px;width:50px;cursor:pointer;box-sizing:border-box;opacity:0;transition-duration:.5s;}
.cpSR_nsg_h3b_zdw_os .tugi::before{content:'';width:8px;height:8px;display:block;border-top:solid 2px;border-right:solid 2px;transform:rotate(45deg);position:absolute;top:0;bottom:0;left:0;right:4px;margin:auto;}
.cpSR_nsg_h3b_zdw_os:hover .tugi{right:calc(20% - 25px);opacity:1;}

</style>

;for(var f,p=n.querySelector(".base"),e=n.querySelector(".gal_base"),w=n.querySelector(".but_sl"),g=n.querySelector(".mae"),nt=n.querySelector(".tugi"),l=[],o=[],u=[],tt="",it="",s=lp-fp+1,a,t=0,b=0,rt=1,k=!1,h=Copyright,d=HomePage,ut=MailAddress,et=ContentType,v={iy:s,ya:da,ke:ds},r=document.createElement("a"),c=function(n){k||(k=!0,rt=n>t?1:-1,b=t,t=n,t+=v[d.substr(8,2)],t%=v[ut.substr(1,2)],document.querySelector(".c_"+h).href.substr(8,2)===h.substr(1,2)&&setTimeout(ot,50))},ot=function(){clearTimeout(a);af(n,p,da,o[t],o[b],rt);e&&(u[b].style.opacity=1,u[t].style.opacity=.3);setTimeout(function(){y&&ft();k=!1},v[ut.substr(2,2)]+100)},ft=function(){clearTimeout(a);a=setTimeout(function(){c(t+1)},v[d.substr(11,2)])},i=0;i<s;i++)l[i]=new Image,l[i].src=pp+(i+fp)+".jpg",tt+='<img class="koboData" src="'+l[i].src+'" />';if(p.innerHTML=tt,o=p.querySelectorAll(".koboData"),e){for(i=0;i<s;i++)it+='<img class="thumb" src="'+l[i].src+'" />';e.innerHTML=it;u=e.querySelectorAll(".thumb")}if(e)for(f=0;f<s;f++)u[f].style.width=100/s+"%",u[f].ind=f,u[f].onclick=function(){this.ind!=t&&c(this.ind)};g&&(g.onclick=function(){c(t-1)});nt&&(nt.onclick=function(){c(t+1)});w&&(w.innerHTML=y?"pause":"play",w.onclick=function(){y?(clearTimeout(a),y=!1,this.innerHTML="play"):(y=!0,this.innerHTML="pause",c(t+1))});e&&(u[t].style.opacity=.3);o[t].style.zIndex=2;o[t].style.opacity=1;window.addEventListener("load",function(){document.querySelector(".c_"+h)||(document.body.appendChild(r),r.setAttribute("href",d),r.setAttribute("class","c_"+h),r.innerHTML=et+" (C) "+h,r.style.display="none",r.style.fontSize="12px",r.style.width="250px",r.style.margin="1ex auto");y&&ft()})}(document.getElementById("

　以下のソースコードをスライドショーを貼り付ける場所にコピーし、ご自身の写真データに書き換えてください。可能ならば、スタイルシート部分はHEAD内に移動してください。

・　上ギャラリー型スライドショーギャラリー

/** スライドショー全体。max-width:～px;に最大表示サイズを書く。 **/
.cpSR_nsg_v3b_zdw_os{position:relative;top:0;left:0;width:100%;max-width:640px;margin:auto;overflow:hidden;font-family:"メイリオ";text-align:center;}

/** 写真表示部分。アスペクト比維持型はpadding-top:～%;に写真の（高さ／幅）を％で書く。 **/
.cpSR_nsg_v3b_zdw_os .base{position:relative;top:0;left:0;padding-top:75%;}

/** 個々のデータ。 **/
.cpSR_nsg_v3b_zdw_os .base .koboData{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;opacity:0;}

/** サムネイル。 **/
.cpSR_nsg_v3b_zdw_os .gal_base{position:relative;top:0;left:0;width:100%;display: flex;z-index:10;background-color:#fff;}
.cpSR_nsg_v3b_zdw_os .gal_base img{cursor:pointer;transition-duration:.5s;}

/** ボタン。transition-duration:～s;は出没アニメーション速度。 **/
.cpSR_nsg_v3b_zdw_os .but_sl{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;z-index:10;width:40px;height:40px;border:0;outline:0;border-radius:50%;line-height:40px;color:#fff;font-family:'メイリオ';font-size:10px;text-align:center;cursor:pointer;opacity:0;transition-duration:0.5s;background-color:rgba(0,0,0,0.5);}
.cpSR_nsg_v3b_zdw_os:hover .but_sl{width:80px;height:80px;opacity:1;line-height:80px;font-size:16px;}
.cpSR_nsg_v3b_zdw_os .mae{position:absolute;top:0;bottom:0;left:0;margin:auto 0px;z-index:20;color:#fff;background-color:rgba(0,0,0,0.5);border-radius:50%;height:50px;width:50px;cursor:pointer;box-sizing:border-box;opacity:0;transition-duration:.5s;}
.cpSR_nsg_v3b_zdw_os .mae::before{content:'';width:8px;height:8px;display:block;border-top:solid 2px;border-right:solid 2px;transform:rotate(-135deg);position:absolute;top:0;bottom:0;left:4px;right:0;margin:auto;}
.cpSR_nsg_v3b_zdw_os:hover .mae{left:calc(20% - 25px);opacity:1;}
.cpSR_nsg_v3b_zdw_os .tugi{position:absolute;top:0;bottom:0;right:0;margin:auto 0px;z-index:20;color:#fff;background-color:rgba(0,0,0,0.5);border-radius:50%;height:50px;width:50px;cursor:pointer;box-sizing:border-box;opacity:0;transition-duration:.5s;}
.cpSR_nsg_v3b_zdw_os .tugi::before{content:'';width:8px;height:8px;display:block;border-top:solid 2px;border-right:solid 2px;transform:rotate(45deg);position:absolute;top:0;bottom:0;left:0;right:4px;margin:auto;}
.cpSR_nsg_v3b_zdw_os:hover .tugi{right:calc(20% - 25px);opacity:1;}

</style>

・　別のアニメーションを見る: 前進と後進で動作方向が反転するもの。
　スクロール横　スクロール縦　視差スクロール横　視差スクロール縦　横転がり　縦転がり　横入れ替わり　縦入れ替わり　 CUBE枠内横回転　 CUBE枠内縦回転　アップダウン　ダウンアップ　ランダムアップダウン　せり出し　ランダム回転移動インアウト　ドア横回転　ドア縦回転　横3D回転　縦3D回転　円ワイプ

ランダムな方向に動作するもの、または方向性がないもの。
　落下　起き上がり　透かし　 brightness 　ランダムclip-polygon 　ランダムclip-circle 　ランダムズーム　ショットズーム回転　フラッシュ　ランダムワイプ　ランダム回転入れ替わり　ランダム2D回転

ズーム3Dアニメーションを使ったもの。
　ランダム縦横ズーム3D回転1 　ランダム縦横ズーム3D回転2 　 3D横ズーム裏返し　 3D縦ズーム裏返し　ランダム3D縦横ズーム裏返し　 3D横ズーム入れ替わり　 3D縦ズーム入れ替わり　ランダム3D縦横ズーム入れ替わり　 3D横ズーム逆入れ替わり　 3D縦ズーム逆入れ替わり　ランダム3D縦横ズーム逆入れ替わり　 CUBE横ズーム回転　 CUBE縦ズーム回転　ランダム縦横ズームCUBE回転　 3D横ズームスクロール　 3D縦ズームスクロール　ランダム縦横ズームコーナー回転