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

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

関連記事

  1. JavaScript

    レスポンシブなテキストを実装できるjQueryプラグイン「Responsive Text」

    Responsive TextというjQueryプラグインを使えば、と…

  2. JavaScript

    クリックで画像や要素にオーバーレイを表示させるjQueryプラグイン「Purplecoat.js」

    Purplecoat.jsはクリックすると画像や好きな要素にオーバーレ…

  3. css3-mediaqueries-js

    JavaScript

    Media QueriesをIE8以下でも使えるようにするための「css3-mediaqueries…

    前回、Media Queriesの@mediaを使用したCSSをまとめ…

  4. Responsive Sidebar Navigation
  5. lightgallery.js
  6. Stepper.js

    JavaScript

    数値を手軽にアップ・ダウンできるステッパーを実装できる「Stepper.js」

    Stepper.jsは数値入力ボックスでの数値を手軽にアップ・ダウンで…

コメント

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

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

最近の記事

  1. KPS-88
  2. Happy Plugs AIR1
  3. cheero Stream 10000mAh
  4. BOSE HOME SPEAKER 300
  5. RP-PC112

アーカイブ

PAGE TOP