Blog

lightbox系プラグイン「Shadowbox.js」が便利でかっこいい

2013.04.03Cat:javascript デザイナー

lightboxといえば、結構前から現在でもサイトでよく使われているjavascriptプラグインです。
似たようなものがいくつかあり、それらをまとめてモーダルボックスやlightboxといったりしますが、
その中で、シンプルで、使いやすくて、ちょっとかっこいいプラグインをご紹介します。

その名も「Shadowbox.js」です!
特徴としては、
・画像の表示、複数画像のスライド
・外部サイト、共有動画サイトの表示
・インラインコンテンツ(ページ内のhtml要素)の表示
・flash(swf)や動画ファイル(SWF,FLV,WMP,QuickTime)の表示

ができるということです。

動画やインラインのものを表示できるものってそう多くはないのではないかなぁと思います。
(他のプラグインを詳しく見てはないのではっきりとはわかりませんが・・・)

DEMOを作成しているので、ぜひそちらをご覧ください!

DEMO

 

プラグインのダウンロードはこちらから
Shadowbox

それでは実際の使用方法の説明をします。

Shadowbox.jsの使い方

まずはhead内に以下の記述をします。

そしてその下に、

と記述したら、基本はもうOKです!
簡単ですね〜

htmlですが、これは表示させたいものにより違いますので、
デモに沿って説明させて頂きます。

1.画像

relにshadowboxといれればOKです。タイトルを入れたい場合は、titleに記述すればOKです。

2.複数画像ギャラリー化

こちらは、relのshadowboxにshadowbox[◯◯◯◯]と同じ単語を入れるだけです。
そうすると、「前へ」「次へ」のボタン等が出てきます。(ダウンロードしたファイルに画像があります。)

3.外部サイト

こちらは、hrefの中をurlにすればOKです。
サイズを指定したい場合は、以下のようにします。

これは、おそらくなんですが、yahooの背景が黒くなってしまうのは、
このshadowboxの背景は黒で設定されており、かつbodyや一番背後の要素に背景色が設定されてないからだと思います。

4.youtube

こちらは、youtubeのURLは、動画のページにある「共有」>「埋め込みコード」のsrcの部分のURLでないとダメなようです。

5.swf(動画ファイルも同じです。)

シンプルにhrefに動画のパスを記述して、relでサイズを指定してあげてください。

6.インラインコンテンツ

これはhrefにページ内リンクを設定するような形で、「#◯◯◯◯」を記述します。
idでないとダメなようです。
cssで「#◯◯◯◯」をdeisplay:none;を設定しておけば、
shadowboxで開くときに勝手に表示させてくれます。

ちなみにこの場合で表示されるのは、「#◯◯◯◯」の中の要素になります。
デモで説明すると、

となります。#contentに背景色を設定しても反映されないということになりますので、お気をつけください。

 

オプションもいろいろありますので、
一部説明させて頂きます。

オプションを設定する場合は、以下のような記述になります。

とても使い勝手のいいプラグインですね!

Author Profile

abe
abe
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