chrome firefox IE safari chain youtube-play pocket hatena facebook feedly github google-plus rss twitter search code envelope-o home pencil website works calendar drawer tag
2014/08/10

[jQuery]超軽い!シンプルなlightbox系プラグイン「Featherlight.js」

めちゃくちゃ軽いjQueryプラグイン「Featherlight.js」をご紹介いたします。
lightbox系で必要な機能が揃っており、ミニマルなデザインやシンプルなデザインにマッチすると思います。

Featherlight.js

謳い文句は超軽量!lightboxプラグインだったのですが、アップデートの末に6KBからさらに軽量化し、なんと5KBになっておりました!!

シンプルなlightbox系ですので、ミニマルデザインにぴったりだと思います。

機能としては

 

・デフォルト
Featherlight-1

 

・画像
Featherlight-3

 

・iframe(何気に嬉しい機能です)
Featherlight-4

 

・Ajax
Featherlight-5

 

カスタマイズも可能!

CSSで調整も可能となっております。
Featherlight-2

 

ギャラリーとして使いたい時は多々あると思いますが、Featherlight.jsではギャラリー専用のjsとcssを用意してくれております。

なんとギャラリー版のjsはたったの2KB.軽すぎですw
Featherlight-6

 

画像の右側、左側にマウスを持っていくと、次へ、前へが出現します。
Featherlight-7

 

使い方

<head>
<link href="css/featherlight.min.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/featherlight.min.js"></script>
</head>
<body>
<a href="#box1" data-featherlight="#fl1">Default</a>

<div class="lightbox" id="box1">
<h2>デフォルト</h2>
<p>テスト</p>
</div>
</body>

 

その他オプション、メソッド等はこちら

 

まとめ

いかがでしょうか。個人的にはミニマルなデザインやシンプルなデザインが好きなので、

軽く、シンプルな作りのこのプラグインは非常に良いのではないかと思いました。

 

 

 

今後の励みになりますので、良かったらシェアをお願いします。

このエントリーをはてなブックマークに追加