[オープン][マルチ][レスポンシブ]横入れ替わりスライドショーギャラリー集cpMHDs_nsg_ire_x

・　サンプルの説明: 　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。; 　写真でも、写真や文章などをひとまとめにしたBLOCK要素でも、スライドさせる事ができるスライドショーギャラリーです。アニメーションは「横入れ替わり」です。他のアニメーションへのリンクはこのページ最下部にあります。レスポンシブデザインへの対応で、アスペクト比維持型（同じアスペクト比のimg要素の写真を直接使用できる）と高さ維持型（文章が多い場合ははみ出しを防ぐ効果があるが、写真を表示する場合はimg要素を使えない為、BLOCK要素の背景で表示する）を掲載しています。アスペクト比維持型と高さ維持型はスタイルシートで区別している為スクリプト部分は共通です。スライドショーの操作ボタンは三つ型で、モバイルではタップ、パソコンではマウスを重ねると出てきます。; 　BLOCK要素で写真を表現する場合その背景画像に写真を設定します。スタイルbackground-size:cover;で画面いっぱいに表示し、あたかも写真のスライドショーの様にする事もできます。また、background-size:contain;にすれば、形の違う写真を一定の枠内に表示できます。; 　サムネイル一覧は、全サムネイルをスライドショー幅いっぱい横一列に表示します。即ち、写真の数が少なければサムネイルは大きくなり、写真の数が多くなるほどサムネイルは小さくなります。デザインを壊さない程度の数を使用してください。なお、サムネイル一覧がいらない時はこのページ最下部を参照してください。; 　スライドショーデータは「ここからデータ。↓」以下のクラス名koboDataの要素です。サムネイルの写真データはクラス名"gal_base"のdiv要素の中のimg要素です。すべて同じアスペクト比の画像を用意してください。このページでは横縦比が4:3の画像を使っています。それぞれ同じ順番で同じ数のデータを記述してください。; 　このスライドショーギャラリーは、個人・商用を問わず無料で永久に自由に使用できます。掲載しているソースコードのみで作動し、jQueryなどのライブラリー本体やそのプラグインも、Javascripやcssの外部ファイルも不要です。

アスペクト比維持型
	⇔
高さ維持型
	⇔

・　アスペクト比維持型: 　レスポンシブデザインへの対応がアスペクト比維持型のため、表示部分と同じサイズならばimg要素を使用できる。表示部分を写真（img要素）と同じアスペクト比にするには、表示部分のスタイルシートでpadding-top:～%;に写真の（高さ／幅）を％で書く。

/** ページ全体。必要に応じて書き換えてください。 **/
html,body,div{margin:0;padding:0;border:0;}
body{font-family:"メイリオ";text-align:center;}

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

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

/** 個々のデータ。 **/
.cpMHDs_nsg_ra_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;}
@media screen and (max-width: 600px){.cpMHDs_nsg_ra_os .base .koboData{font-size:12px;}}

/** ボタン。transition-duration:～s;は出没アニメーション速度。 **/
.cpMHDs_nsg_ra_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.4);}
.cpMHDs_nsg_ra_os:hover .but_sl{width:80px;height:80px;opacity:1;line-height:80px;font-size:16px;}
.cpMHDs_nsg_ra_os .mae{position:absolute;top:0;bottom:0;left:10%;margin:auto 0px;z-index:20;color:#fff;background-color:rgba(0,0,0,0.4);border-radius:50%;height:50px;width:50px;cursor:pointer;box-sizing:border-box;opacity:0;transition-duration:.5s;}
.cpMHDs_nsg_ra_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;}
.cpMHDs_nsg_ra_os:hover .mae{left:20%;opacity:1;}
.cpMHDs_nsg_ra_os .tugi{position:absolute;top:0;bottom:0;right:10%;margin:auto 0px;z-index:20;color:#fff;background-color:rgba(0,0,0,0.4);border-radius:50%;height:50px;width:50px;cursor:pointer;box-sizing:border-box;opacity:0;transition-duration:.5s;}
.cpMHDs_nsg_ra_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;}
.cpMHDs_nsg_ra_os:hover .tugi{right:20%;opacity:1;}

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

