・　サンプルの説明

　このページは文字コード「UTF-8」で書いています。ソースを他の文字コードで書かれたページに貼り付ける時は、貼り付けた後に文字コードを統一してください（「名前を付けて保存」で文字コードを指定するなど）。異なる文字コードが混在すると、文字化けの原因になります。

　同じサイズ（同じアスペクト比であれば可）の写真を使うスライドショーです。 スライドショー用の写真はクラス名"base"のdiv要素の中に、クラス名"koboData"のimg要素で記述してください。

　操作は、写真のクリックでスライドショー停止、再度クリックで再開、中央部のダブルクリックで次の写真に進みます。

　表示部分のスタイルシートpadding-top:～%;の～部分に、「写真の高さ／写真の幅」を％で表した数値を書いてください。 小さいデバイスで表示してもアスペクト比を維持して縮小してレスポンシブデザインに対応できます。

　アニメーションは16種類（4種類のアニメーション x 縦横の2方向 x 前進後退の2動作）の3Dアニメーションがランダムに実行されます。 No1とNo2では一部アニメーション種類が異なります。

　このスライドショーは掲載しているソースコードのみで動きます。 jQueryなどのライブラリーやプラグインも、Javascripやcssの外部ファイルも不要です。 個人・商用を問わず無料で自由に使用できますが、スクリプト内「書き換える部分」の下にある著作権表記を消す事を禁止します。 有料版はありません。

⇔

<!---ここからスタイルシート。↓---> <style type="text/css"> /** 全体。max-width:～px;に最大表示サイズを書く。 **/ .cpSHDs_n001_bcl_msgasAll_os{position:relative;top:0px;left:0px;width:80%;max-width:640px;margin:auto;overflow:hidden;} /** 表示部分。アスペクト比維持型はpadding-top:～%;に表示部分の（高さ／幅）を％で書く。 **/ .cpSHDs_n001_bcl_msgasAll_os .base{position:relative;top:0px;left:0px;padding-top:75%;} /** 個々のデータ。 **/ .cpSHDs_n001_bcl_msgasAll_os .base .koboData{position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:1;opacity:0;cursor:pointer;} </style> <!-- ここまでスタイルシート。↑ -->

・　スタイルシート（共通）

スライドショーを貼り付けるページのHEAD内に以下をコピーしてください。 <!---ここからスクリプト。↓---> <script type="text/javascript"> "use strict";!function(n){var //--------- 書き換える部分↓ ---------- ke = 5000, //--スライドショー速度（ミリ秒単位）。 ya = 1200, //--アニメーション速度（ミリ秒単位）。 //--------- 書き換える部分↑ ---------- Copyright = "Miyake_kobo", HomePage = "https://miyake.cloudfree.jp/", MailAddress = "miyake_kobo@yahoo.co.jp", ContentType = "Open version Slideshow"; </script> <!---ここまでスクリプト。↑--->

・　16種類（4種類 x 縦横 x 前進後退）の3Dアニメーションをランダムに No.1

<!---ここからスライドショー。↓---> <div class = "cpSHDs_n001_bcl_msgasAll_os" id = "sl_r_3D"> <!-- ここから表示部分。↓ --> <div class="base"> <!-- ここからスライドショーのデータ。↓ --> <img class="koboData" src="../img/18.jpg" title="ツバキ" /> <img class="koboData" src="../img/11.jpg" title="アガパンサス" /> <img class="koboData" src="../img/17.jpg" title="サザンカ" /> <img class="koboData" src="../img/10.jpg" title="カタバミ" /> <img class="koboData" src="../img/9.jpg" title="ビヨウヤナギ" /> <img class="koboData" src="../img/8.jpg" title="ツワブキ" /> <img class="koboData" src="../img/7.jpg" title="ムクゲ" /> <!-- ここまでスライドショーのデータ。↑ --> </div> <!-- ここまで表示部分。↑ --> </div> <!---ここまでスライドショー。↑--->



スライドショーを貼り付ける場所に以下をコピーしてください。画像データは必ずご自身のものに書き換えてください。
このページの見本は画像のURLを相対表記で書いているため、このままでは画像が表示されません。

・　16種類（4種類 x 縦横 x 前進後退）の3Dアニメーションをランダムに No.2

<!---ここからスライドショー。↓---> <div class = "cpSHDs_n001_bcl_msgasAll_os" id = "sl_r_z3D_xy"> <!-- ここから表示部分。↓ --> <div class="base"> <!-- ここからスライドショーのデータ。↓ --> <img class="koboData" src="../img/18.jpg" title="ツバキ" /> <img class="koboData" src="../img/11.jpg" title="アガパンサス" /> <img class="koboData" src="../img/17.jpg" title="サザンカ" /> <img class="koboData" src="../img/10.jpg" title="カタバミ" /> <img class="koboData" src="../img/9.jpg" title="ビヨウヤナギ" /> <img class="koboData" src="../img/8.jpg" title="ツワブキ" /> <img class="koboData" src="../img/7.jpg" title="ムクゲ" /> <!-- ここまでスライドショーのデータ。↑ --> </div> <!-- ここまで表示部分。↑ --> </div> <!---ここまでスライドショー。↑--->



スライドショーを貼り付ける場所に以下をコピーしてください。画像データは必ずご自身のものに書き換えてください。
このページの見本は画像のURLを相対表記で書いているため、このままでは画像が表示されません。



All Rights Reserved. Copyright (C) 2002- Miyake_kobo.