ITエンジニア/デザイナ向けにオープンソースを毎日紹介

クリックして写真を拡大表示するライブラリとしてはLightboxが知られていますが、いつも同じライブラリを使っていると次第に見飽きてしまうものです。そこでライブラリを変えてみることでユーザの目を新たに引くという施策はいかがでしょうか。

FluidboxはjQueryプラグインとして提供されるLeightbox系ライブラリです。

Fluidboxの使い方

使い方はjQueryプラグインだけにとてもシンプルで、fluidboxメソッドを実行するだけです。aタグでリンクされている画像を拡大版として扱います。

<a href="...">
  <img src="..." alt="" />
</a>

<script>
$(function () {
    $('.gallery a, a[rel="lightbox"]').fluidbox();
})
</script>

Fluidboxのデモ

まずはサムネイルが並んでいます。
まずはサムネイルが並んでいます。

クリックで表示します。
クリックで表示します。

Fluidboxの特徴としてはこのウィンドウいっぱいに広がって表示されることかと思います。

縦型の写真でもいっぱいに広がります。
縦型の写真でもいっぱいに広がります。

こんな感じにテキストコンテンツがあっても…
こんな感じにテキストコンテンツがあっても…

背景が白くなって表示されます。
背景が白くなって表示されます。

写真が一部しか出ていなくとも…
写真が一部しか出ていなくとも…

ズームアニメーションしながら表示されます。
ズームアニメーションしながら表示されます。

ウィンドウをリサイズしたり、画像以外の部分をクリックすると拡大表示が解除されるようになっています。

FluidboxはjQuery/JavaScript製のオープンソース・ソフトウェア(GPL)です。

Fluidbox, a jQuery plugin for beautiful lightboxes

terrymun/Fluidbox

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2