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 には、ギャラリーのデフォルトでの横幅の数値を指定して下さい。
5行目の boxHeight = 450 には、ギャラリーのデフォルトでの高さの数値を指定して下さい。

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

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

scale でギャラリーを縮小しても、元の幅と高さは保たれたままです。幅は、ギャラリーを包んでいる要素の親要素に対して、overflow : hidden してはみ出している分は見えなくしてしまいましょう。
高さは、上記の jQuery コード内にて、縮小した分の高さを margin-bottom でマイナスすることにより、余計な間を作らないようにしています。

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

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