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();
});

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

Nexus 5でテザリングしてMacを接続Nexus 5でテザリングしてMacを接続させるやり方前のページ

画像にモザイクをかけてマウスオーバーで解除できるjQueryプラグイン「pixelate.js」次のページpixelate.js

関連記事

  1. no-image

    JavaScript

    シンプルなイメージスライダーとカルーセルを実装できる「SkySlider」

    SkySliderはシンプルで軽量、そしてレスポンシブにも対応したイメ…

  2. Zoom SlideShow

    JavaScript

    カルーセルのスライドショーとズーム機能を備えた「Zoom SlideShow」

    Zoom SlideShowは、カルーセルによるスライドショーとズーム…

  3. Horizontal Timeline

    JavaScript

    水平方向のタイムラインを実装できる「Horizontal Timeline」

    Horizontal Timelineは水平方向に移動可能なタイムライ…

  4. jQuery Resizable Columns

    JavaScript

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

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

  5. jQuery Lighter

    JavaScript

    優雅なフェードで拡大縮小されるLightbox系ギャラリー・jQuery Lighter

    jQuery Lighterは美しいフェードで画像を拡大縮小させること…

  6. Lity

    JavaScript

    超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

    Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグ…

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP