Nivo Lightbox

JavaScript

Lightbox系のレスポンシブ対応のjQueryプラグイン「Nivo Lightbox」

シンプルでレスポンシブにも対応しているLightbox系のjQueryプラグイン「Nivo Lightbox」をご紹介します。画像以外にも動画やWebページを表示させることができます。画像を一枚ずつ表示させたり、グループ別にまとめたりもできるので便利ですね。以下は使い方です。

[ads_center]

使い方

jQueryとプラグインのコアファイルを読み込みます。

<link rel="stylesheet" href="nivo-lightbox.css" type="text/css" />
<link rel="stylesheet" href="themes/default/default.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="nivo-lightbox.min.js"></script>

続いてマークアップを記述していきます。画像や動画、またはWebページを埋め込むことができます。

<a href="image_large.jpg" title="画像タイトル">
    <img src="image_thumb.jpg" alt="" />
</a>
<a href="WebページのURL">Webページ</a>
<a href="YouTubeのURL">YouTube</a>

あとはプラグインをセットすればOKです。

<script>
$(document).ready(function(){
    $('a').nivoLightbox();
});
</script>

オプションも色々と用意されているので詳細は公式サイトで確認することができます。

レスポンシブにも対応したLightboxを実装したい時には覚えておきたいプラグインですね。

関連記事

  1. roll.js

    JavaScript

    スクロールによるページネーション、進捗度、ポジションなどの値を取得できる「roll.js」

    roll.jsはスクロールによるページネーション、進捗度、ポジションな…

  2. jQuery Slideout Menu

    JavaScript

    スライドしてメニュー表示できるjQueryプラグイン「jQuery Slideout Menu」

    jQuery Slideout Menuはメニューをスライドして表示さ…

  3. no-image

    JavaScript

    カスタマイズ性の高いjQueryアラート・モーダル・lightboxプラグイン「jAlert」

    jAlertはカスタマイズ性の高いjQueryアラート・モーダル・li…

  4. Gradientify

    JavaScript

    シンプルなCSSグラデーション変化を実装できる「Gradientify」

    GradientifyはシンプルなCSSグラデーション変化を実装するこ…

  5. JavaScript

    レスポンシブに対応して画像をポップアップ表示してくれる素敵なjQueryプラグイン「fancyBox…

    とても有名なプラグインですが、今まで使ってみたことがなかったので試して…

  6. CSS3 3D Text Plugin for jQuery

コメント

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

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

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP