Sun-A国際学院
写真のタイトル
 モバイルフレンドリーなページ作りのため、パソコンでは大きい写真、スマホでは小さい写真、 に自動的に交換するガイド付きBLOCKスライドショーです。 Windowいっぱいに表示されますが、固定サイズで表示する事もできます。 もちろん、スライドショーだけのページを作りIFRAMEで他のページに貼り付ける事もできます。
 使用する写真は、同じ画像の大小だけではなく、このページの様に別々の写真も使えます。 ただし、Windowの幅を測って写真を取り換えますので、 パソコンでもWindow幅を設定した数値以下に縮めると、スマホ用の写真が表示されます。 スライドショーのデータはclass="koboData"のdiv要素の背景に画像を表示し、 中にdiv要素の文章を入れたBLOCK型です。 class="koboData"のdiv要素の中は自由に編集できます。
オプション部分の説明
data-autoplay = '-1' 正の整数は自動、負の整数は手動。絶対値が0または総数以上はランダム、それ以外は開始位置。
data-slidetime = '5000' スライドショー速度(ミリ秒)。
data-anitime = '1000' アニメーション時間(ミリ秒)。
data-sc = '0.7' ズーム比率で0以上の数値で、0~1は縮小ズーム、1はズームなし、1以上は拡大ズーム。
data-teishi = 'pause' 停止ボタンに表示する文字や画像。
data-kaishi = 'play' 開始ボタンに表示する文字や画像。
data-selgc = '#f00' ガイドボタンの選択時のボーダー色。
data-defgc = '#ccc' ガイドボタンの初期のボーダー色。
写真のタイトル
 パソコン用とスマホ用の写真を作り、下記のソースコードに写真のURLを書き、 ホームページのソースの指定個所に貼り付けてください。 ライブラリやプラグインのダウンロードは不要です。 ただし、IE9以前等の古いブラウザではアニメーションなしになります。 写真のURLデータはHEAD内のスタイルシートに、パソコン用とスマホ用の両方を記述します。 同時にHTMLの写真表示部分に、div要素を写真の枚数分作り、中身を記述してください(ソース参照)。
写真のタイトル
 写真数に制限はありません。 サイズの制限もありませんが、Windowをカバーする大きさにリサイズして表示されます。 即ち、Windowのアスペクト比と写真のアスペクト比が一致しない場合は、 縦・横いずれかの両端がトリミングされます。 もちろん、 スタイルシートの変更(background-size、cover(全画面)とcontain(内包)を選択可能)で、 Windowに収まるサイズで表示する事もできます。
写真のタイトル
 一つのページに複数個のスライドショーを配置したい場合は、スライドショーだけのページを複数個作り、 別々の写真を設定し、IFRAMEで親ページに貼り付けてください。
停止