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

SkitchのエクスポートMacのSkitchでJPEGやPNGなどを指定してエクスポートするやり方前のページ

MacのATOK Padで文字のフォントサイズを変更する設定方法次のページ

関連記事

  1. Slickhover.js

    JavaScript

    滑らかでスムーズなホバーエフェクトを実装できるjQueryプラグイン「Slickhover.js」

    とても軽量で使いやすいのがいいですね。ホバー時に滑らかでスムーズなエフ…

  2. Vide

    JavaScript

    背景にvideoを表示できるjQueryプラグイン「Vide」

    VideというjQueryプラグインを使えば、Webサイトの背景にvi…

  3. stickyTableColumns

    JavaScript

    水平(左右)にスライドできるテーブル実装「stickyTableColumns」

    stickyTableColumnsは、データ量の多い表をページで表現…

  4. Random Text Shuffle

    JavaScript

    シャッフルしながらテキストが表示される「Random Text Shuffle」

    Random Text Shuffleは文字をシャッフルしながらテキス…

  5. TabbedContent
  6. Dropit

    JavaScript

    シンプルでフレキシブルなドロップダウンメニュー「Dropit」

    Dropitはシンプルでフレキシブルなドロップダウンメニューを実装でき…

最近の記事

  1. 長十郎
  2. COMOLI シルクネルシャツ
  3. WiMAX
  4. 甘柿
PAGE TOP