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. no-image

    JavaScript

    トップに素早く戻れるボタンを実装できるjQueryプラグイン「TopButton」

    TopButtonはボタンをクリックするだけで画面トップに素早く戻れる…

  2. jQueryプラグイン

    JavaScript

    jQueryプラグイン・2014年下半期70選まとめ

    今年も残すところ後わずかとなってしまいました。というわけで、2014年…

  3. JavaScript

    レスポンシブ対応で優雅なエフェクトが印象的なjQueryスライダー「Juicy Slider」

    レスポンシブに対応している軽量のjQueryスライダー「Juicy S…

  4. no-image

    JavaScript

    jQueryとCSS3を使った縦型アコーディオン「Accordion-menu」

    Accordion-menuは、jQueryとCSS3を使ったシンプル…

  5. JavaScript

    シンプルでスタイリッシュなLightbox風のjQueryプラグイン「Featherlight」

    シンプルでスタイリッシュなデザインが特徴的なLightbox風のjQu…

  6. no-image

    JavaScript

    フラットでシンプルなカラーピッカー実装「Pickr」

    Pickrはフラットでシンプルなカラーピッカーを実装できるのが特徴です…

コメント

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

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

最近の記事

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

アーカイブ

PAGE TOP