</style>

<img class="koboData" src="http://miyakejs.html.xdomain.jp/img/18.jpg" title="ツバキ；img要素" />

<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>

<a class="koboData" href="http://miyakejs.html.xdomain.jp/img/10.html" target="_blank" title="カタバミ；a要素" style="background:url('http://miyakejs.html.xdomain.jp/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://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>

<img class="koboData" src="http://miyakejs.html.xdomain.jp/img/9.jpg" title="ビヨウヤナギ；img要素" />

<a class="koboData" href="http://miyakejs.html.xdomain.jp/img/8.html" target="_blank" title="ツワブキ；a要素" style="background-image:url('http://miyakejs.html.xdomain.jp/img/8.jpg');background-size:conver;">
<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>

<img class="koboData" src="http://miyakejs.html.xdomain.jp/img/11.jpg" title="アガパンサス；img要素" />

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

<img class="koboData" src="http://miyakejs.html.xdomain.jp/img/26.jpg" title="ハナミズキ；img要素" />

<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>

Copyright = "Miyake_kobo",
    HomePage = "http://miyake.g2.xrea.com/",
    MailAddress = "miyake_kobo@yahoo.co.jp",
    ContentType = "Open version Slideshow",

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

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

・　高さ維持型: 　レスポンシブデザインへの対応が高さ維持型のためimg要素は使用できない。写真を表現するときは、背景を写真にしたBLOCK要素を使う。表示部分のスタイルシートheigtht:～;で高さを固定する。

/** ページ全体。必要に応じて書き換えてください。 **/
html,body,div{margin:0;padding:0;border:0;}
body{font-family:"メイリオ";text-align:center;}

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

/** クラス名「cpMHDs_nsg_rh_os」の表示部分。 **/
/** 高さ固定型はheigtht:～;で高さを固定する。ただし、IMG要素データは使用できない。 ***/
.cpMHDs_nsg_rh_os .base{position:relative;top:0;left:0;width:100%;height:480px;}

/** 個々のデータ。 **/
.cpMHDs_nsg_rh_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;}
@media screen and (max-width: 600px){.cpMHDs_nsg_rh_os .base .koboData{font-size:12px;}}

/** ボタン。transition-duration:～s;は出没アニメーション速度。 **/
.cpMHDs_nsg_rh_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.4);}
.cpMHDs_nsg_rh_os:hover .but_sl{width:80px;height:80px;opacity:1;line-height:80px;font-size:16px;}
.cpMHDs_nsg_rh_os .mae{position:absolute;top:0;bottom:0;left:10%;margin:auto 0px;z-index:20;color:#fff;background-color:rgba(0,0,0,0.4);border-radius:50%;height:50px;width:50px;cursor:pointer;box-sizing:border-box;opacity:0;transition-duration:.5s;}
.cpMHDs_nsg_rh_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;}
.cpMHDs_nsg_rh_os:hover .mae{left:20%;opacity:1;}
.cpMHDs_nsg_rh_os .tugi{position:absolute;top:0;bottom:0;right:10%;margin:auto 0px;z-index:20;color:#fff;background-color:rgba(0,0,0,0.4);border-radius:50%;height:50px;width:50px;cursor:pointer;box-sizing:border-box;opacity:0;transition-duration:.5s;}
.cpMHDs_nsg_rh_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;}
.cpMHDs_nsg_rh_os:hover .tugi{right:20%;opacity:1;}

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

</style>

<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>

<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 #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要素で、写真は背景画像。" 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>

</div>

</div>

</div>

・　サムネイル一覧がいらない時: 　アスペクト維持型・高さ維持型ともにソース中<!-- ここからサムネイル一覧。 --!>から<!-- ここまでサムネイル一覧。 --!>までを削除してください。スライドショー部分だけになります。

</div>

</div>

・　別のアニメーションを見る: 前進と後進で動作方向が反転するもの。
　スクロール横　スクロール縦　視差スクロール横　視差スクロール縦　横転がり　縦転がり　横入れ替わり　縦入れ替わり　 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縦ズームスクロール　ランダム縦横ズームコーナー回転