トップページのスライドショーを自作

スライドショーのレイアウトを自動調整

Arcanyのトップページのスライドショーを作り替えました。 見た目は殆ど変わっていないですが、中身は全く違います。
  • スライドショー用スクリプトを既製品からオリジナルのものに交換
  • スライドショーの領域のアスペクト比が、常に4/3になるように調整
  • ウィンドウサイズが変わると、スライドショー領域が連動する(レスポンシブ対応)
  • 画像の長い辺が常にスライドショー領域の長い辺にフィットするよう調整
  • 縦位置の画像でも、スライドショー領域の中央に配置されるよう横座標を調整
  • 横幅が長い画像でも、スライドショー領域の中央に配置されるよう、縦座標を調節
  • 画像のタイトルの位置が常にスライドショー領域の下中央に配置されるよう調整
  • 縦横比率の異なる画像が混在しても、スライドショー領域の下部分に無駄な空白ができないよう調整

懸案だったスライドショーのレイアウト問題

従来のスマートフォン表示 トップページのスライドショーは、投稿した最新の写真4件を交互に表示させるものです。 ところが、縦位置や3:2比率などの画像が混在していると、スライドショー領域が縦に伸びて、スマートフォンでは横位置の画像を表示させていると下に無駄な空白が生じます。 また、縦位置の画像は左に張り付いた状態になったり、横幅の広い画像は上に張り付いた状態になったりします。 横幅の広い画像に記載のタイトルも、上にずれていました。 トップページのスライドショーに使われているスクリプトは汎用性のあるものですが、他の人が作っているため自分で調整することができません。 スタイルシートでどんなに頑張っても、調整できることに限界があり、「JavaScript/jQueryで操作するしかない」という結論に行き着きました。

jQueryによるスクリプト作りに着手

レイアウト問題は数ヶ月間放置していました。jQueryを使ったのもフォームのチェックしかやったことがなく、また同じように作れるかどうか不安だったのです。 しかし、このぐだぐだなレイアウトを放置するわけには行かない。jQueryの復習を兼ねて、この問題に取り組みました。

まずはキャンバスサイズの調整スクリプトを作る

まずは、ドキュメントが読み込まれた時と、ウィンドウをリサイズした時に、スライドショー領域が自動的に4/3に調整されるスクリプトを作りました。 スライドショー領域の横幅を取得して、縦幅を書き換えます。 単純なプログラムですが、徐々にスケールアップする方が、バグを発見しやすいのです。 テストページを作成し、これにスクリプトを適用。悪戦苦闘の末、何とか動作します。 キャンバス縦幅補正

画像の縦横の調整

各画像のアスペクト比を計算し、スライドショー領域にフィットさせます。 キャンバスサイズを算出し、横位置の画像は縦幅を、縦位置の画像は横幅を書き換えます。 キャンバスサイズ計算用の変数と、画像のアスペクト比計算用の変数がごっちゃになり、意図しない幅に調整されることがありました。 画像の大きさ補正 大きさを調整したら、水平・垂直方向のずれ幅を計算して、水平・垂直方向にずらします。 横位置の場合は、テキストも垂直にずらします。 画像の位置補正

スライドショー設定の初期化

画像の大きさ、位置調整が終わったら、スライドショーの初期状態を作りました。 1枚目の画像のli要素にcurrentクラスを付与し、他の画像を隠します。 このあたりからjQueryの使い方の勘が戻ってきました。 currentクラス付与

画像差し替え表示

currentクラスが付与されているリストはフェードアウトしてcurrentクラスを取り除き、次のli要素にclass要素を付与してフェードインさせます。 最後のli要素の場合は、最初のli要素にclassを付与して、フェードインさせます。

タイマー設定

4秒ごとに画像差し替え表示を行うような命令文を書き込み、スクリプトの動作を確認してスクリプトは完成となりました。

実サイトに適用する

テストページで使ったスタイル、スクリプトを、実サイトで使うphpファイルやcssに適用してページの更新が完了しました。

見苦しい空白とはおさらば

オリジナルのスクリプトのおかげで、アスペクト比が異なる画像でも無駄な空白ができなくなり、ホームページのレイアウトが改善されました。 私は胸をなで下ろしました。 しかし! 懸案はまだあります。それは「トピックパス(パンくずリスト)」。こんどはWordPressと格闘しないといけません。