[オープン][マルチ][レスポンシブ][アクティブ][シャッフル]汎用スライドショーcpMHD_nhsl_3b_zdwp

・　サンプルの説明: 　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。; 　写真でも、写真や文章などをひとまとめにしたBLOCK要素でも、スライドさせる事ができるマルチスライドショーです。操作ボタンは3個で、モバイルではサムネイル部分のタップ、パソコンではスライドショーにマウスを重ねると出てきます。アニメーションはです。同じスライドショーでアニメーションだけを変更したい方は、このページ最下部「別のアニメーションを見る」をご参照ください。; 　このスライドショーは、スライドショーを表示しているWindowを非アクティブにする（最前面ではなくする・選択を外す・blurにする）と停止し、アクティブに戻す（最前面にする・選択する・focusにする）と再開します。即ち、別のタブを開いたり、別のWindowで別の作業すると、スライドショーは一時停止して待機状態になります。スライドショーの写真をクリックして、別のタブに設定したページを開いた時も一時停止します。スライドショーのタブやWindowをクリックしてアクティブに戻すと再開します。この機能は「カスタマイズ」でON／OFFを設定できます。; 　このスライドショーは、記述したスライドショーデータをページを開いた時点でシャッフルする事ができます。即ち、スライドショーがあるページを開くたびに異なる順番で実行できます。「記述した順番で実行」または「シャッフルして実行」を「カスタマイズ」で選択できます。; 　このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。個人・商用を問わず無料で自由に使用できます。

レスポンシブデザインへの対応
アスペクト比維持型
	⇔
高さ維持型
	⇔
高さ維持型
	⇔
アスペクト比維持型
	⇔

・　写真やバナーのスライドショー: 　同じサイズ（アスペクト比が同じならば可）の写真を用意してください。写真はimg要素でもdivなどBLOCK要素の背景画像としてでも使用できます。クラス名"base"のdiv要素の中にクラス名を"koboData"の要素として記述してください。バナーにする時は、クラス名"koboData"のa要素を使い、写真は背景画像にしてください。 background-sizeの値は"cover"です。レスポンシブデザインへの対応はアスペクト比維持型にしてください。表示部分のスタイルシートpadding-top:～%;の～部分に「表示部分の高さ／表示部分の幅」を％で表した数値を書いてください。

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

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

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

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

</style>

</div>

</div>

