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 modal box plugin
  2. scrollMonitor

    JavaScript

    要素が表示領域に入ったり出たりするとイベントを受け取れる「scrollMonitor」

    scrollMonitorは、要素が表示領域(ビューポート)に入ったり…

  3. jqTree

    JavaScript

    JSONデータからツリー構造を作成できるjQueryプラグイン「jqTree」

    jqTreeはJSONデータを元にHTMLでツリー構造を作成できるjQ…

  4. jQuery googleslides
  5. JavaScript

    タッチ、フリック、レスポンシブ対応のスライダーギャラリー「Flickity」

    Flickityはスマフォやタブレットに最適なタッチやフリック、または…

  6. JavaScript

    レスポンシブに対応している軽量のjQueryスライダー「Unslider」

    とても軽量でレスポンシブにも対応しているjQueryスライダー「Uns…

最近の記事

  1. EOS R6
  2. EOS R5
  3. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ

アーカイブ

PAGE TOP