Vimeo Carousel Gallery

JavaScript

Vimeoのカルーセルを実装できるjQueryプラグイン「Vimeo Carousel Gallery」

Vimeo Carousel GalleryというjQueryプラグインを使えば、Vimeoのカルーセルを実装することができます。オススメVimeo集の紹介やVimeoのギャラリーを作りたい時なんかに使えそうですね。以下は使い方です。

[ads_center]

Vimeo Carousel Galleryの使い方

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

Vimeo Carousel Gallery

デモ

デモでは下部のサムネイルが並んでいる両端に左右の矢印ナビゲーションがついています。シンプルでとても使いやすくていいですね。

使い方は、まずjQuery本体とプラグインを読み込みます。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="lib.js"></script>

そして以下のようにVimeoのリストなどを設定していけばOKです。

var data = {
    "main" : "VimeoのURL",
    "videos" : [
        { "url" : "VimeoのURL" },
        { "url" : "VimeoのURL" },
        <!-- 中略 -->
        { "url" : "VimeoのURL" }
    ]
}

Vimeo.init({
    container: $('.gallery')
});

Vimeo Carousel Gallery

Tikslus Carouselアニメーションをつけれるカルーセルを実装できるjQueryプラグイン「Tikslus Carousel」前のページ

Photoshopの用語で日本語を英語に変換したい時に役立つ対応表次のページPhotoshopの日本語と英語の用語

関連記事

  1. jQuery Lighter

    JavaScript

    優雅なフェードで拡大縮小されるLightbox系ギャラリー・jQuery Lighter

    jQuery Lighterは美しいフェードで画像を拡大縮小させること…

  2. no-image

    JavaScript

    インタラクティブなツリー機能を実装できる「jstree」

    jstreeはインタラクティブなツリー機能を実装できるjQueryプラ…

  3. imgViewer2

    JavaScript

    画像のズームとパン機能を備えたjQueryプラグイン「imgViewer2」

    imgViewer2は画像のズームとパン機能を備えたjQueryプラグ…

  4. no-image

    JavaScript

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

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

  5. JavaScript

    画像を素敵なアニメーションで次々に表示させるjQueryのイメージギャラリー「Heap Shot」

    とても素敵な画像の見せ方だったのでご紹介します。jQueryプラグイン…

  6. Mirror Effect

    JavaScript

    ミラーエフェクトによるかっこいいスライドショー実装「Mirror Effect」

    Mirror EffectはWebサイト内でかっこいいミラーエフェクト…

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP