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. Vertical Fixed Navigation #2
  2. table-dragger

    JavaScript

    ドラッグ&ドロップでテーブルを並べ替えられる「table-dragger」

    table-draggerはドラッグ&ドロップでテーブルの並べ替えを可…

  3. P-Loading

    JavaScript

    パワフルなローディングマスクを実装できるjQueryプラグイン「P-Loading」

    P-Loadingは、パワフルなローディングマスクを手軽に実装すること…

  4. JavaScript

    シンプルでスワイプにも対応したスライダーならSimple jQuery sliderがオススメ

    シンプルでスマホのスワイプにも対応したスライダーを実装したいって時にオ…

  5. Owl Carousel 2

    JavaScript

    美しいレスポンシブなカルーセルスライダーを実装できる「Owl Carousel 2」

    Owl Carousel 2は、美しいレスポンシブなカルーセルスライダ…

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

    JavaScript

    jQueryの超基本的なアニメーションを試してみる

    jQueryの基本的なアニメーションを試してみました。やっぱりアニメー…

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP