jQuery Zoom で画像の拡大機能を実装する
チャットモンチーの新作早く聴きたーい！みなさん、こんにちは nakamura です。
よくウェブカタログ等で画像の拡大表示機能を見掛けますが、とあるプロジェクトで似たような要件を満たす必要がありました。ただし FLASH は NG。ということで JS ベースのものを探していた所、中々シンプルで使いやすいプラグインがあったので今回紹介してみたいと思います。
jQuery Zoom
プロジェクトページはこちら。Jack Moore さんって Colorbox とかも作ってる人なんですね～。いつもお世話になってます！
使い方
とりあえずダウンロードして適当な場所に展開しましょう。ソースコードは Github で公開されているので、以下からどうぞ。
一緒にくっついてくる demo.html やプロジェクトページを見ればだいたいの使い方は分かると思いますが、最低限必要なのは jQuery 本体と jquery.zoom.js のふたつです。こんな感じで head タグ内に書いて読み込んでおきましょう。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="/js/jquery.zoom.js"></script>
※必要な jQuery のバージョンについては具体的に書かれていませんが、サンプルコードを見る限りだと最新版を使っておけば問題ないようです。
必要なファイルを読み込んだら後はもう簡単。拡大したい画像の親要素に対してバインドしてあげます。
html がこんな感じだとすると・・・、
<ul>
<li class="photo">
<img src="/img/demo.png" />
</li>
</ul>
以下のような JS を書けば、とりあえずは動いてくれます。url で拡大時に使用する画像を指定しています。いやー簡単！
$(document).ready(function(){
$("li.photo").zoom({url: "/img/demo_big.png"});
});
url 以外にもいくつかオプションが用意されているので細かい点は プロジェクトページ を参照してください。
以上！そうしょっちゅう使うものでもないと思いますが、参考になれば幸いです。
