【jQuery】Midiumのような画像拡大ができるzoom.jsの使い方

Midiumの記事にある画像をクリックすると画像が拡大されて、スクロールすると閉じる動きを実装できるzoom.jsの紹介です。

Midiumのデザインとかかっこいいですよね。

Midium

どこか画像がある記事を見てみるとどんな動きか分かると思います。

目次

1. インストール
2. 読み込み
3. html
4. jQuery

インストール

インストールはzoom.jsのGitHubページから

読み込み

読み込みはダウンロードしたファイル一式から「zoom.js」と「zoom.css」の2つ。
また、Bootstrapのtransition.jsに依存しているのでこちらも読み込みます。

transition.jsはこちら

<link href="zoom.css" rel="stylesheet">
<script src="zoom.js"></script>
<script src="transition.js"></script>

HTML

HTMLではimgタグにdata属性を追加します。

<img src="img/sample.png" data-action="zoom">

これだけで動きます。簡単ですね。

jQuery

jQueryでは特にすることはありません。

ただ、こういった動きはブログで取り入れたいという場面が多いと思います。

いちいち画像にdata属性追加するのは面倒なので以下指定をしておくといいかもしれません。

$('.article img').attr('data-action', 'zoom');

記事のエリア内のimgタグに絞って、data属性を追加しています。

さいごに

簡単に導入できるzoom.jsいいですね。

ブログをちょっといい感じにしたい方におすすめです。