【jQuery】Zoomerで画像拡大縮小機能をカスタマイズする方法

Programming Web

本記事の内容

  • jQueryプラグインZoomerの画像拡大縮小機能をカスタマイズする方法

こんにちは、mine(@mineblog7)です。

ブログ歴は4年、Web制作歴は7年ほどになります。
現在はmineblogを一人で運営しています。

スマホサイトを作っていて、画像を拡大縮小可能にしたい時ありませんか?
Webサイトをしている中で、スマホサイトでviewportuser-scalable=noに指定(ページの拡大縮小不可)して、画像のみを拡大縮小機能を実装するという機会がありました。

このようなニッチな機能を実装したいという方向けにその方法の一つをご紹介します。jQueryプラグインZoomerを使用して画像拡大縮小機能を実装します。

動作イメージ

Zoomer動作

こんな感じで、画像拡大ができます。

仕様

  • 画像をクリックで画面の最前面に画像が浮き上がる
  • 画像が浮き上がるとプラスボタン、マイナスボタンで画像の拡大縮小が可能
  • スマホのピンチイン・ピンチアウトで画像の拡大縮小が可能
  • 右上の×ボタンをタップすると元の画面に戻る
通常のPC画面でも動作はしますが、あくまでスマホ用を考慮しています)

実装方法

ここから実装方法を詳しく紹介します。

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

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

リンク先のページ(Github)でClone or downloadと書かれている緑色のボタンをクリックしてDownload ZIPをクリックするとダウンロードできます。

見たところしばらくアップデートされていないようなので、自己責任で利用しましょう

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

使用するファイル

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

<head>内に記述

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<link href="/【ファイルパス】/jquery.fs.zoomer.css" rel="stylesheet" type="text/css">
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>
<script src="/【ファイルパス】/jquery.fs.zoomer.js"></script>

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

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

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

HTML

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

<div class="disp_image">
	<a style="background-image:url('https://to-benefit7.com/wp-content/uploads/2020/04/kurogi-kakigori01.jpg');" href="javascript:void(0);" onclick="open_image();"></a>
</div>
<div id="image_wrapper" style="display: none;">
	<div class="close_button">
		<a href="javascript:void(0);" onclick="close_image();"><i class="fa fa-times" aria-hidden="true"></i></a>
	</div>
</div>

【クラス】disp_image

disp_imageクラスでaタグにbackgroundを設定して画像を表示させます。

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

【id】image_wrapper

画像クリック後に画面の最前面に浮き上がらせる要素です。初めはdisplay:noneの状態にしておきます。

close_buttonクラス内でaタグを使用して、×ボタンをクリックした際にonclickを設定して、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.画像クリックで拡大縮小可能な画像を最前面に表示する関数
function open_image(){
	$("#image_wrapper").append("<div class='zoomer_wrapper zoomer_basic'><img src='https://to-benefit7.com/wp-content/uploads/2020/04/kurogi-kakigori01.jpg' /></div>");
	$('#image_wrapper').show();
	$(".zoomer_basic").zoomer();
}

// 2.×ボタンクリックで最前面に表示された拡大縮小可能な画像を閉じる関数
function close_image(){
	$('#image_wrapper').hide();
	$('.zoomer_wrapper').remove();
}

// 3.スマホ画面の回転時の処理
$(function(){
	var timer = false;

	$(window).on("orientationchange", function() {
		if($('#image_wrapper').css('display') == 'block'){
			if (timer !== false) {
			clearTimeout(timer);
			}
				timer = setTimeout(function() {
				close_image();//画像表示を閉じる
				open_image();//画像を再表示
			}, 100);
		}
	});
});

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によって簡単に実装できるのですが、今回は少しだけ見栄えに+αの工夫をしてみました(必要かどうかは分かりませんが…)。

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

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 YouTubeライブで気をつけるべきチャットへのコメントマナーまとめ

おすすめ記事 お名前.comのドメインプロテクションは必要か【採算がとれるか】