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. iziModal

    JavaScript

    エレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」

    iziModalはエレガント・レスポンシブ・フレキシブルなモーダルウィ…

  2. iconate.js

    JavaScript

    アイコンをオシャレにアニメーションしながらtransformさせる「iconate.js」

    iconate.jsはアイコンをアニメーションさせながら別のアイコンへ…

  3. JavaScript

    ニュースやお知らせなどに使えるティッカー「jQuery WebTicker」

    ニュースやお知らせなんかに使えるティッカー「jQuery WebTic…

  4. slimMenu
  5. JavaScript

    jQueryで空港や駅にある掲示板のように指定した文字が切り替わっていくAirportを使ってみた

    面白いプラグインがあったので使ってみました。空港や駅にある掲示板みたい…

  6. ItemSlide.js

    JavaScript

    タッチやスワイプでスライドするカルーセルのjQueryプラグイン「ItemSlide.js」

    ItemSlide.jsはタッチ、スワイプ、スクロールなどでスライドす…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP