HOME > JavaScript > 画像クリックで拡大表示するシンプルなJSライブラリ「zooming」

画像クリックで拡大表示するシンプルなJSライブラリ「zooming」

Adobe Creative Croudのブログ知ってるようで、知らずに損してるAcrobatとPDFのアレコレ 第1回:AcrobatとPDFの基本(バージョンと閲覧方法) | Adobe Creative Stationで実装されていて、良いなと思ったJSライブラリ「zooming」。

画像をクリックすると、ただ拡大される。別窓が開くわけではなく、クローズボタンが表示されるでもなく、ただ画像が大きくなる。サイト閲覧のペースを妨げない感じが良かった。

実装

JSライブラリをGithubで入手。ライセンスはMIT。
https://github.com/kingdido999/zooming

ヘッダーでJSライブラリを読み込んで、imgタグにdata-action属性を追加する。

	<!-- ライブラリの読み込み -->
	<script src="js/zooming.min.js"></script>
	
	<!-- data-actionを追加 -->
	<img src="image01.jpg" data-action="zoom" >

デモ

基本の形。imgタグにdata-action属性を追加するだけでOK。用意する画像も1枚だけ。

サムネイル画像をクリックしたら拡大用画像を表示したり、拡大サイズを決めたり、画像拡大時の背景色を好きな色にすることも可能。

※Githubから落としたフォルダ(zooming-master)のdocsフォルダ内にオプションに関する詳細があります。

参考にしたサイト