[オープン][S][バナー][レスポンシブ][アクティブ]3ボタン型統合スライドショーギャラリー集 cpSHDs_nsg_3b_zdwp

・　サンプルの説明: 　このページは文字コード「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チェキ風
	⇔

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

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

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

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

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

/** ボタン。transition-duration:～s;は出没アニメーション速度。 **/
.cpSHD_nsg_h3b_zdwp_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);}
.cpSHD_nsg_h3b_zdwp_os:hover .but_sl{width:80px;height:80px;opacity:1;line-height:80px;font-size:16px;}
.cpSHD_nsg_h3b_zdwp_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;}
.cpSHD_nsg_h3b_zdwp_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;}
.cpSHD_nsg_h3b_zdwp_os:hover .mae{left:calc(20% - 25px);opacity:1;}
.cpSHD_nsg_h3b_zdwp_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;}
.cpSHD_nsg_h3b_zdwp_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;}
.cpSHD_nsg_h3b_zdwp_os:hover .tugi{right:calc(20% - 25px);opacity:1;}

</style>

</div>

</div>

</div>

,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<a;r++)u[r].style.width=100/a+"%",u[r].ind=r,u[r].onclick=function(){this.ind!=t&&s(this.ind)};k&&(k.onclick=function(){s(t-1)});d&&(d.onclick=function(){s(t+1)});l&&(l.innerHTML=y?"pause":"play",l.onclick=function(){y?(clearTimeout(h),y=!1,this.innerHTML="play"):(y=!0,this.innerHTML="pause",s(t+1))});f&&(u[t].style.opacity=.3);e[t].style.zIndex=2;e[t].style.opacity=1;n.mp=document.createElement("div");b.appendChild(n.mp);n.mp.style.position="absolute";n.mp.style.top="0px";n.mp.style.left="0px";n.mp.style.zIndex=0;n.mp.style.width="100%";n.mp.style.height="100%";n.mp.style.display="none";n.mp.style.transitionProperty="transform,left,clip";n.mp.style.backgroundColor="#fff";window.addEventListener("load",function(){document.querySelector(".c_"+o)||(document.body.appendChild(i),i.setAttribute("href",w),i.setAttribute("class","c_"+o),i.innerHTML=it+" (C) "+o,i.style.display="none",i.style.fontSize="12px",i.style.width="250px",i.style.margin="1ex auto");fb&&(window.addEventListener("blur",function(){y&&!yy&&(yy=!0,clearTimeout(h))},!1),window.addEventListener("focus",function(){y&&yy&&(yy=!1,s(t+1))},!1));y&&!yy&&tt()})}(document.getElementById("

　以下のソースコードをスライドショーを貼り付ける場所にコピーし、ご自身の写真データに書き換えてください。見本の写真は、パソコンでの編集では表示されますが、Web上にアップすると表示されません。可能ならば、スタイルシート部分はHEAD内に移動してください。また、スタイルシートとスクリプトをそれぞれ別ファイルにし、ページに読み込んで使用する事も可能です。

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

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

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

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

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

/** ボタン。transition-duration:～s;は出没アニメーション速度。 **/
.cpSHD_nsg_v3b_zdwp_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);}
.cpSHD_nsg_v3b_zdwp_os:hover .but_sl{width:80px;height:80px;opacity:1;line-height:80px;font-size:16px;}
.cpSHD_nsg_v3b_zdwp_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;}
.cpSHD_nsg_v3b_zdwp_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;}
.cpSHD_nsg_v3b_zdwp_os:hover .mae{left:calc(20% - 25px);opacity:1;}
.cpSHD_nsg_v3b_zdwp_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;}
.cpSHD_nsg_v3b_zdwp_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;}
.cpSHD_nsg_v3b_zdwp_os:hover .tugi{right:calc(20% - 25px);opacity:1;}

</style>

</div>

</div>

</div>

・　ポラロイドorチェキ風スライドショーギャラリー: 　写真の枠を白色にしているためスライドショーの親要素の背景色をベージュにしてありますが、下部のソースコードにはその部分はありません。ご自身のページのデザインに合わせて、スライドショーを張り付ける部分のスタイルシートで背景色を設定してください。; 　使用している画像「月の接近と文明の壊滅」は生成AIのCopilotで作ったものです。