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フォルダ内にオプションに関する詳細があります。