JavaScript

jquery.fs.zoomer.jsを使って画像を拡大・縮小（ズーム表示）する方法

  /

この記事では、jQuery.fs.zoomer.jsを使用して大きな画像を拡大・縮小（ズーム表示）する方法をわかりやすく解説します。
ステップバイステップで進めることで簡単に実装できる内容となっています。

Contents

はじめに

画像をウェブページに掲載する際、特に解像度の高い画像を使用する場合、拡大・縮小機能があると非常に便利です。訪問者が詳細を確認したいときに役立ちますし、全体像を一目で把握できるようになります。今回は、jquery.fs.zoomer.jsというライブラリを使ってこの機能を実現します。

使用した画像

この記事では、以下のサイズの画像を使用しています。

画像サイズ: 横644px × 縦828px

ズーム（拡大・縮小）用の画像

画像を用意できたら、次のステップに進みましょう。

CSSの記述

まず、jquery.fs.zoomer.cssファイルを読み込みを読み込み、必要なスタイルを設定します。これにより、画像の拡大・縮小がスムーズに行えるようになります。

<style type="text/css">
<!--
.zoomer_wrapper{
	border: 1px solid #ddd;
	border-radius: 3px;
	height: 500px;
	margin: 10px 0;
	overflow: hidden;
	width: 100%;
}
.zoomer.dark_zoomer{
	background: #333 url(zoomer-bg-dark.png) repeat center;
}
.zoomer.dark_zoomer img{
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
-->
</style>
<link href="jquery.fs.zoomer.css" rel="stylesheet" type="text/css" media="all">

HTMLの記述

次に、HTMLファイルに拡大・縮小する画像（class=”zoomer_wrapper zoomer_basic”）を表示するための要素を追加します。以下のコードをHTMLファイルの適切な位置に挿入してください。

<h1>「+」「-」をクリックすると画像が拡大・縮小（ズーム）します。</h1>


    


<div class="zoomer_wrapper zoomer_basic">
        <img src="i01.jpg" alt="ズーム（拡大・縮小）用の画像">
</div>

JavaScriptの記述

最後に、jQueryとjquery.fs.zoomer.jsを読み込み、拡大・縮小機能を有効にします。
拡大・縮小する画像を設定したエリア（.zoomer_basic）に$(“.zoomer_basic”).zoomer()と記述します。
以下のコードをHTMLファイルのbodyセクションの末尾に追加します。

<script src="jquery-1.9.0.min.js"></script>
<script src="jquery.fs.zoomer.js"></script>
<script>
$(document).ready(function() {
	$(".zoomer_basic").zoomer();
});
</script>

jquery.fs.zoomer.jsを使用して画像を拡大・縮小デモページ

これで基本的な設定は完了です。実際に動作を確認するために、以下のリンクからデモページを確認してみてください。

jquery.fs.zoomer.jsを使用して画像を拡大・縮小デモ

ソース元：Zoomer Formstone / Ben Plum

まとめ

この記事では、jQuery.fs.zoomer.jsを使用して大きな画像を拡大・縮小する方法を紹介しました。この機能を実装することで、ユーザーエクスペリエンスが向上し、ウェブサイトの魅力も増すことでしょう。簡単に取り組める内容となっていますので、ぜひ試してみてください。
このようにステップバイステップで進めることで、難しい技術も理解しやすくなります。これからも新しい技術に挑戦し、スキルを磨いていきましょう。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

jquejquery.fs.zoomer.js 拡大 縮小 ズーム
関連記事