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

    JavaScript

    レスポンシブ対応で軽量なハンバーガーメニューを実装できる「elmenu」

    elmenuはレスポンシブに対応した軽量のハンバーガーメニューを実装す…

  2. scrollUp

    JavaScript

    スクロールしていくと先頭に戻るボタンを表示してくれるjQueryプラグイン「scrollUp」

    下へスクロールしていくと、先頭に戻るボタンを表示してくれるjQuery…

  3. AOS

    JavaScript

    スクロールに合わせていろんなアニメーションで表示できる「AOS」

    AOSはスクロールに合わせてフェードやフリップ、ズームなどのアニメーシ…

  4. Tilt Hover Effects

    JavaScript

    ホバーによるチルトエフェクトを実装できる「Tilt Hover Effects」

    指定したアイテムにホバーすることでオシャレなチルトエフェクトを実装する…

  5. Flex-box Gallery

    JavaScript

    ランダムサイズの画像をかっこいいギャラリーにしてくれる「Flex-box Gallery」

    Flex-box Galleryは、ランダムサイズによる画像たちをかっ…

コメント

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

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

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP