Blog

シンプルでフレキシブルでレスポンシブなlightboxプラグイン「Nivo Lightbox」

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

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

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

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

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

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

 

DEMO

 
 

Nivo Lightboxの導入方法

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

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

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

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

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

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

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

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

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