,sh=function(n,t,i,r){for(var s,f="."+i,u=n.querySelector("."+t),e=u.querySelectorAll(f),o=e.length;o;)s=Math.floor(Math.random()*o--),u.appendChild(e[s]),o==0?(n.m=u.querySelectorAll(f),r()):e=u.querySelectorAll(f)},mt=function(n){var h=n.querySelector(".base"),c=n.querySelector(".but_sl"),v=n.querySelector(".mae"),p=n.querySelector(".tugi"),u=h.querySelectorAll(".koboData"),g=u.length,f,t=0,w=0,b=1,l=!1,r=!1,e=Copyright,a=HomePage,k=MailAddress,nt=ContentType,s={iy:g,ya:ya,ke:ds},i=document.createElement("a"),o=function(n){l||(l=!0,b=n>t?1:-1,w=t,t=n,t+=s[a.substr(8,2)],t%=s[k.substr(1,2)],document.querySelector(".c_"+e).href.substr(8,2)===e.substr(1,2)&&setTimeout(tt,50))},tt=function(){clearTimeout(f);af(n,h,ya,u[t],u[w],b);setTimeout(function(){y&&!r&&d();l=!1},s[k.substr(2,2)]+100)},d=function(){clearTimeout(f);f=setTimeout(function(){o(t+1)},s[a.substr(11,2)])};n.mp=document.createElement("div");h.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";v&&(v.onclick=function(){o(t-1)});p&&(p.onclick=function(){o(t+1)});c&&(c.innerHTML=y?"pause":"play",c.onclick=function(){y?(clearTimeout(f),y=!1,this.innerHTML="play"):(y=!0,this.innerHTML="pause",o(t+1))});u[t].style.zIndex=2;u[t].style.opacity=1;window.addEventListener("load",function(){document.querySelector(".c_"+e)||(document.body.appendChild(i),i.setAttribute("href",a),i.setAttribute("class","c_"+e),i.innerHTML=nt+" (C) "+e,i.style.display="none",i.style.fontSize="12px",i.style.width="250px",i.style.margin="1ex auto");fb&&(window.addEventListener("blur",function(){y&&!r&&(r=!0,clearTimeout(f))},!1),window.addEventListener("focus",function(){y&&r&&(r=!1,o(t+1))},!1));y&&!r&&d()})};sf?sh(n,"base","koboData",function(){mt(n)}):mt(n)}(document.getElementById("

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

・　BLOCK要素のスライドショー: 　BLOCK要素の中身はHTMLで自由に編集できます。内側にdiv要素を作って文章やリンクや画像やバナーなどを入れる事もできます。 BLOCK要素のクラス名"koboData"です。背景画像のスタイルをbackground-size:cover;にすれば、写真を枠全体に表示してあふれる部分はトリミングされます。 background-size:contain;にすれば写真を枠内に収めて表示できます。レスポンシブデザインへの対応は基本的に（例外は下部に記載の定形型など）高さ維持型です。表示部分のスタイルシートをheight:～px;の様に値を固定してください。

/** スライドショー全体。max-width:～px;に最大表示サイズを書く。 **/
.cpMHD_nhsl_v3b_zdwp_os{position:relative;top:0;left:0;width:100%;max-width:700px;margin:auto;overflow:hidden;}

/** 表示部分。高さ維持型のためheight:～px;は固定。 **/
.cpMHD_nhsl_v3b_zdwp_os .base{position:relative;top:0;left:0;width:100%;height:480px;}

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

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

</style>

<div class="koboData" title="Top" data-thumb="http://miyake.g2.xrea.com/img/10s.jpg">
<table style="width:100%;height:100%;font-size:12px;font-family:'メイリオ';text-align:center;background-color:#eed;">
<tr>
<td style="width:35%;">
<span style="font-size:50px;color:#888;font-family:'Times';color:#900;">Photo</span>
<br />
My favorite photographs
<br />
<br />
<img src="http://miyake.g2.xrea.com/img/10s.jpg" style="width:50%;" />
<br />
<br />
<a target="_blank" href="http://miyake.g2.xrea.com/index.html" title="">HOME</a>
<br />
</td>
<td style="width:65%;vertical-align:top;">
<br />
<br />
<ul style="width:80%;text-align:left;line-height:1.8em;word-break:break-word;">
<li>
このスライドショーはBLOCKコンテンツ型です。div要素などの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://miyake.g2.xrea.com/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://miyake.g2.xrea.com/img/1.html" target="_blank" title="アルストロメリア；a要素" style="background:url('http://miyake.g2.xrea.com/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://miyake.g2.xrea.com/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>

<a class="koboData" href="http://miyake.g2.xrea.com/img/10.html" target="_blank" title="カタバミ；a要素" style="background:url('http://miyake.g2.xrea.com/img/10.jpg') center center no-repeat #eed;background-size:cover;">
</a>

<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://miyake.g2.xrea.com/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://miyake.g2.xrea.com/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://miyake.g2.xrea.com/img/8.html" target="_blank" title="ツワブキ；a要素" style="background:url('http://miyake.g2.xrea.com/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://miyake.g2.xrea.com/img/11.jpg') center center no-repeat #eed;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://miyake.g2.xrea.com/img7/5.jpg');background-repeat:no-repeat;background-position:center;background-size:contain;background-color:#eed;">
<div title="この部分はdiv要素" style="position:absolute;bottom:0px;right:0%;width:80%;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データです。スライドショーのデータはクラス名「base」のdiv要素の中に順番に書いてください。IMGデータ・バナーデータ・BLOCKデータを混在させる事ができます。
このデータの背景画像のbackground-sizeはcontain。
</div>
</div>

<div class="koboData" title="これはdiv要素で、写真は背景画像。" title="ハナミズキ；div要素" style="background:url('http://miyake.g2.xrea.com/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://miyake.g2.xrea.com/img/6.html" target="_blank" title="ルドベキア；a要素で背景画像は80%" style="background-image:url('http://miyake.g2.xrea.com/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://miyake.g2.xrea.com/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>

・　ポラロイドorチェキ風スライドショー: 　定形デザインのBLOCK要素を使用したスライドショーです。写真はdiv要素の背景画像です。内部にクラス名"inner_com"のdiv要素を入れ、コメントやリンクを書いています。 BLOCKスライドショーですがレスポンシブデザインへの対応はアスペクト比維持型です。表示部分のスタイルシートpadding-top:～%;の～部分に「表示部分の高さ／表示部分の幅」を％で表した数値を書いてください。; 　写真の枠を白色にしているためスライドショーの親要素の背景色をベージュにしてありますが、下部のソースコードにはその部分はありません。ご自身のページのデザインに合わせて、スライドショーを張り付ける部分のスタイルシートで背景色を設定してください。