[JS]デスクトップはそのまま、新しいiPad, iPhone4には高解像度の画像を配置するスクリプト -jQuery Retina

Retinaディスプレイを採用している新しいiPad, iPhone4用にimg要素で配置した画像を高解像度のものに変更するjQueryのプラグインを紹介します。

jQuery Retina Plugin
jQuery Retina -GitHub

[ad#ad-2]

• jQuery Retinaのデモ
• jQuery Retinaの使い方

jQuery Retinaのデモ

jQuery Retinaを使って画像を配置する方法は大きく分けて、3つあります。

• imgタグに「data-retina」属性を加える。
• 画像のファイル名に「-2x」を加える。
• コールバック関数を使ってファイル名を指定する。

表示はどの方法を使っても一緒ですが、下記にそれぞれの方法で実装したデモがあります。

デモページ

[ad#ad-2]

jQuery Retinaの使い方

jQuery Retinaの使い方は簡単です。
デスクトップで表示する用の画像、Retinaディスプレイで表示する用の高解像度の画像を用意してください。

外部ファイル

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

<script src="http://code.jquery.com/jquery.js"></script>
<script src="jquery.retina.min.js"></script>

以下、デモページの4つの例に沿って、実装方法を説明します。

imgタグに「data-retina」属性を加える

デフォルトの仕様で、img要素に「data-retina」属性を加え、値に高解像度の画像を記述します。

<script>
    $('#test-1 img').retina();
</script>
<div id="test-1"><img src="dolomites-small.jpg" data-retina="dolomites-large.jpg"></div>

高解像度の画像があるかチェック

オプションを使用することで、サーバー上に画像があるかチェックします。もし、画像が存在しない場合は、表示しません。

<script>
    $('#test-2 img[data-retina]').retina({checkIfImageExists: true});
</script>
<div id="test-2"><img src="st-john-small.jpg" data-retina="st-john-large.jpg"></div>

画像のファイル名に「-2x」を加える

jQueryのセレクタで指定した画像（#test-3 img.retina）を「rmnp-2x.jpg」に変更します。

<script>
    $('#test-3 img.retina').retina({suffix: "-2x"});
</script>
<div id="test-3"><img src="rmnp.jpg" class="retina"></div>

コールバック関数を使ってファイル名を指定

高解像度の画像のファイル名は任意のパターンに設定することもできます。

<script>
    function myCustomFileNameLogic($obj){
      return 'bigsur-1000x788.jpg';
    }

    $('#test-4 img.retina').retina({customFileNameCallback: myCustomFileNameLogic, checkIfImageExists: true});
</script>
<div id="test-4"><img src="bigsur-500x394.jpg" class="retina"></div>