jQuery Lighter

JavaScript

優雅なフェードで拡大縮小されるLightbox系ギャラリー・jQuery Lighter

jQuery Lighterは美しいフェードで画像を拡大縮小させることができるLightbox系のプラグインです。とても優雅な雰囲気のアニメーションを実装できるギャラリーなので、この手のプラグインを使う際には選択肢の一つとして覚えておきたいところです。

jQuery Lighterの使い方

以下はjQuery Lighterのデモになります。

jQuery Lighterのデモ

デモ

1回目の画像拡大時では正方形で表示された状態でローディングされます。読み込みが完了すると今度は画像全体が拡大されて、適切な縦横比での表示になります。

それ以降は同じ画像をクリックするとスムーズに拡大するようになります。

実際に使ってみたんですが、使い方もかなり簡単で非常にいい感じです。単純にjQuery本体とプラグインファイルを読み込んでリンク付き画像をマークアップするだけという手軽さ。

<link href="jquery.lighter.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.lighter.js"></script>

こんな感じで画像を記述していくだけです。aタグに指定した画像がオリジナルサイズの方です。img要素は最初に表示される画像になるので、widthやheightを付けるなり任意でサイズ調節をしておけばOKです。

<a href="images/test1.jpg" data-lighter>
    <img src="images/test1.jpg" />
</a>

あとは設定した画像が勝手にLightboxのように表示できるようになります。jquery.lighter.cssとjquery.lighter.jsもだいぶ軽量だし、手軽に導入できるのではないでしょうか?

jQuery Lighter

関連記事

  1. funnyText.js
  2. NavSync

    JavaScript

    ナビゲーションとコンテンツが連動するjQueryプラグイン「NavSync」

    NavSyncはナビゲーションとコンテンツが連動してアニメーションする…

  3. Diagonal Slider

    JavaScript

    斜めにデザインされたスタイリッシュなjQueryイメージスライダー「Diagonal Slider」…

    Diagonal Sliderは斜めにデザインされたクールでスタイリッ…

  4. Background Blur

    JavaScript

    画像をボカしてくれるクロスブラウザ対応の「Background Blur」

    Background Blurは画像をカッコよくボカしてくれるクロスブ…

  5. Impulse Slider

    JavaScript

    3Dスライダーを実装できるjQueryプラグイン「Impulse Slider」

    Impulse SliderというjQueryプラグインを使えば3Dス…

  6. Jquery Tab Plugin

    JavaScript

    シンプルで見やすいタブパネルを実装できる「Jquery Tab Plugin」

    Jquery Tab Pluginはシンプルで見やすく、そして操作しや…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP