VenoBox

JavaScript

画像・Google マップ・YouTubeなどを埋め込めるLightbox風jQueryプラグイン「VenoBox」

VenoBoxは色んなコンテンツを埋め込めるLightbox風jQueryプラグインです。具体的には、画像・Google マップ・Vimeo・YouTubeなどといったコンテンツを埋め込むことができます。レスポンシブにも対応しているので、これからこの手の機能を実装する際には選択肢の一つとしてよさそうです。

[ads_center]

VenoBoxの使い方

VenoBox

VenoBox

実際のデモにあるサムネイルをクリックすると、このようにLightbox風に拡大表示されます。レスポンシブに対応しているので画面サイズを拡大・縮小してもそれに合わせてレイアウトが最適化されます。

VenoBox

使い方は、まずjQuery本体とダウンロードしたプラグインファイルを読み込みます。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="venobox/venobox.css" type="text/css" media="screen" />
<script type="text/javascript" src="venobox/venobox.min.js"></script>

続いてHTMLでコンテンツを記述していきます。以下は画像の場合です。aタグのhref属性に拡大された時の画像パスを記述して、imgタグにはサムネイル画像を記述します。

<a class="venobox" href="img1-big.jpg"><img src="img1-small.jpg" alt="image alt"/></a>

あとはプラグインを呼び出すだけです。

$(document).ready(function() {
    $('.venobox').venobox();
});

他にもオプションなどを使ってカスタマイズすることもできます。

関連記事

  1. Unicorn.js

    JavaScript

    ホバーするとテキストがレインボーに光るjQueryプラグイン「Unicorn.js」

    おもしろいプラグインがあったのでご紹介します。テキストにホバーするとレ…

  2. jQuery Autocompleter

    JavaScript

    カスタマイズ性に優れたサジェスト機能を実装できる「jQuery Autocompleter」

    jQuery Autocompleterはカスタマイズ性に優れたサジェ…

  3. Wipe Slider

    JavaScript

    背景画像を滑らかにスライドさせるjQueryプラグイン「Wipe Slider」

    Wipe Sliderは背景画像を滑らかにスライドさせることができるj…

  4. Mobilepopup

    JavaScript

    軽量でモバイルにも最適なポップアップウィンドウを実装できる「Mobilepopup」

    Mobilepopupは、軽量でカスタマイズ性に優れたモバイルにも最適…

  5. Macy.js

    JavaScript

    軽量なグリッドレイアウトを実装できるJSライブラリ「Macy.js」

    Macy.jsは軽量なグリッドレイアウトを実装することができる便利なJ…

  6. Justified Gallery

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP