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. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで要素を挿入できるメソッドがたくさんあるので整理してみた

    jQueryでHTML要素を追加するメソッドが色々あるので整理するため…

  2. normalmap.js

    JavaScript

    インタラクティブなライティングエフェクトを実装できる「normalmap.js」

    normalmap.jsはシンプルでインタラクティブなライティングエフ…

  3. JavaScript

    レスポンシブで横スクロールやキーボード操作も可能なjQueryギャラリー「Portfoliojs」

    ポートフォリオなどでとても素敵なイメージギャラリーを実装することができ…

  4. LC Micro Slider
  5. Stretchy

    JavaScript

    入力した文字数に合わせて可変するフォーム実装「Stretchy」

    Stretchyは入力した文字数に合わせてボックスが伸び縮みするフォー…

  6. luxy.js

    JavaScript

    優雅な慣性スクロールとパララックスエフェクトを実装できる「luxy.js」

    luxy.jsは優雅で美しい慣性スクロールとパララックスエフェクトを実…

最近の記事

  1. ペーストしてスタイルを合わせる
  2. Hermèsオレンジスポーツバンド
  3. GoPro HERO8 Black

アーカイブ

PAGE TOP