jQuery Panorama Viewer

JavaScript

パノラマビューを実装できるjQueryプラグイン「jQuery Panorama Viewer」

jQuery Panorama Viewerはパノラマビューを実装することができるjQueryプラグインです。画像をマウスでドラッグすることで横に広がっている画像を見ていくことができます。スマホでも試してみたところちゃんと動作しました。

[ads_center]

jQuery Panorama Viewerの使い方

jQuery Panorama Viewer

jQuery Panorama Viewer by Pete R. | The Pete Design

jQuery本体とプラグインファイルを読み込んだ状態で、以下のように画像をマークアップします。

<div class="panorama">
    <img src="sample.jpg">
    ...
</div>

で、プラグインをセット

$(".panorama").panorama_viewer({
    repeat: false,
    direction: "horizontal",
    animationTime: 700,
    easing: "ease-out",
    overlay: true
});

実際のデモではこんな感じでとても雄大な自然の景色や都会などを一望することができます。

jQuery Panorama Viewer

ダイナミックなパノラマビューを実装したい時に覚えておきたいですね。

関連記事

  1. JavaScript

    jQuery MobileでWebサイトをスマートフォン対応にする時に見ておきたい記事のまとめ

    今更ながらようやくjQuery Mobileを使い始めたんですが、基本…

  2. no-image

    JavaScript

    3Dキューブによる画像ギャラリー「3D Cube Image Gallery」

    3D Cube Image Galleryは、3Dキューブによるオシャ…

  3. no-image

    JavaScript

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

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

  4. basicContext

    JavaScript

    使いやすいコンテキストメニューを実装できる「basicContext」

    basicContextはシンプルで使いやすいコンテキストメニューを実…

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

    JavaScript

    jQueryでオブジェクトの型を取得して判定などをしたい場合はjQuery.type()を使う

    jQuery.type(obj)を使えばオブジェクトの型を知ることがで…

最近の記事

  1. cheero Stream 10000mAh
  2. BOSE HOME SPEAKER 300
  3. RP-PC112
  4. SRS-XB402M
  5. Lite LR30

アーカイブ

PAGE TOP