[JS]レスポンシブ対応の画像表示テクニック！見せたい箇所を中心にクロップして表示させるスクリプト -FocusPoint

Post on:2014年8月26日

sponsors

画像をデスクトップの広いスペースではそのまま表示し、スマホやタブレットなどの狭いスペースでは指定した箇所を中心にクロップして表示する、レスポンシブ対応の画像をクロップするjQueryのプラグインを紹介します。

FocusPoint -GitHub
左：オリジナルの画像
右上：画像の中央をクロップ、右下：FocusPointで指定した箇所を中心にクロップ

FocusPointのデモ

デモでは、画像をさまざまなサイズにクロップし、指定した箇所を中心に表示しています。
高さが狭い横長だけでなく、幅が狭い縦長でもOKです！

デモ：Dolphin
イルカを中心に。

デモ：Kangaroo
カンガルーを中心に

画像の中心となる箇所は、座標で指定します。

画像をクロップする際の座標

デモ：Pure CSS Comparison
全体が表示された状態

左：高さを狭くすると、鳥を中心にクロップされます

当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。

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

img要素で配置した画像をラッパーで包み、中心となる座標を指定します。

<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>

jQueryのセレクタでラッパーを指定し、スクリプトを実行します。

$('.focuspoint').focusPoint();