【Backstretch】手軽に画像を全画面表示にするjQueryプラグイン

2015.02.11

画像を全画面にするデザインのホームページがお手軽に

HTML:
パララックスほどじゃないけど、
画像を全画面に配置したデザインだったり、
ちょっとした全画面のギャラリーを実装したいときにおすすめのjQueryプラグインがBackstretchです。

設置方法

jQueryプラグインなので、jQueryは読み込んでおいて、
Backstretchも使用したいページに読み込みます。

画面全体で全画面表示にしたい場合は、
JavaScript:
$.backstretch("path/to/image.jpg");
と記載します。

ブロック要素に適用させたい場合は、
JavaScript:
//.fooは指定したいブロック要素のIDかClassに書きかえる
$(".foo").backstretch("path/to/image.jpg");
と記載します。

複数枚の画像を全画面表示で切り替えたい場合は、
JavaScript:
//.fooは指定したいブロック要素のIDかClassに書きかえる
//durationは1000が1秒
$(".foo").backstretch([
    "path/to/image.jpg",
    "path/to/image2.jpg",
    "path/to/image3.jpg"    
  ], {duration: 4000});
と記載します。

基本機能はシンプルで拡張もしやすい

1枚の画像を全画面表示にもできるし、複数枚をスライドしたりもできます。
それに全画面表示をブロック要素に適用させることも可能なので、
応用して色々と試せるのも魅力です。

またイベントなども充実しているので、
画像が表示される前後のイベントを取得して機能を付け加えたり、処理を実行させたりもできますね。
← 【text-overflow】CSSを使って要素の横幅からはみ出したテキストを折り返さずに省略形(…)に変更する
jQueryでページに必要な画像をあらかじめ先読みする方法 →