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. JavaScript

    ページ内のリンクをスムーズに移動できるsmoothScroll.jsを使ってみた

    ページ内のリンクをスムーズに移動してくれる「smoothScroll.…

  2. Navi.js

    JavaScript

    ナビゲーションとコンテンツが連動して切り替わるjQueryプラグイン「Navi.js」

    ナビゲーションとコンテンツが連動して切り替わる便利なjQueryプラグ…

  3. Tabby

    JavaScript

    軽量でシンプルなタブメニューを実装できるjQueryプラグイン「Tabby」

    とても軽量でシンプルなタブメニューを実装できるjQueryプラグイン「…

  4. JavaScript

    スマホやタブレットでのスワイプに対応したモバイルにも最適なjQueryスライダー「Swiper」

    とてもよさそうだったのでメモしときます。スワイプで切り替えることができ…

  5. no-image

    JavaScript

    インスタの写真や動画を表示できる軽量なjQueryプラグイン「Instagram Lite」

    Instagram Liteは指定したユーザーのインスタグラムの写真や…

  6. jQuery Tabs with Content Overlays

コメント

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

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

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP