スライドショーの説明と操作方法

はじめに- 更新について


※ スライドショーは,CSS, Javascript を使った仕組みで,その内容は頻繁に更新されています.更新後,ブラウザの古いキャッシュが読み込まれた場合,それらの整合性が失われ,動作がおかしくなってしまうことがあります.

※そのような場合には,お使いのブラウザの『強制リフレッシュ・リロード』を行ってください.その操作方法は,Windows 上の Microsoft Edge の場合は Ctrl + F5 キー,あるいは Ctrl キーを押しながらリフレッシュボタンをクリック,です.他のブラウザやOS環境では,その機能の呼称や操作方法が異なる場合があります.それらのマニュアルに従ってください.

※それでもおかしい場合は,お使いのブラウザの『キャッシュ・クリア』を行ってください.その操作方法は,Windows 上の Microsoft Edge の場合は;設定 ⇒ プライバシー,検索,サービス ⇒ 閲覧データをクリア ⇒ クリアするデータの選択 ⇒ キャッシュされた画像とファイル ⇒ 今すぐクリア,です.“クリアするデータの選択”で,これ以外の項目のチェックを外すことをお忘れなく.# cookie やパスワードをクリアしてしまうと,場合によっては非常に面倒なことになりますのでご注意.


スライドショーの説明と操作法


はじめに

・スライドショーは,画面上部のボタンクリックで表示を on/off できます.表示状態は保存され,次回ページ読み込み時に再現されます.


・各スライドは,画像とその説明文(キャプション)からなります.説明文の部分は,スライド上部のスライダーボタンで表示と非表示を切り替えることができます.表示状態は保存され,次のページ読み込み時に反映されます.


・スライドは,デフォルトでは20秒で順番に自動スライドし,ループします.現在のスライド番号/スライド総数と自動切り替えの残り秒数カウントが,スライド右上に表示されます.


スライドの一時停止

・スライドの上にマウスカーソルを置くと,自動スライドが一時停止し,秒数カウントも停止します.マウスカーソルをスライドの外に移動すると再開します.


スライドの切り替わり

・スライドの切り替わりインターバル秒数は,スライド左上にある入力ボックスで変更できます.また,右にあるデフォルトボタンを押すと,デフォルトの20秒でセットされます.入力できる秒数は,3秒~3600秒(=1時間)です.この範囲外の秒数を入力すると,デフォルトの20秒に戻ります.


・スライドの自動切り替わりモードは3種類あり,上部のラジオボタンで設定できます.この他に,スライドの切り替わりをすべて手動で行うマニュアルモードがあり,右端のボタンを押して設定できます.
## デフォルトモード: 最初に表示されるスライドはページを開くたびにランダムに選ばれ,それ以降は順番に切り替わります.
## シーケンシャルモード: 先頭のスライドから順番に切り替わります.最後のスライドから最初のスライドに戻ります.
## ランダムモード: 最初に表示されるスライドはページを開くたびにランダムに選ばれ,それ以降もランダムに切り替わります.

## マニュアルモード: 最初に表示されるスライドは先頭スライドで,サムネールのクリック・ランダム移動ボタン・前後移動ボタン・マウスによるドラッグ・マウスホイールの回転によって希望するスライドに移動できます.


・スライド領域の下部左右の矢印ボタンで次の・前のスライドに移動できます.ランダム切り替わりモードの時はこのボタンは表示されません.


・スライドの下に『ページ進行バー』が表示されます.これをクリックすると該当スライドへ移動します.

・スライドの最下部にはスクロールバーが表示されます.バーの場所をクリックすると該当スライドへ移動します.“つまみ・ノブ”をドラッグするとスライドが連続的に左右に移動し,離すとスライドの位置が自動的に調整されます.

・ページ進行バーとスクロールバーは,スライド上部のスライダーボタンでその表示・非表示を切り替えることができます.表示状態は保存され,次のページ読み込み時に反映されます.


・スライドは,マウスホイールの回転でもスクロールできます.また,マウスボタンでクリック・ドラッグしても同じ操作ができます.その場合,ボタンを離すとスライドの位置が自動的に調整されます.


・スライド切り替わりモードがランダムあるいはマニュアルの時,スライド上部に『次のランダムスライド』ボタンが表示されます.クリックすると,ランダムに次のスライドに移動します.


スライド切り替わり効果

・スライドが切り替わるときの遷移効果として,『スライド』『フェード』が用意されており,スライド上部のボタンで選択できます.選択設定は保存され,次回の読み込み時にも引き継がれます.

・なお,切り替わり効果を変更すると,ページがリロードされますので,表示されているスライドやそのカウンターはリセットされて初期状態に戻ります.


スライドからのリンク

・スライド内容の元画像や参考になる画像がある場合,秒数カウンターの下に,その画像へのリンクボタンが表示されます.

・スライド内容の参考になるサイト・ページがある場合,そのサイト・ページへのリンクボタンが表示されます.

・スライドに関係する他のスライドがある場合,そのスライドにジャンプするボタンが表示されます.

・スライドに関係する『私的・北海道地質百選』のサイトがある場合,そのページにジャンプするボタンが表示されます.上部のスライダーボタンで,このリンクの表示・非表示を切り替えることができます.表示状態は保存され,次のページ読み込み時に反映されます.


サムネール表示

・スライドの下にサムネール行が表示されます.サムネール行は,マウスのドラッグで左右にスクロールできます.またマウスホイールでもスクロールできます.サムネールをクリックするとスライドが切り替わります.


・スライドエリアの左上部にあるスライダー風のボタンをクリックすると,サムネール表示を on/off できます.この表示状態は保存され,次のページ読み込み時に再現されます.


不具合・バグについて


ページの初回アクセス時やブラウザのキャッシュがクリアされた後は,ネット環境にもよりますが,スライドショー画像の読み込みにかなり長い時間がかかる場合があります.用意されたスライド画像の数が多せいで,バグではありません.


※ ページの読み込み時,および切り替わりモードや効果の設定を変更した時など,スライドショーの部分がフラッシュし,“ゴースト”が出る場合があります.また,サムネール表示がアクティブなものに移動しない場合もあります.その後の動作に問題はありません.原因は不明ですが,Swiper の初期動作に関わる処理遅延によるものと考えられ,対処法はいまのところありません.


※ “アクティブな”(=上に表示されているスライドの)サムネールの表示位置が画面中央に来るように設定していますが,なぜかそうなっていません.Swiper 自身のバグの可能性もありますが理由は不明です.


以下の五つの不具合は要するに自作スクリプトの(仕様)バグですが,その後のデバッグとアルゴリズム変更・改善(おおげさ)により,解消されたと思われます,多分.


※ スライド下部の“スライド・バー”(pagination)およびスクロールバー部分の表示/非表示を設定するスライダーボタンを押すと,その部分がスライド画像や説明文の裏側に潜り込んでしまったり,不要な空白部が表示される場合があります.スライドが切り替わるときにこの部分を正常に“近づける”ルーチンを入れてごまかしていますが,原因は(またかという気もしますが)今のところ不明で対処法も分かりません.

※ ページ読み込み時に表示されているスライドとサムネールがずれている.スライドが切り替わると正常に戻る.

※ 切り替わりモードが『デフォルト・シーケンシャル』の時,スライド切り替わりがカウンターが2回回らないと行われないというバグがいつの間にか入っていました.どこからこうなったのか,また『何が原因なのか』は不明です.とりあえず,なんとか正常に動作するような改修を加えましたが,真の原因が不明のため確実なものではありません.

※ スライドショーをスクロールしたり,他のページに移ってからスライドに戻った時,またスライドショーをマウスホバーで一時停止し再開した時など,残り秒数カウントがずれる場合がありますが,次にスライドすると正常になります.

※ スライドショーを読み込んだ時やスライドが切り替わった時,秒数カウントが(毎秒二つカウントダウンされるとか)おかしくなってしまう場合があります.スクリプトのバグですが,解消方法はまだ見つけていません.ページの再読み込みをすると正常になります(多分)ので,秒数カウンターをクリックしてください.


-- Auto-slide powered by Swiper