[JS]エレメントの背景画像のサイズを自動的に表示サイズに合わせて最適化するスクリプト -jQuery Anystretch
Post on:2012年3月5日
ページ上のさまざまなブロックレベルの要素の背景に設定した画像のサイズを自動的に、表示サイズに合わせて最適化するjQueryのプラグインを紹介します。
[ad#ad-2]
Anystretchのデモ
まずは、デモからご紹介。
一番上のエレメントの背景「にぎり寿司」に注目してください。
ブラウザのサイズを幅:1200pxで表示します。
デモページ:幅1200pxで表示
[ad#ad-2]
幅:800pxに変更してみます。
「にぎり寿司」の画像は表示サイズを変更しても、エレメントの幅いっぱいに表示されます。
もちろんアスペクト比は維持されています。
デモページ:幅800pxで表示
幅:480pxに小さくしても、エレメントの幅いっぱいに表示されます。
デモページ:幅480pxで表示
Anystretchの使い方
外部ファイル
「jquery.js」と当スクリプトをページの下、</body>の上あたりに記述します。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="/jquery.anystretch.min.js"></script>
HTML
HTMLの記述は通常通りです。下記はデモページの一番上のコードです。
※jQueryのセレクタで背景を表示するエレメントを指定します。
<div class="div01"> <div> <h2>Element with hardly any content</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p> </div> </div>
JavaScript
jQueryのセレクタで背景画像を設置するエレメントを指定します。
<script type="text/javascript"> $('.div01').anystretch("img01.jpg"); </script>
ロード時のタイミングを設定することもできます。
<script type="text/javascript"> $.anystretch("/path/to/image.jpg", {speed: 150}); </script>
ロード後、画像を変更することもできます。
<script type="text/javascript"> $.anystretch("/path/to/image.jpg", {speed: 150}); // Perhaps you'd like to change the image on a button click $(".button").click(function() { $.anystretch("/path/to/next_image.jpg"); }); </script>
スクリプトのオプション
- speed
- ロード後、画像を表示するスピード。
- centeredX
- 画像の比率をX軸で調整。
- centeredY
- 画像の比率をY軸で調整。
- elPosition
- body内以外に使用する際のCSSのポジション。
sponsors