no-image

JavaScript

Lightboxスタイルのギャラリーやカルーセルを実装できる「slideBox.js」

slideBox.jsはレスポンシブに対応したLightboxスタイルのギャラリーやカルーセルを実装できるjQueryプラグインです。アイテムをグループ化させたりカルーセルページャーをサポートしたりと、機能性もバッチリです。

slideBox.js

デモ

デモにはImage Grid with Zoom、Carousel、Lazy Loadingの3つのサンプルが用意されています。

Image Grid with Zoomではサムネイル画像がグリッドレイアウトで並べられていて、任意のアイテムをクリックするとLightboxスタイルで拡大された画像が表示されます。

拡大時は画面の右側もしくは左側にカーソルを持っていくと矢印に切り替わります。右矢印(右側)の状態でクリックすると次の画像へ、左矢印(左側)の状態でクリックすると前の画像へ切り替えることが可能です。

また、画面中央付近ではカーソルがマイナスがついた虫眼鏡になるので、この状態で画像をクリックすると元のサムネイルリストに戻ります。ちなみに、右上にあるバツ印からでもサムネイルリストに戻ることが可能です。

マークアップも画像タグを並べたり前後ページ・クローズボタンを記述したりするだけなのでとても簡単に実装できると思います。具体的なコードの例は冒頭で紹介したデモページに記載されているので、気になる人はぜひチェックしてみてください。

slideBox.js

関連記事

  1. Air Datepicker

    JavaScript

    軽量でクロスブラウザ、モダンブラウザに対応した「Air Datepicker」

    Air Datepickerは軽量でクロスブラウザ、モダンブラウザに対…

  2. universal-tilt.js

    JavaScript

    パララックスなど多彩なチルト効果を実装できる「universal-tilt.js」

    universal-tilt.jsはパララックスやスケールなど多彩なチ…

  3. jQuery-LightBox

    JavaScript

    軽量でモバイルフレンドリーなLightbox実装「jQuery-LightBox」

    jQuery-LightBoxは、軽量でレスポンシブにも対応したモバイ…

  4. JavaScript

    シンプルな構成で簡単に実装することができるツールチップ「jQuery PowerTip」

    とてもシンプルな構成で簡単に実装することができるjQueryプラグイン…

  5. jQuery Glow
  6. no-image

    JavaScript

    レスポンシブに対応したモーダルウィンドウのようなアラート実装「jquery.alert」

    jquery.alertはレスポンシブに対応したモーダルウィンドウ風の…

最近の記事

  1. Soundcore Liberty Neo(第2世代)
  2. EH-NA0B
  3. KPS-88
  4. Happy Plugs AIR1
  5. cheero Stream 10000mAh

アーカイブ

PAGE TOP