html/css javascript jquery

レスポンシブデザインにも対応できるlightboxプラグイン『Fresco』

本日はレスポンシブWebデザインにも使えるであろうlightboxプラグインをご紹介。

Fresco

http://www.frescojs.com/　(ここからデモを確認できます)

上の画像はfirefoxのレスポンシブビューでライトボックスを作動させた状態。

試しに画像左上のサイズを逆転させてみます。

すると、自動で画像サイズが縮小してくれるライトボックスプラグインです。

使い方

まずは、下記をダウンロードします。

JQuery.js–ダウンロード（公式サイト）

Frescoプラグインもダウンロード(Frescoサイトへ)

※Frescoプラグインには商用版、非商用版で、使えるオプションに差がありますが、リサイズは非商用でも使えます。

なので、light版をダウンロード。

使用のための必要構成（準備編）

  • xxx.html
  • css/
    • fresco.css
    • skins(プラグインで使うための画像が入ってます。)
  • js/
    • jquery.js(verは1.4.4から1.9.1内で（2013年2月現在）。、CDN版でも大丈夫です。)
    • fresco.js

ダウンロードしたフォルダから上に書いてあるファイルを取り出して、配置します。

使用すしたいHTMLファイルのhead内で上記を呼び出すように記述をします。

続いてhead内に以下の記述を必要があります。

1  <!– Make IE8 and below responsive by adding CSS3 MediaQuery support –>
2  <!–[if lt IE 9]>
3  <script type=’text/javascript’ src=’http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js’></script>
4  <![endif]–>
5  
6  <!– Youtube Iframe API (optional, for HD video) –>
7  <script type=”text/javascript” src=”http://www.youtube.com/iframe_api”></script>

「Fresco」サイト内の使い方ページへ

実行編

使い方はとてもシンプルで基本はクラスを指定するだけ。

例

<a href=”image.jpg”>画像1</a>

画像をギャラリー表示したいときは

<a href=”image-01.jpg data-fresco-group=”gallery”>画像1</a>

<a href=”image-02.jpg data-fresco-group=”gallery”>画像2</a>

lightboxプラグインでは、tilte属性でキャプションや、rel属性などでグループ化などがありますが、「Fresco」では、data-fresco-xxxでグループ化、キャプションなどを行います。

動作環境

対応ファイル

  • image
  • youtube

対応OS

  • IE6+
  • firefox3+
  • chrome5+
  • safari3+,iOS5
  • opera9+

jQueryも配布元サイトでは1.9.1を使用していますが、1.4.4から大丈夫のようです。

画面サイズに合わせて、ライトボックスが動いてくれるのは、とっても便利で

色々と使えそうです。

関連記事