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

Erge Drop Down Menu Controlエレガントなドロップダウンメニューを実装できる「Erge Drop Down Menu Control」前のページ

かっこいいアニメーション付きメニュー実装「Animated menu concept」次のページAnimated menu concept

関連記事

  1. Simple HTML Menu

    JavaScript

    モバイルにもピッタリなレスポンシブ対応のメニュー実装「Simple HTML Menu」

    Simple HTML Menuは、モバイルにもピッタリなレスポンシブ…

  2. JavaScript

    レスポンシブに対応して画像をポップアップ表示してくれる素敵なjQueryプラグイン「fancyBox…

    とても有名なプラグインですが、今まで使ってみたことがなかったので試して…

  3. slider Menu

    JavaScript

    メニューリストをスライダーメニューにするjQueryプラグイン「slider Menu」

    slider Menuはメニューリストをスムーズにスライダーメニューに…

  4. SpriteSpin

    JavaScript

    タッチにも対応した360度ビューを実装できるjQueryプラグイン「SpriteSpin」

    SpriteSpinはプロダクトページなどで役立つ、360度ビューを実…

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

    JavaScript

    jQuery(JavaScript)で指定した要素の子要素数や最大文字数を配列内から取得する

    jQueryで指定した要素の子要素の数やその文字数、文字なんかを配列に…

  6. JK Responsive Youtube Video and Image Gallery

最近の記事

  1. クリニカのY字タイプのフロス
  2. 日和山公園の桜
  3. 成城石井 フレンチロースト
  4. COMOLI カシミアシルクニットパーカ
  5. 橋

アーカイブ

PAGE TOP