Image Gallery Threejs

JavaScript

3D回転するカルーセルのイメージギャラリーを実装できるjQueryプラグイン「Image Gallery Threejs」

Image Gallery ThreejsというjQueryプラグインを使えば、3D回転しながらスライドするカルーセルのイメージギャラリーを実装できます。前後の画像をクリックすることで回転しながら画像を見ていくことができます。

[ads_center]

Image Gallery Threejsの使い方

実際のデモは以下から確認することができます。

Image Gallery Threejs

デモ

画像を直接クリックすることでその画像までスライド移動することができます。他にも画面左上にあるprev・next、画像番号をクリックすることでも移動させることが可能です。

またデフォルトでは「default prespective」に設定されていて、水平方向にスライド表示されていきます。

それ以外では「top right prespective」と「top left prespective」があり、これらにすることで左右斜めに傾いたりします。

使い方はこんな感じです。画像パスやidをセットして使います。

$(function(){
  $(".sample").ig3js({
      manifest: [
          {src:"image1.jpg", id:"image1"},
          {src:"image2.jpg", id:"image2"},
          {src:"image3.jpg", id:"image3"}
        ],
        imagePath: 'images/'
    });
});

Image Gallery Threejs

関連記事

  1. VenoBox

    JavaScript

    画像・Google マップ・YouTubeなどを埋め込めるLightbox風jQueryプラグイン「…

    VenoBoxは色んなコンテンツを埋め込めるLightbox風jQue…

  2. jQuery Glow
  3. Monthly.js

    JavaScript

    レスポンシブに対応したカレンダーを実装できる「Monthly.js」

    Monthly.jsはレスポンシブに対応したシンプルで美しいカレンダー…

  4. JavaScript

    フレキシブルなjQueryプラグインのアコーディオンパネル「Flexible Slide-to-to…

    いい感じのアコーディオンがあったので試してみたところ、とてもよさげだっ…

  5. no-image
  6. CurvedText

    JavaScript

    曲線上にテキストを配置できるjQueryプラグイン「CurvedText」

    CurvedTextというjQueryプラグインを使えば、任意の曲線上…

最近の記事

  1. s9+
  2. SRS-LSR200
  3. QC30
  4. リンツ リンドール

アーカイブ

PAGE TOP