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. Bootstrap Navbar Sidebar

    JavaScript

    サイドに固定できるナビゲーション実装「Bootstrap Navbar Sidebar」

    Bootstrap Navbar Sidebarは、サイドに固定できる…

  2. no-image

    JavaScript

    サイドバーをフローティングできる「FloatSidebar.js」

    FloatSidebar.jsはサイドバーをフローティングできるVan…

  3. Auto-Text-Scroll

    JavaScript

    自動でテキストが垂直にスクロールしていく「Auto-Text-Scroll」

    Auto-Text-Scrollは自動でテキストが垂直でスクロールして…

  4. multi-list

    JavaScript

    複数の選択可能なリストにするためのjQueryプラグイン「multi-list」

    multi-listは、順序付けされていないリストを複数の選択可能なリ…

  5. Magnific Popup

    JavaScript

    レスポンシブに対応したLightbox風のjQueryプラグイン「Magnific Popup」

    レスポンシブに対応したLightbox風のjQueryプラグイン「Ma…

  6. Unite Gallery

    JavaScript

    レスポンシブな画像・動画ギャラリーを実装できる「Unite Gallery」

    Unite Galleryは、レスポンシブに対応した画像・動画ギャラリ…

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP