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

・　サンプルの説明: 　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。; 　写真や文章などをひとまとめにしたBLOCK要素をスライドさせる事ができるスライドショーギャラリーです。アニメーションはです。他のアニメーションへのリンクはこのページ最下部にあります。データはクラス名"base"のdiv要素の中に、クラス名"koboData"のdiv要素などのBLOCK要素で記述してください。レスポンシブデザインへの対応は、高さ維持型とアスペクト比維持型の両方を掲載してあります。スライドショーの操作ボタンは三つ型で、モバイルではタップ、パソコンではマウスを重ねると出てきます。; 　このスライドショーは、スライドショーを表示しているWindowを非アクティブにする（最前面ではなくする・選択を外す・blurにする）と停止し、アクティブに戻す（最前面にする・選択する・focusにする）と再開します。即ち、別のタブを開いたり、別のWindowで別の作業すると、スライドショーは一時停止して待機状態になります。スライドショーの写真をクリックして、別のタブに設定したページを開いた時も一時停止します。スライドショーのタブやWindowをクリックしてアクティブに戻すと再開します。この機能は「カスタマイズ」でON／OFFを設定できます。; 　BLOCK要素で写真のみを表示する場合はその背景画像に写真を設定します。スタイルbackground-size:cover;で画面いっぱいに表示し、あたかも写真のスライドショーの様にする事もできます。また、background-size:contain;にすれば、形の違う写真を一定の枠内に表示できます。; 　サムネイルの写真データはクラス名"gal_base"のdiv要素の中のimg要素です。すべて同じアスペクト比のサムネイル画像（スライドショー用の写真を流用しても可）を用意してください。このページでは高さ維持型の見本ではサムネイル専用の小さい写真を使っていますが、アスペクト比維持型ではスライドショー用の大きい写真を流用しています。スライドショーデータとサムネイルデータは、同じ順番で同じ数を記述してください。; 　サムネイルギャラリーは、全サムネイルをスライドショー幅いっぱい横一列に表示します。即ち、数が少なければサムネイルは大きくなり、数が多くなるほどサムネイルは小さくなります。デザインを壊さない程度の数を使用してください。なお、サムネイルギャラリーがいらない時は、ソース中<!-- ここからサムネイルギャラリー。 --!>から<!-- ここまでサムネイルギャラリー。 --!>までを削除してください。スライドショー部分だけになります。; 　このスライドショーギャラリーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。個人・商用を問わず無料で自由に永久に使用できます。

高さ維持型の個別デザイン
	⇔
アスペクト比維持型の定型デザイン
	⇔

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

　レスポンシブデザインへの対応が高さ維持型。サムネイルギャラリーがスライドショーの下部にあるタイプ。

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

/** 表示部分。高さ維持型はheigtht:～;で高さを固定する。 **/
.cpBlHD_nsg_h3b_zdw_os .base{position:relative;top:0;left:0;width:100%;height:480px;}

/** 個々のデータ。 **/
.cpBlHD_nsg_h3b_zdw_os .base .koboData{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;opacity:0;font-size:16px;box-sizing:border-box;}
.cpBlHD_nsg_h3b_zdw_os .base .koboData .slide-contents-title{font-size:50px;color:#888;font-family:'Times';color:#900;}
@media screen and (max-width: 600px){.cpBlHD_nsg_h3b_zdw_os .base .koboData{font-size:12px;}.cpBlHD_nsg_h3b_zdw_os .base .koboData .slide-contents-title{font-size:40px;}}

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

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

</style>

<div class="koboData" data-thumb="http://miyakejs.html.xdomain.jp/img/10s.jpg" title="Top">
<table style="width:100%;height:100%;text-align:center;background-color:#ccb;">
<tr>
<td style="width:40%;">
<span class="slide-contents-title">Photo</span>
<br />
My favorite photographs
<br />
<br />
<img src="http://miyakejs.html.xdomain.jp/img/10s.jpg" style="width:50%;" />
<br />
<br />
<a target="_blank" href="http://miyakejs.html.xdomain.jp/index.html" title="">HOME</a>
<br />
</td>
<td style="width:60%;vertical-align:top;">
<br />
<br />
<ul style="width:80%;text-align:left;word-break:break-word;">
<li>
このスライドショーはBLOCKコンテンツ型です。div要素やa要素（display:block;設定）などのBLOCKコンテンツを混在させて使用できます。BLOCKは中身をHTMLで自由に編集できます。
<li>
BLOCK全面に写真を表示したい場合はBLOCK要素の背景にしてください。その際スタイルシートを、background-image:url('写真のURL');、background-repeat:no-repeat;、background-position:center;、background-size:cover;（またはcontain;）などとしてください。
</ul>
</td>
</tr>
</table>
</div>

<div class="koboData" title="これはdiv要素で、写真は背景画像。" title="ツバキ；div要素" style="background:url('http://miyakejs.html.xdomain.jp/img/18.jpg') center center no-repeat #eed;background-size:cover;">
<div style="position:absolute;top:0px;left:0px;text-align:left;padding:20px;color:#fff;font-size:80%;background-color:rgba(0,0,0,0.4);">
　データにdiv要素を使用すると中身をHTMLで自由に編集でき、内側にこの様なdiv要素を作って文章やリンクや画像やバナーなどを入れる事もできます。データはクラス名koboDataです。背景画像のスタイルをbackground-size:cover;にして写真を枠全体に表示しています。
</div>
</div>

<a class="koboData" href="http://miyakejs.html.xdomain.jp/img/1.html" target="_blank" title="アルストロメリア；a要素" style="background:url('http://miyakejs.html.xdomain.jp/img/1.jpg') center center no-repeat #eed;background-size:contain;">
<div title="この部分はa要素の内包div要素" style="position:absolute;top:0px;left:0%;width:60%;text-align:left;padding:15px;margin:15px;line-height:1.2em;color:#fff;font-size:80%;background-color:rgba(0,0,0,0.6);border-radius:10px;transition:0.5s;word-break:break-word;">
　これはa要素の背景写真を利用したバナーデータです。クリックで指定したページが開きます。レスポンシブデザインへの対応では、アスペクト比維持型（写真中心の場合便利）としても高さ維持型（文章が多い場合はみ出しを防ぐ）としても使用できます。
背景画像のスタイルをbackground-size:contain;にして写真が枠内に収まるように表示しています。
</div>
</a>

<div class="koboData" title="オダマキ；div要素" style="background-image:url('http://miyakejs.html.xdomain.jp/img/24.jpg');background-size:85%;background-repeat:no-repeat;background-position:center;background-color:#356;">
<div title="この部分はdiv要素" style="position:absolute;bottom:0px;right:0%;width:70%;text-align:left;padding:15px;margin:15px;line-height:1.2em;color:#fff;font-size:80%;background-color:rgba(0,0,0,0.6);border-radius:10px;transition:0.5s;word-break:break-word;">
　これはdiv要素の背景写真を利用したBLOCKデータです。この様に文章などのコンテンツを差し込む事ができます。
スタイルシートを、background-image:url('写真のURL');background-repeat:no-repeat;background-position:center;background-size:～;などとしてください。
このデータの背景画像のbackground-sizeは85%。
</div>
</div>

<div class="koboData" title="サルスベリ">
<div style="width:100%;max-width:720px;height:100%;background-color:#ddd;border:1px solid #ccc;box-sizing:border-box;text-align:center;margin:auto;">
<img style="width:60%;margin-top:25px;" src="http://miyakejs.html.xdomain.jp/img/20m.jpg" />
<div style="font-weight:bold;font-size:90%;margin:1% auto;">定型カード型のデータ</div>
<div style="width:90%;text-align:left;font-size:80%;margin:auto;">　ここにカードのコメントを書いてください。カードの中身はHTMLで装飾可能です。このサンプルでは「写真」「題名」「コメント」の３要素で作っていますが、自由にデザインを変更できます。ただし、スマホで表示したときにコンテンツがはみ出さない様に注意してください。</div>
</div>
</div>

<div class="koboData" title="これはdiv要素で、写真は背景画像。" title="ビヨウヤナギ；div要素" style="background:url('http://miyakejs.html.xdomain.jp/img/9.jpg') center center no-repeat #eed;background-size:cover;">
<div style="position:absolute;top:60px;left:0px;text-align:left;padding:20px;color:#fff;font-size:80%;background-color:rgba(0,0,0,0.4);">
　データにdiv要素を使用すると中身をHTMLで自由に編集でき、内側にこの様なdiv要素を作って文章やリンクや画像やバナーなどを入れる事もできます。データはクラス名koboDataです。背景画像のスタイルをbackground-size:cover;にして写真を枠全体に表示しています。
</div>
</div>

<a class="koboData" href="http://miyakejs.html.xdomain.jp/img/8.html" target="_blank" title="ツワブキ；a要素" style="background:url('http://miyakejs.html.xdomain.jp/img/8.jpg') center center no-repeat #eed;background-size:cover;">
<div title="この部分はa要素の内包div要素" style="position:absolute;top:0px;right:0%;width:50%;text-align:left;padding:15px;margin:15px;line-height:1.2em;color:#fff;font-size:80%;background-color:rgba(0,0,0,0.6);border-radius:10px;transition:0.5s;word-break:break-word;">
　これはa要素の背景写真を利用したバナーデータです。背景画像のスタイルをbackground-size:cover;にして写真を枠全体に表示しています。サムネイル用の写真は、統一したサイズのIMG要素で作り、クラス名「gal_base」のdiv要素の中にスライドショーと同じ順番で書いてください。
</div>
</a>

<div class="koboData" title="これはdiv要素で、写真は背景画像。" title="アガパンサス；div要素" style="background:url('http://miyakejs.html.xdomain.jp/img/11.jpg') center center no-repeat #ccb;background-size:contain;">
<div style="position:absolute;bottom:20px;left:0px;text-align:left;padding:20px;color:#fff;font-size:80%;background-color:rgba(0,0,0,0.4);">
　データにdiv要素を使用すると中身をHTMLで自由に編集でき、内側にこの様なdiv要素を作って文章やリンクや画像やバナーなどを入れる事もできます。データはクラス名koboDataです。背景画像のスタイルをbackground-size:contain;にして写真を枠内に収めて表示しています。
</div>
</div>

<div class="koboData" title="あかまんま；div要素" style="background-image:url('http://miyakejs.html.xdomain.jp/img14/25.jpg');background-repeat:no-repeat;background-position:center;background-size:contain;background-color:#eed;border:20px solid #eed;">
<div title="この部分はdiv要素" style="position:absolute;bottom:0px;right:0%;width:70%;text-align:left;padding:15px;margin:15px;line-height:1.2em;color:#fff;font-size:80%;background-color:rgba(0,0,0,0.6);border-radius:10px;word-break:break-word;">
　これはdiv要素の背景写真を利用したBLOCKデータです。
このデータの背景画像のbackground-sizeはcontain。
スタイルborder:20px solid #eed;で背景と同色の枠を作っています。
</div>
</div>

<div class="koboData" title="これはdiv要素で、写真は背景画像。" title="ハナミズキ；div要素" style="background:url('http://miyakejs.html.xdomain.jp/img/26.jpg') center center no-repeat #eed;background-size:cover;">
<div style="position:absolute;bottom:0px;left:0px;text-align:left;padding:20px;color:#fff;font-size:80%;background-color:rgba(0,0,0,0.4);">
　データにdiv要素を使用すると中身をHTMLで自由に編集でき、内側にこの様なdiv要素を作って文章やリンクや画像やバナーなどを入れる事もできます。データはクラス名koboDataです。背景画像のスタイルをbackground-size:cover;にして写真を枠全体に表示しています。
</div>
</div>

<a class="koboData" href="http://miyakejs.html.xdomain.jp/img/6.html" target="_blank" title="ルドベキア；a要素で背景画像は80%" style="background-image:url('http://miyakejs.html.xdomain.jp/img/6.jpg');background-size:80%;background-repeat:no-repeat;background-position:center;background-color:#966;">
</a>

<div class="koboData" title="ガザニア；div要素の定形カード型">
<div style="width:100%;max-width:720px;height:100%;background-color:#ddd;border:1px solid #ccc;box-sizing:border-box;text-align:center;margin:auto;">
<img style="width:60%;margin-top:25px;" src="http://miyakejs.html.xdomain.jp/img/4m.jpg" />
<div style="font-weight:bold;font-size:90%;margin:1% auto;">定型カード型のデータ</div>
<div style="width:90%;text-align:left;font-size:80%;margin:auto;">　ここにカードのコメントを書いてください。カードの中身はHTMLで装飾可能です。このサンプルでは「写真」「題名」「コメント」の３要素で作っていますが、自由にデザインを変更できます。ただし、スマホで表示したときにコンテンツがはみ出さない様に注意してください。</div>
</div>
</div>

</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;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("

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

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

　レスポンシブデザインへの対応が高さ維持型。サムネイルギャラリーがスライドショーの上部にあるタイプ。

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

/** 表示部分。高さ維持型はheigtht:～;で高さを固定する。 **/
.cpBlHD_nsg_v3b_zdw_os .base{position:relative;top:0;left:0;width:100%;height:480px;}

/** 個々のデータ。 **/
.cpBlHD_nsg_v3b_zdw_os .base .koboData{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;opacity:0;font-size:16px;box-sizing:border-box;}
.cpBlHD_nsg_v3b_zdw_os .base .koboData .slide-contents-title{font-size:50px;color:#888;font-family:'Times';color:#900;}
@media screen and (max-width: 600px){.cpBlHD_nsg_v3b_zdw_os .base .koboData{font-size:12px;}.cpBlHD_nsg_v3b_zdw_os .base .koboData .slide-contents-title{font-size:40px;}}

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

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

</style>

</div>

</div>

</div>

・　ポラロイドorチェキ風スライドショーギャラリー: 　写真の枠を白色にしているためスライドショーの親要素の背景色をベージュにしてありますが、下部のソースコードにはその部分はありません。ご自身のページのデザインに合わせて、スライドショーを張り付ける部分のスタイルシートで背景色を設定してください。