ウェブにズームアップ(ズームイン)可能な画像を埋め込むには – Swiperを応用する

ウェブを制作する際に、図解画像等を表示させる事もあると思います。

当オフィスにおいても、現在承っているウェブサイトに、クライアントから制作を依頼された図解画像を配置しておりますが、単なるイメージ画像なら良いのですが、図解となりますと細部まで視認が可能でないと情報が伝わり難く、特にスマホでの閲覧の際には、全幅で表示させても、文字が読み取れず、閲覧ユーザーに伝えたい情報も伝わらない事になりかねません(下記のような図解を掲載するような場合)。

見づらい図解の例。特にスマホでどうにかしたい。

良く、他のサイトにホバーやクリックした際にCSSのscaleでズームインする方法が掲載されていますが、ユーザーに図解等細部まで閲覧して貰うのに最適なライブラリを見つけました。

Swiperです。

Swiperロゴ
The Most Modern Mobile Touch Slider

ご存知の方も多いと思いますが、Swiperは本来はスライダーライブラリとなります。

Swiperは豊富でバリエーションに富んだスライダーライブラリを提供してくれますが、その中に、「ZOOM」という種類のスライダーがあります。

この「ZOOM」というタイプのスライダーは、パソコンの場合は、スライドする画像をダブルクリック、スマホの場合はダブルタップする事で、スライダーコンテナー内で、あらかじめ指定した倍率で画像がズームアップします。

そして、ズームアップされた画像は、画面上でドラッグ可能であり、コンテナー内で自由に動かし、細部を確認できるのです(下記、Swiper「Zoom」のデモとなります。画像をダブルクリックかダブルタップで拡大します。)

便利なスライダーですよね。これを応用できないかと考えたわけですが、スライダー画像を一枚のみにするだけで、画像をズームアップ(ズームイン)可能な埋め込みコンテナーとして活用できます(下記、先の図解画像をスライダー画像として設定し、かつ、スライダー画像がその図解1枚のみの場合)。

上の図解をダブルクリックまたはダブルタップすると図解が拡大し、ドラッグするとコンテナー内で自由に動かすことができるはずです。

ちなみに、私はSwiperのバージョンを4.5.1に落として使っております。これはIE11に対応するためです。Swiperの最新バージョンはIE11には非対応です。下記にSwiper4.5.1の場合のサンプルコードを掲載します。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Swiper demo</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

		<!-- swiper.js IE11対応旧バージョン4.5.1 -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>

		<style>
			.swiper {
				width: 100%;
				height: 100%;
			}

			.swiper-slide {
				overflow: hidden;
			}
		</style>
	</head>

	<body>
		<div style="width:100%;">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div class="swiper-zoom-container">
							<img src="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph.jpg">
						</div>
					</div>
				</div>
			</div>
		</div>

		<script>
			var swiper = new Swiper(".swiper-container", {
				zoom: {
					maxRatio: 2, 	<!-- 画像のズーム倍率を指定 -->
				},
			});
		</script>
	</body>
</html>

<picture> 、<source>タグで画像の出し分けをする場合も使えるのか?

最近のディスプレは解像度が3000pxを超えるものもあります。従って、ユーザーの端末に応じて最適な画像サイズを出し分ける必要があるわけですが、その場合に使うべきレスポンシブの技術として、<picture>タグと<souece>タグを使うことも多いのではないでしょうか。

<!-- picture、sourceタグによる画像出し分けの例 -->
<picture">
	<source srcset="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph-768.jpg" media="(max-width:768px)" />
	<source srcset="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph-1280.jpg" media="(max-width:1280px)" />
	<img src="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph.jpg">
</picture>

この場合、単純にswiper-zoom-container内に上記picture、sourceタグを内包すれば良いように思えます。しかしこれはNGです。正常に動きません。下記、NGな書き方です。


<!-- Swiper 「Zoom」でpicture、sourceタグで出し分ける際のNGな書き方 -->

<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
			<div class="swiper-zoom-container">
				<picture">
					<source srcset="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph-768.jpg" media="(max-width:768px)" />
					<source srcset="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph-1280.jpg" media="(max-width:1280px)" />
					<img src="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph.jpg">
				</picture>
			</div>
		</div>
	</div>
</div>

Swiper「Zoom」において、picture、sourceタグで画像を出し分ける場合は以下のように記載すると正常に動作します。


<!-- Swiper 「Zoom」でpicture、sourceタグで出し分ける際には、pictureタグをswiper-zoom-containerとして使うべし -->

<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
			<picture class="swiper-zoom-container">
				<source srcset="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph-768.jpg" media="(max-width:768px)" />
				<source srcset="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph-1280.jpg" media="(max-width:1280px)" />
				<img src="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph.jpg">
			</picture>
		</div>
	</div>
</div>

<!-- Swiper 「Zoom」でpicture、sourceタグで出し分ける場合のサンプルコード -->

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Swiper demo</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

		<!-- swiper.js IE11対応旧バージョン4.5.1 -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>

		<style>
			.swiper {
				width: 100%;
				height: 100%;
			}

			.swiper-slide {
				overflow: hidden;
			}
		</style>
	</head>

	<body>
		<div style="width:100%;">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<picture class="swiper-zoom-container">
							<source srcset="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph-768.jpg" media="(max-width:768px)" />
							<source srcset="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph-1280.jpg" media="(max-width:1280px)" />
							<img src="https://www.office-tomo.net/wp-content/uploads/2021/11/demograph.jpg">
						</picture>
					</div>
				</div>
			</div>
		</div>

		<script>
			var swiper = new Swiper(".swiper-container", {
				zoom: {
					maxRatio: 2, 	<!-- 画像のズーム倍率を指定 -->
				},
			});
		</script>
	</body>
</html>

?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です