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. jQuery_Overlay_Menu
  2. hop

    JavaScript

    Webページ上の好きな場所をハイライトできる「hop」

    hopはオーバーレイされたWebページ上の好きな場所をハイライトするこ…

  3. no-image

    JavaScript

    シンプルでベーシックなJavaScriptによるlightbox実装「halkaBox.js」

    halkaBox.jsは、シンプルでベーシックなJavaScriptに…

  4. no-image

    JavaScript

    さまざまなデバイスに対応したパララックスを実装できる「PARALLAX」

    PARALLAXは、さまざまなデバイスに対応したシンプルなパララックス…

  5. Prism Effect Slider

    JavaScript

    プリズム効果を実装することができるスライダー「Prism Effect Slider」

    おもしろいスライダーがあったのでご紹介します。Prism Effect…

  6. no-image

    JavaScript

    固定されたフローティングメニューを実装できる「jquery-dice-menu」

    jquery-dice-menuは、固定されたシンプルなフローティング…

最近の記事

  1. iPhone 11 ProとApple Watch Hermès
  2. cheero Energy Plus mini Wireless 4400mAh
  3. cheero 2 port PD Charger
  4. 台座と紅葉
  5. ニルヴァーナ バターチキンカレー

アーカイブ

PAGE TOP