[jQuery] フォーカスポイントを決めて、そこを中心に切り抜くプラグインFocusPoint

FocusPoint

FocusPointは、レスポンシブにクロップ（切り抜き）するjQueryのプラグインです。
ちょっとこれだけではわかりにくいですが、焦点を決めて、そこを常に表示するように枠内におさめる、あるようで無かったすばらしいプラグインです。

導入方法

導入は、至って普通です。
まず、jQuery、focuspoint、CSSを読み込みます。

<link rel="stylesheet" href="focuspoint.css">
<script src="jquery.js"></script>
<script src="focuspoint.js"></script>

そして、HTMLに下記のように指定します。

<div class="focuspoint"
data-focus-x="0.331"
data-focus-y="-0.224"
data-image-w="400"
data-image-h="300">
    <img src="image.jpg" alt="" />
</div>

ここで問題になってくるのが、x軸とy軸の座標ですが、作者はわかりやすいように調べるためのjsを用意してくれています。

サンプル

クリックすると、x軸とy軸の座標が表示されます。

さて、最後に実行文です。

(function($) {
　$(document).ready(function() {
　　//Fire plugin
　　$('.focuspoint').focusPoint();
　});
}(jQuery));

これでOKです。
ウィンドウのリサイズで動かないようにするには

$('.focuspoint').focusPoint({
    reCalcOnWindowResize : false
});

こうするようです。

作者のサンプルです。

• Lizard
• Kangaroo
• Dolphin
• Bird

まとめ

画面いっぱいに表示する系のプラグインはよくありますが、フォーカスポイントを決められるのは見た事が無かったのでとてもいいプラグインだと思いました。

結構いろんなシーンで使えるんじゃないかと思います。