Block Slide

JavaScript

jQueryプラグインで印象的なエフェクトで魅せるモーダルウィンドウ「Block Slide」

Block SlideというjQueryプラグインを使えば印象的なエフェクトで魅せるモーダルウィンドウを実装することができます。エフェクトは色々あり、オプションを指定することで変更することができます。クールなモーダルウィンドウを取り入れたい時に覚えておきたいプラグインですね。

[ads_center]

Block Slideの使い方

Block Slide

Block Slide

このように、コンテンツをクリックするとLightbox風な感じで魅せることができます。お洒落ですね。

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

<script src="jquery.js"></script>
<script src="javascript.js"></script>

HTMLではコンテンツが入ってくるコンテナを用意しておきます。

<div id="slider">

</div>

で、プラグインを呼び出します。ここにコンテンツも記述していきます。

$('#block-slide').blockSlide({
    'imgurl': 'background.jpg',
    'animation': 'fall'	
    },
    {
        '1.jpg': "<h1>タイトル1</h1>"
            +"<p>sample text sample text sample text sample text</p>"
            +"<p>sample text sample text sample text sample text</p>"
            +"<div class='button'>ボタン</div>"
            +"</div>",

        '2.jpg': "<h1>タイトル2</h1>"
            +"<p>sample text sample text sample text sample text</p>"
            +"<p>sample text sample text sample text sample text</p>"
            +"<div class='button'>ボタン</div>"
            +"</div>",

        '3.jpg': "<h1>タイトル3</h1>"
            +"<p>sample text sample text sample text sample text</p>"
            +"<p>sample text sample text sample text sample text</p>"
            +"<div class='button'>ボタン</div>"
            +"</div>",
        // (・・・中略・・・)
});

animationは全部で以下の7つがあるので、自分の好きなものを指定することができます。

  • slide
  • zoom
  • rotate
  • fall
  • fly
  • rotatepoint
  • goround

オプションは他にも色々と用意されているので気になる方は是非チェックしてみて下さい。

Impulse Slider3Dスライダーを実装できるjQueryプラグイン「Impulse Slider」前のページ

jQueryプラグインでタッチ&マウスイベントにも対応している画像ズーム「smartJQueryZoom」次のページ

関連記事

  1. jQuery Tabs with Content Overlays
  2. jQuery Modal

    JavaScript

    シンプルでレスポンシブなモーダルボックス「jQuery Modal」

    jQuery Modalはシンプルでレスポンシブに対応したモーダルボッ…

  3. jQuery Resizable Columns

    JavaScript

    テーブルの列の幅をドラッグでサイズ変更できる「jQuery Resizable Columns」

    じっくりテーブル内の情報を見たい時なんかに便利そうですね。テーブルの列…

  4. jQuery Section Navi Plugin
  5. no-image

    JavaScript

    スクロール時に要素を固定できるjQueryプラグイン「ScrollFix」

    ScrollFixはスクロール時に特定の要素を固定して表示できるjQu…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. セミの抜けがら
  2. Nikeスポーツバンド(アンスラサイト/ブラック)
  3. COMOLI 和紙コットンリストバンド
  4. スターバックス インドネシア アチェ
  5. ベーコンとほうれん草のキッシュ

アーカイブ

PAGE TOP