ToxicBox

JavaScript

さまざまなコンテンツをポップアップウィンドウで表示できる「ToxicBox」

ToxicBoxは、ライトボックスのjQueryプラグインです。近年、ライトボックスのプラグインは数多く存在しますが、このToxicBoxは、ポップアップウィンドウに写真、コンテナ、通知などのコンテンツを表示できます。サイトでは、統一したスタイルでポップアップウィンドウが表示されます。互換性にも優れていて、IEやChromeはもちろん、FirefoxやOpera、Safariへも対応済み。また、モバイルフリーなのでAndroidからの閲覧もOKです。jQueryは1.7.0もしくはそれ以降のバージョンが必要になります。

画像やコンテナ、YouTubeまで

デモ

  • 画像の快適なロード
  • 画像などのギャラリーのグループ化
  • 単一画像の表示
  • div要素やsectionなどのコンテナの表示
  • 通知の表示
  • ズーム機能
  • 10KB以下という軽量ファイル

デモページを見ていて特に感動したのが、動画投稿サイトYouTubeでアップされている動画を埋め込み、サイトを移動することなくその場で、ポップアップウィンドウ内で再生できたことです。海外サイトなのに、なぜか「久石譲」さんの動画だったのも驚きました! 埋め込んだ状態のものは、さまざまなページで見かけますが、ポップアップウィンドウに表示したときに再生される挙動が、こんなに簡単に実装できるなんてうれしいですね。

ToxicBoxはまだ開発中のようなので、バグもところどころで発生しているようですが、現在のバージョンでも特に大きな問題はなく使用できます。今後の開発に期待したいですね!

ToxicBox

ScrollTriggerスクロールの位置をベースにしたアニメーション「ScrollTrigger」前のページ

シンプルなタイムラインを簡単につくれる「jQuery-TimelineMe」次のページjQuery-TimelineMe

関連記事

  1. Jquery Line Progress Bar
  2. scroll-scope.js

    JavaScript

    親要素の影響を受けずに子要素だけを固定してスクロールさせる「scroll-scope.js」

    scroll-scope.jsは親要素の影響を受けずに子要素だけを固定…

  3. jQuery TextFill

    JavaScript

    テキストをリサイズしてコンテナにフィットさせる「jQuery TextFill」

    jQuery TextFillはテキストをリサイズしてコンテナにフィッ…

  4. JavaScript

    Google マップを簡単でシンプルに使えるようにしてくれる「gmaps.js」

    Google マップをとても簡単に扱えるようにしてくれるgmaps.j…

  5. Micromodal.js

    JavaScript

    アクセシブルで軽量なモーダルダイアログを実装できる「Micromodal.js」

    Micromodal.jsは、アクセシブルでファイル容量も軽量なモーダ…

  6. Force.js

    JavaScript

    要素を手軽にアニメーション化できる「Force.js」

    Force.jsはページ上の要素を手軽にアニメーション化させることがで…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP