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

VenoBox

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

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

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

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

オススメ商品

Archives