no-image

JavaScript

レスポンシブ対応のjQuery Lightbox & Popupプラグイン「Flashy」

Flashyはレスポンシブに対応したjQuery Lightbox & Popupプラグインです。画像はもちろん、インラインコンテンツ、iframe、vimeo、ユーチューブにも対応しています。キーボードもサポートしているので操作性も良好です。

Flashy

Flashy

デモでは画面中央に複数のサムネイル画像が並べられています。これをクリックすると拡大された画像が表示される仕組みです。拡大時の画面では両端に前後移動できる矢印アイコンが設置されていて、ここから前後の画像に切り替えることができます。

また、キーボードもサポートしているのでキーボードの左右の矢印キーからでも前後移動が可能です。

左上からは画像の総数と現在の何番目の画像が開かれているかが確認できます。元に戻る場合は右上のバツ印をクリックするか、escキーからでも戻ることが可能です。

サムネイル画像の下にはカスタムタイプのデモも用意されています。Vimeo、YouTube、iFrame、Inlineというボタンがあり、各ボタンをクリックするとそのタイプのデモをチェックできます。

多彩なコンテンツをLightboxで表示させたい人は、ぜひ「Flashy」を活用されてみてはいかがでしょうか? ライセンスはMITになります。

no-imageシンプルで軽量なスクロールアニメーション実装「animateMePlz」前のページ

高速・軽量なコンテキストメニュー実装「hummingbird-popover」次のページhummingbird-popover

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのbindメソッドとliveメソッドの簡単な違いや使い方

    bindとliveの違いがちょっとわかりずらかったのでまとめてみました…

  2. Captall

    JavaScript

    画像やDOM要素の上にキャプションを表示することができるjQueryプラグイン「Captall」

    CaptallというjQueryプラグインを使えば、画像や設定したDO…

  3. no-image

    JavaScript

    コンテナのサイズに合わせて要素を動的に拡大・縮小できる「Scalable」

    Scalableは、コンテナ領域内にある要素をコンテナのサイズに合わせ…

  4. SweetAlert2

    JavaScript

    カスタマイズ性が高くアクセシビリティ(WAI ARIA)に優れたアラート実装「SweetAlert2…

    SweetAlert2は、レスポンシブ対応でカスタマイズ性が高くアクセ…

  5. emotion-ratings

    JavaScript

    絵文字を使ったレーティング機能を実装できる「emotion-ratings」

    emotion-ratingsは絵文字を使ったレーティング機能を実装で…

  6. shCircleLoader

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP