memocarilog

プラグインなどで実装した非レスポンシブなギャラリーでも、シンプルなものの場合は CSS やライブラリのコードに少し手を加えるだけでレスポンシブ対応にできることもあります。しかし、凝ったエフェクトのギャラリーをレスポンシブ対応にしたい場合、どこをどうしたらいいのかプラグインのコードを読むだけで大変です…。

少し力技になってしまいますが、凝ったエフェクトのギャラリーを jQuery を使って簡単にレスポンシブにする方法を思いついたので、記事にしてみました。

ヒントになったのは少し前に話題になったこちらの記事「これでよくない？ レスポンシブテーブルの話 | ダーシマ・ヱンヂニヤリング」

サンプルデモ

だいぶ以前に Rhinoslider（シンプルなスライドショーから変わったエフェクトのスライドショーも簡単に実装できるjQueryプラグイン-Rhinoslider）というプラグインをご紹介しました。この時に作った、サイコロ状にバラバラと画像が切り替わるギャラリーのサンプルデモを簡単にレスポンシブ化してみました。

◆ ギャラリーをレスポンシブ対応にするサンプルデモ｜memocarilog demo

　

どのような仕組みでレスポンシブにしているか

大まかな仕組みは、ギャラリーを包んでいる親要素をウィンドウサイズに合わせ縮小・拡大（transform : scale() で）をしているだけです。とてもシンプルです。

具体的な jQuery コード

Rhinoslider の実装方法は以前の記事「シンプルなスライドショーから変わったエフェクトのスライドショーも簡単に実装できるjQueryプラグイン-Rhinoslider ｜ memocarilog」をご確認頂いて、ここではレスポンシブにするための jQuery コードのみをご紹介します。

IE9+ / iOS8 mobile safari / Android 4.3 標準ブラウザ / その他PCブラウザで動作確認を行いました。

2行目、$photoBox = $(”) にはギャラリーを包んでいる親要素を指定します。
3行目の adjust には適当な数値をいれギャラリーの大きさを調整して下さい。数値を加算していくとギャラリーサイズが小さくなります。
4行目の boxWidth = 600 には、ギャラリーのデフォルトでの横幅の数値を指定して下さい。

詳しい説明はコード内にコメントとして記入しました。

window.onload = function() {
	var $photoBox = $('.rhino-container'), // ギャラリー親要素を指定
	adjust = 0, // 調整用の数値
	boxWidth = 600 + adjust; // ギャラリーの横幅の数値
            
// ギャラリーをウィンドウ幅に合わせて縮小する関数
function boxScale(){   
	// 現在のウィンドウサイズを取得
	var currentWidth =  document.documentElement.clientWidth;   
                                
	// ギャラリー幅よりもウィンドウ幅が小さかったら縮小処理をする
	if(currentWidth < boxWidth ){
		$photoBox.css({
			'-webkit-transform' : 'scale('+ (currentWidth / boxWidth) + ')',
			'-ms-transform' : 'scale('+ (currentWidth / boxWidth) + ')',
			transform : 'scale('+ (currentWidth / boxWidth) + ')',
			// ↑ウィンドウ幅 ÷ ギャラリー幅で縮小比率を計算し
			// transform : scale() で縮小
			'-webkit-transformOrigin' : '0 0',
			'-ms-transformOrigin' : '0 0',
			transformOrigin : '0 0'
			// ↑縮小する時の変形起点を設定（左0と上0を変形の起点とする）
		});
	} else {
	// ウィンドウ幅よりもギャラリー幅が小さい場合は縮小しないようにする
		$photoBox.css({
			'-webkit-transform' : 'scale(1)' ,
			'-ms-transform' : 'scale(1)' ,
			transform : 'scale(1)' 
		});
	}
}
boxScale();
            
// ↓ ウィンドウサイズが変更された時にも、上で定義した
// 「ギャラリーをウィンドウ幅に合わせて縮小する」関数を実行する
$(window).on('resize', boxScale);
}

あとは、そのギャラリーに合わせ CSS などを微調整したら完成です。
このサンプルのコード全体は以下のページでご確認頂けます。
◆ change-responsive-sample

最初にご紹介したテーブルのレスポンシブ化のやり方もそうですが、scale() で縮小してしまうという手法はなかなか有効ですね。元々固定レイアウトだったものを、レスポンシブレイアウトにする場合には難しいこともあるので、そんな時にも何かと scale() は使えるのではないかなと思います。