×

jQueryプラグインzoomerを使ってスマホサイト用の画像拡大縮小機能を実装してみた

2016年8月17日 コーディング

スマホタブレット

スマホサイトを作っていて、画像を拡大縮小可能にしたい時ありませんか?

スマホサイトでviewportをuser-scalable=noに指定(ページの拡大縮小不可)したうえで、画像のみを拡大縮小機能を実装するという機会がありました。

このようなニッチな機能を実装したいという方向けにその方法の一つをご紹介します。

今回、jQueryプラグイン「zoomer」を使用して画像拡大縮小機能を実装します。

サンプルで動作を確認

下記のDEMOをクリックしてサンプルで動作を確認してください。

動作確認はスマホもしくはブラウザのディベロッパーツールでデバイス変更した状態で行ってください。
(※通常のPC画面でも動作はしますが、あくまでスマホ用を考慮しています)

DEMO

画像をクリックすると画面の最前面に画像が浮き上がります。

画像が浮き上がるとプラスボタン、マイナスボタンで画像の拡大縮小ができるようになっており、スマホのピンチイン・ピンチアウトでも画像の拡大縮小が可能(モバイル用safariでは確認済)になっています。

右上の×ボタンをタップすると元の画面に戻ります。

jQueryプラグイン「zoomer」をダウンロードして読み込ませる

今回使用するjQueryプラグイン「zoomer」をダウンロードします。

「zoomer」ダウンロードはこちら

リンク先のページ(Github)で「Clone or download」と書かれている緑色のボタンをクリックして「Download ZIP」をクリックするとダウンロードできます。
(※見たところしばらくアップデートされていないようなので、自己責任で利用しましょう)

ダウンロードしたファイルの中で使用するのは下記2つです。

  • jquery.fs.zoomer.css
  • jquery.fs.zoomer.js




まずは、headタグ内でviewportを設定(user-scalable=noにする)し、画面の拡大縮小を不可にします。

jquery.fs.zoomer.cssとjquery.fs.zoomer.jsを読み込ませます。
併せてjQueryも読み込ませておきましょう。

ファイル読み込みの準備ができたらコーディングを進めます。

htmlでコーディング

htmlでコーディングします。html自体は非常にシンプルなものになります。

【クラス】disp_image
aタグを使いbackgroundで画像を表示させます。

その際にaタグにonclickを設定して、画像をクリックした際にJavaScriptの「open_image()」という関数を実行するようにしておきます。

【id】image_wrapper
画像クリック後に画面の最前面に浮き上がらせる要素です。

初めはstyleでdisplay:noneの状態にしておきます。

close_buttonクラス内でaタグを使用して、×ボタンをクリックした際にonclickでJavaScriptの「close_image()」という関数を実行するようにしておきます。

CSSで装飾する

CSSで入力フォームの形を整えます。

.disp_image a {
	display: block;
	width: 75%;
	height: 140px;
	max-width: 480px;
	margin: 0 auto 10px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border: 1px solid #e8e8e8;
	cursor: initial;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

 #image_wrapper .close_button {
	z-index: 25;
	display: none;
	display: inline;
	padding: 10px;
	text-align: right;
	position: absolute;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	right: 5px;
	top: 5px;
}

 #image_wrapper .close_button a {
 	color:#313131;
 }

disp_imageクラス内のaタグに対してはdisplay:blockを設定して、表示幅と高さを設定しておきます。
background-size:coverを設定することで、画像のアスペクト比はそのままで、表示領域を覆うように画像を表示させることができます。

※background-sizeの値については、今回はcoverを指定しましたが、ケースバイケースです。

close_buttonクラスは閉じるボタンを構成する要素で、position:absoluteで画面右上に表示させるようにします。

.zoomer { background: #fff; height: 100%; overflow: hidden; position: relative; width: 100%;
	-webkit-transition: none;
	   -moz-transition: none;
	   	-ms-transition: none;
	   	 -o-transition: none;
	   	 	transition: none;
}

jquery.fs.zoomer.cssの内容を少し変更します(変更しなくても大丈夫です)。

JavaScript(jQuery)を使用して動きを実装する

JavaScript(jQuery)を使用して画像の拡大縮小機能を実装していきます。



1.画像クリックで拡大縮小可能な画像を最前面に表示する関数open_image()

open_image()は画像をクリックした際に最前面に拡大縮小可能な画像を表示させるための関数です。

image_wrapper要素内に.append()で上記のhtml(プラグインzoomerによって形成されるhtml、imgタグ)を追加した後、image_wrapper要素を表示させます。

必ず最後に$(“.zoomer_basic”).zoomer();でプラグインzoomerを動作させます。

2.×ボタンクリックで最前面に表示された拡大縮小可能な画像を閉じる関数close_image()

最前面に表示された画像を閉じるための関数です。

image_wrapper要素をdisplay:noneで非表示にして、zoomer_wrapper要素はremove()で削除します(初めの状態に戻します)。

3.スマホ画面の回転時の処理

スマホを縦横回転させたときの処理です。

$(window).onでorientationchangeを記述することで、スマホ回転時の処理を行えます。

デフォルトの画像表示(最前面に拡大縮小可能な画像が表示されていない状態)の時は特に処理は必要ありません。

しかし、最前面に拡大縮小可能な画像を表示したまま画面を回転させる場合は追加で処理が必要となります。

拡大縮小可能な画像が表示されている場合は、一度close_image()で画像を閉じて、再度open_image()で拡大縮小可能な画像を表示させます。

OSのバージョンなどによってはopen_image()で画像を表示させる際に変化前の画面幅で画像を表示してしまうことがあるので、今回はsetTimeout()を使用して画面のリサイズが完了するまでの時間を作って、変化後の画面幅で拡大縮小可能な画像を表示させるようにします。

まとめ

拡大縮小機能自体はプラグインzoomerによって簡単に実装できるのですが、今回は少しだけ見栄えに+αの工夫をしてみました(必要かどうかは分かりませんが…)。

「スマホサイト自体を拡大させたくない」、「画像ページに直接アクセスさせたくない」などの状況が万が一あればこの方法が役立つかもしれません。

関連記事