[オープン][BLOCK][レスポンシブ][アクティブ][シャッフル]ドラッグ・フリック・マウスホイール連動型スライドショーギャラリーcpBlHD_nhsg_dfw_zdwp

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

高さ維持型でレスポンシブデザインに対応
	⇔

・　ドラッグ・フリック・マウスホイール連動型スライドショーギャラリー

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

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

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

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

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

/** ボタン。 **/
.cpBlHD_nhsg_dfw_dw_os .mae, .cpBlHD_nhsg_dfw_dw_os .tugi{width:30px;height:30px;border-radius:50%;cursor:pointer;border:0;}
.cpBlHD_nhsg_dfw_dw_os .but_sl{width:60px;height:30px;border-radius:10px;cursor:pointer;border:0;}

/** ボタンの外枠。 **/
.cpBlHD_nhsg_dfw_dw_os .con{position:absolute;top:10px;right:10px;z-index:20;padding:6px;color:#fff;font-size:14px;background-color:rgba(0,0,0,0.6);border-radius:19px;transition:0.5s;opacity:0.1;}
.cpBlHD_nhsg_dfw_dw_os:hover .con{opacity:1;}

</style>

<a class="koboData" href="http://miyakejs.html.xdomain.jp/img/18.html" target="_blank" title="ツバキ；a要素で背景画像は70%" style="background-image:url('http://miyakejs.html.xdomain.jp/img/18.jpg');background-size:70%;background-repeat:no-repeat;background-position:center;background-color:#9aa;">
</a>

<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" data-thumb="http://miyakejs.html.xdomain.jp/img/10s.jpg" title="Top">
<table style="width:100%;height:100%;text-align:center;background-color:#ddc;">
<tr>
<td style="width:40%;">
<span style="color:#888;font-weight:bold;color:#900;">写真と文章があるBLOCK</span>
<br />
<br />
<img src="http://miyakejs.html.xdomain.jp/img/10s.jpg" style="width:50%;" />
<br />
<br />
<a target="_blank" href="http://miyake.g2.xrea.com/index.html" title="">HOME</a>
<br />
↑
<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要素などの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 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 #333;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>

<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;">
<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://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 class="con">
<button class="mae"><</button>
<button class="but_sl">pause</button>
<button class="tugi">></button>
</div>

</div>

,t={SDA:function(n){n.preventDefault?n.preventDefault():n.returnValue=!1},XF:function(n,t,i,r){var f,e,u=!1;n.addEventListener("touchstart",function(){f=event.changedTouches[0].pageX;u=!0},!1);n.addEventListener("touchmove",function(n){u&&(n.preventDefault(),e=event.changedTouches[0].pageX,e-f>r?(u=!1,i()):e-f<-r&&(u=!1,t()))},!1);n.addEventListener("touchend",function(){u&&(u=!1)},!1)},YF:function(n,t,i,r){var f,e,u=!1;n.addEventListener("touchstart",function(){f=event.changedTouches[0].pageY;u=!0},!1);n.addEventListener("touchmove",function(n){u&&(n.preventDefault(),e=event.changedTouches[0].pageY,e-f>r?(u=!1,i()):e-f<-r&&(u=!1,t()))},!1);n.addEventListener("touchend",function(){u&&(u=!1)},!1)},XD:function(n,i,r,u){var f,e,o=!1,s=navigator.userAgent;n.addEventListener("mousedown",function(n){s.search(/iPhone/)!=-1||s.search(/iPad/)!=-1||s.search(/iPod/)!=-1||s.search(/Android/)!=-1||n.preventDefault();n.returnValue=!1;f=document.all?event.x:n.pageX;o=!0},!1);n.addEventListener("mousemove",function(s){o&&(s.preventDefault?s.preventDefault():s.returnValue=!1,e=document.all?event.x:s.pageX,e-f>u?(o=!1,r()):e-f<-u&&(o=!1,i()),(e-f>10||e-f<-10)&&n.addEventListener("click",t.SDA,!1))},!1);n.addEventListener("mouseup",function(){((e-f>10||e-f<-10)&&setTimeout(function(){n.removeEventListener("click",t.SDA,!1)},100),o)&&(o=!1)},!1)},YD:function(n,i,r,u){var f,e,o=!1,s=navigator.userAgent;n.addEventListener("mousedown",function(n){s.search(/iPhone/)!=-1||s.search(/iPad/)!=-1||s.search(/iPod/)!=-1||s.search(/Android/)!=-1||n.preventDefault();n.returnValue=!1;f=document.all?event.y:n.pageY;o=!0},!1);n.addEventListener("mousemove",function(s){o&&(t.SDA(s),e=document.all?event.y:s.pageY,e-f>u?(o=!1,r()):e-f<-u&&(o=!1,i()),(e-f>10||e-f<-10)&&n.addEventListener("click",t.SDA,!1))},!1);n.addEventListener("mouseup",function(){((e-f>10||e-f<-10)&&setTimeout(function(){n.removeEventListener("click",t.SDA,!1)},100),o)&&(o=!1)},!1)},MW:function(n,t,i){var r=function(n){var r=window.event||n,u=r.detail?r.detail*-120:r.wheelDelta;if(u<=-120?t():i(),r.preventDefault)r.preventDefault();else return!1},u=/Firefox/i.test(navigator.userAgent)?"DOMMouseScroll":"mousewheel";n.addEventListener(u,r,!1)}},r=function(n,t,i,r,u){for(var f,c="."+r,e=n.querySelector("."+t),o=n.querySelector("."+i),s=e.querySelectorAll(c),l=o.querySelectorAll("img"),h=s.length;h;)f=Math.floor(Math.random()*h--),e.appendChild(s[f]),o.appendChild(l[f]),h==0?u():(s=e.querySelectorAll(c),l=o.querySelectorAll("img"))},i=function(n){var f=n.querySelector(".base"),v=n.querySelector(".gal"),w=n.querySelector(".but_sl"),nt=n.querySelector(".mae"),tt=n.querySelector(".tugi"),c=f.querySelectorAll(".koboData"),s=v.querySelectorAll("img"),b=c.length,l,i=0,k=0,u=1,d=!1,h=!1,a=Copyright,g=HomePage,it=MailAddress,ut=ContentType,p={iy:b,ya:da,ke:ds},e=document.createElement("a"),r=function(n,t){d||(d=!0,u=n>i?1:-1,k=i,i=n,i+=p[g.substr(8,2)],i%=p[it.substr(1,2)],document.querySelector(".c_"+a).href.substr(8,2)===a.substr(1,2)&&setTimeout(function(){ft(t)},50))},ft=function(t){clearTimeout(l);af(n,f,da,c[i],c[k],u,t);v&&(s[k].style.opacity=1,s[i].style.opacity=.3);setTimeout(function(){y&&!h&&rt();d=!1},p[it.substr(2,2)]+100)},rt=function(){clearTimeout(l);l=setTimeout(function(){r(i+1)},p[g.substr(11,2)])},o;if(n.mp=document.createElement("div"),f.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)for(o=0;o<b;o++)s[o].style.width=100/b+"%",s[o].ind=o,s[o].onclick=function(){this.ind!=i&&r(this.ind)};nt&&(nt.onclick=function(){r(i-1,"x")});tt&&(tt.onclick=function(){r(i+1,"x")});w&&(w.innerHTML=y?"pause":"play",w.onclick=function(){y?(clearTimeout(l),y=!1,this.innerHTML="play"):(y=!0,this.innerHTML="pause",r(i+1))});typeof t!="undefined"&&t.XF(f,function(){u=1;r(i+1,"x")},function(){u=-1;r(i-1,"x")},50);typeof t!="undefined"&&t.XD(f,function(){u=1;r(i+1,"x")},function(){u=-1;r(i-1,"x")},50);typeof t!="undefined"&&t.YF(f,function(){u=1;r(i+1,"y")},function(){u=-1;r(i-1,"y")},50);typeof t!="undefined"&&t.YD(f,function(){u=1;r(i+1,"y")},function(){u=-1;r(i-1,"y")},50);typeof t!="undefined"&&t.MW(f,function(){u=1;r(i+1,"y")},function(){u=-1;r(i-1,"y")});v&&(s[i].style.opacity=.3);c[i].style.zIndex=2;c[i].style.opacity=1;window.addEventListener("load",function(){document.querySelector(".c_"+a)||(document.body.appendChild(e),e.setAttribute("href",g),e.setAttribute("class","c_"+a),e.innerHTML=ut+" (C) "+a,e.style.display="block",e.style.fontSize="12px",e.style.width="250px",e.style.margin="1ex auto");fb&&(window.addEventListener("blur",function(){y&&!h&&(h=!0,clearTimeout(l))},!1),window.addEventListener("focus",function(){y&&h&&(h=!1,r(i+1))},!1));y&&!h&&rt()})};sf?r(n,"base","gal","koboData",function(){i(n)}):i(n)}(document.getElementById("

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

・　別のアニメーションを見る: ドラッグ・フリック・マウスホイール操作で縦横連動するもの。
　縦横スクロール　縦横視差スクロール　縦横入れ替わり　縦横転がり　縦横3D回転　縦横3D裏返し　縦横3D入れ替わり　縦横3D逆入れ替わり　縦横CUBE回転　縦横CUBE枠内回転　縦横コーナー回転　縦横連動ランダムズーム3D回転1 　縦横連動ランダムズーム3D回転2