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. pell

    JavaScript

    軽量でシンプルなWeb用のWYSIWYGエディタを実装できる「pell」

    pellは1.5KBと非常に軽量でシンプルなWeb用のWYSIWYGエ…

  3. Slyder

    JavaScript

    レスポンシブ対応のスライダーナビゲーションを実装できる「Slyder」

    Slyderはレスポンシブに対応したスライダーナビゲーションを実装でき…

  4. Remodal

    JavaScript

    レスポンシブ対応のお洒落なモーダルウィンドウを実装できるjQueryプラグイン「Remodal」

    RemodalというjQueryプラグインを使えば、レスポンシブに対応…

  5. Multi-level push menu
  6. Los Scrollos

    JavaScript

    シンプルで滑らかな水平スクロール実装「Los Scrollos」

    Los Scrollosはシンプルで滑らかな水平スクロールを実装できる…

コメント

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

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

最近の記事

  1. ライオン システマ 超コンパクト ふつう
  2. タリーズ ハムチーズ&サラダサンド
  3. クリニカのY字タイプのフロス
  4. 日和山公園の桜
  5. 成城石井 フレンチロースト

アーカイブ

PAGE TOP