久しぶりにjQueryプラグインを紹介します。

今回紹介するのは、もうすでにありふれているlightbox系のプラグインですが、

最近のフラットデザインに則したもので、
プラグインにもその波が押し寄せてきているということでしょうか。。

レスポンシブなのはいいですね！
今までのものとデザイン的に大きく変わったわけではなく、シンプルになっています。

このプラグインでは、
Ajax、Iframe,SWF,Youtube,Vimeo,InlineHTML
等が表示出来ます。

デモは以下からご覧ください。

DEMO

Nivo Lightboxの導入方法

まずは、head内に以下のようにして、プラグイン等を読み込むようにします。

JavaScript

<link type="text/css" href="css/nivo-lightbox.css" rel="stylesheet" media="all" /> <link type="text/css" href="themes/default/default.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/nivo-lightbox.min.js"></script>

1 2 3 4

<link type="text/css" href="css/nivo-lightbox.css" rel="stylesheet" media="all" /> <link type="text/css" href="themes/default/default.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/nivo-lightbox.min.js"></script>

 
さらにその下に、javascriptを記述します。

JavaScript

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

1 2 3 4 5

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

 
最後に、HTMLですが、
こちらはシンプルで、

XHTML

<a href="sample1.jpg"> 　<img src="sample1.jpg" /> </a>

1 2 3

<a href="sample1.jpg"> 　<img src="sample1.jpg" /> </a>

でOKです！今までのものはrelに記述するパターンが多かったのですが、
なにもなくてもよいようです！
(ただし、これだとすべてのa要素の指定なので、class指定にするのが実際良いかもしれません)

オプションもいくつかありますので、以下をご覧ください。

JavaScript

$(document).ready(function(){ $('a').nivoLightbox({ effect: 'slideDown',// 表示の効果、fadeScale/slideLeft/slideRight/slideUp/slideDown/fall theme: 'default',// テーマの指定 keyboardNav: true,// キーボード操作の可否 (left/right/escape) onInit: function(){},// ライトボックスを読み込んだ際のコールバック beforeShowLightbox: function(){},// ライトボックスが表示される前のコールバック afterShowLightbox: function(lightbox){},// ライトボックスが表示された前のコールバック beforeHideLightbox: function(){},// ライトボックスが閉じる前のコールバック afterHideLightbox: function(){},// ライトボックスが閉じた前のコールバック onPrev: function(element){},// ライトボックスのギャラリーで前へを押した際のコールバック onNext: function(element){},// ライトボックスのギャラリーで次へを押した際のコールバック errorMessage: '読み込むことが出来ませんでした！さーせん！'// 読み込み失敗時のエラーメッセージ }); });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

$(document).ready(function(){     $('a').nivoLightbox({       effect: 'slideDown',// 表示の効果、fadeScale/slideLeft/slideRight/slideUp/slideDown/fall       theme: 'default',// テーマの指定       keyboardNav: true,// キーボード操作の可否 (left/right/escape)       onInit: function(){},// ライトボックスを読み込んだ際のコールバック       beforeShowLightbox: function(){},// ライトボックスが表示される前のコールバック       afterShowLightbox: function(lightbox){},// ライトボックスが表示された前のコールバック       beforeHideLightbox: function(){},// ライトボックスが閉じる前のコールバック       afterHideLightbox: function(){},// ライトボックスが閉じた前のコールバック       onPrev: function(element){},// ライトボックスのギャラリーで前へを押した際のコールバック       onNext: function(element){},// ライトボックスのギャラリーで次へを押した際のコールバック       errorMessage: '読み込むことが出来ませんでした！さーせん！'// 読み込み失敗時のエラーメッセージ     }); });

 
また、写真等を表示する際に、
タイトルをつける方法と、ギャラリーにする方法は以下になります。

XHTML

・タイトルをつける <a href="sample1.jpg" title="タイトル"><img src="sample1.jpg" /></a> ・ギャラリーにする <li class="slide1"><a href="sample1.jpg" title="タイトル" data-lightbox-gallery="gallery1"><img src="sample1.jpg" /></a></li> <li class="slide1"><a href="sample2.jpg" title="タイトル" data-lightbox-gallery="gallery1"><img src="sample2.jpg" /></a></li> <li class="slide1"><a href="sample3.jpg" title="タイトル" data-lightbox-gallery="gallery1"><img src="sample3.jpg" /></a></li> <li class="slide1"><a href="sample4.jpg" title="タイトル" data-lightbox-gallery="gallery1"><img src="sample4.jpg" /></a></li>

1 2 3 4 5 6 7 8

・タイトルをつける <a href="sample1.jpg" title="タイトル"><img src="sample1.jpg" /></a>   ・ギャラリーにする <li class="slide1"><a href="sample1.jpg" title="タイトル" data-lightbox-gallery="gallery1"><img src="sample1.jpg" /></a></li> <li class="slide1"><a href="sample2.jpg" title="タイトル" data-lightbox-gallery="gallery1"><img src="sample2.jpg" /></a></li> <li class="slide1"><a href="sample3.jpg" title="タイトル" data-lightbox-gallery="gallery1"><img src="sample3.jpg" /></a></li> <li class="slide1"><a href="sample4.jpg" title="タイトル" data-lightbox-gallery="gallery1"><img src="sample4.jpg" /></a></li>

今後はコレにしようかな〜

 
ダウンロードはこちらから
Nivo Lightbox – Dev7studios