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を実装したい時には覚えておきたいプラグインですね。

jQuery Flat Shadowフラットデザインに影をつけてくれるjQueryプラグイン「jQuery Flat Shadow」前のページ

ネオンサインのようなエフェクトを実装できるjQueryプラグイン「No Vacancy」次のページNo Vacancy

関連記事

  1. jRCarousel

    JavaScript

    モダンエフェクトなレスポンシブ対応のカルーセル実装「jRCarousel」

    jRCarouselはモダンエフェクトなカルーセルを実装できるjQue…

  2. Basic Metro Dynamic jQuery Tab Menu
  3. Effect Ideas for Card Stacks
  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでパターン化されたクラス名をループで1つずつ取り出して処理する

    どうでもいい内容なんですがちょっとやりたかったのでメモです。jQuer…

  5. no-image

    JavaScript

    高さを揃えたレスポンシブな画像ギャラリー「jQuery Mosaic plugin」

    jQuery Mosaic pluginは高さを揃えたレスポンシブな画…

  6. JavaScript

    レスポンシブにも対応している人気のjQueryプラグインのスライダー「Nivo Slider」の使い…

    レスポンシブにも対応している人気のjQueryプラグイン「Nivo S…

コメント

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

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

最近の記事

  1. OWL-LPB6701LA
  2. cheero Power Mountain mini 30000mAh CHE-110
  3. 帆布カメラインナーケース B-2タイプ

アーカイブ

PAGE TOP