[JS]レスポンシブ対応の画像表示テクニック!見せたい箇所を中心にクロップして表示させるスクリプト -FocusPoint
Post on:2014年8月26日
画像をデスクトップの広いスペースではそのまま表示し、スマホやタブレットなどの狭いスペースでは指定した箇所を中心にクロップして表示する、レスポンシブ対応の画像をクロップするjQueryのプラグインを紹介します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201403/2014082501.png)
FocusPoint -GitHub
左:オリジナルの画像
右上:画像の中央をクロップ、右下:FocusPointで指定した箇所を中心にクロップ
FocusPointのデモ
デモでは、画像をさまざまなサイズにクロップし、指定した箇所を中心に表示しています。
高さが狭い横長だけでなく、幅が狭い縦長でもOKです!
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201403/2014082502-01.png)
デモ:Dolphin
イルカを中心に。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201403/2014082502-03.png)
デモ:Kangaroo
カンガルーを中心に
画像の中心となる箇所は、座標で指定します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201403/2014082505.png)
画像をクロップする際の座標
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201403/2014082503.png)
デモ:Pure CSS Comparison
全体が表示された状態
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201403/2014082504.png)
左:高さを狭くすると、鳥を中心にクロップされます
FocusPointの使い方
Step 1: 外部ファイル
当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。
<head> ... <link rel="stylesheet" href="focuspoint.css"> <script src="jquery.js"></script> <script src="focuspoint.js"></script> </head>
Step 2: HTML
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>
Step 3: JavaScript
jQueryのセレクタでラッパーを指定し、スクリプトを実行します。
$('.focuspoint').focusPoint();
sponsors