2013/04/03
lightbox系プラグイン「Shadowbox.js」が便利でかっこいい
lightboxといえば、結構前から現在でもサイトでよく使われているjavascriptプラグインです。
似たようなものがいくつかあり、それらをまとめてモーダルボックスやlightboxといったりしますが、
その中で、シンプルで、使いやすくて、ちょっとかっこいいプラグインをご紹介します。
その名も「Shadowbox.js」です！
特徴としては、
・画像の表示、複数画像のスライド
・外部サイト、共有動画サイトの表示
・インラインコンテンツ（ページ内のhtml要素）の表示
・flash(swf)や動画ファイル(SWF,FLV,WMP,QuickTime)の表示
ができるということです。
動画やインラインのものを表示できるものってそう多くはないのではないかなぁと思います。
（他のプラグインを詳しく見てはないのではっきりとはわかりませんが・・・）
DEMOを作成しているので、ぜひそちらをご覧ください!
プラグインのダウンロードはこちらから
Shadowbox
それでは実際の使用方法の説明をします。
Shadowbox.jsの使い方
まずはhead内に以下の記述をします。
|
1 2 | <link type="text/css" href="css/shadowbox.css" rel="stylesheet" media="all" /> <script type="text/javascript" src="js/shadowbox.js"></script> |
そしてその下に、
|
1 2 3 | <script type="text/javascript"> Shadowbox.init(); </script> |
と記述したら、基本はもうOKです！
簡単ですね〜
htmlですが、これは表示させたいものにより違いますので、
デモに沿って説明させて頂きます。
1.画像
|
1 | <a href="sample1.jpg" rel="shadowbox" title="タイトル"><img src="sample1.jpg" class="wid200"/></a> |
relにshadowboxといれればOKです。タイトルを入れたい場合は、titleに記述すればOKです。
2.複数画像ギャラリー化
|
1 2 3 4 5 6 | <ul class="slide"> <li class="slide1"><a href="sample1.jpg" rel="shadowbox[group]" title="タイトル"><img src="sample1.jpg" class="wid200"/></a></li> <li class="slide1"><a href="sample2.jpg" rel="shadowbox[group]" title="タイトル"><img src="sample2.jpg" class="wid200"/></a></li> <li class="slide1"><a href="sample3.jpg" rel="shadowbox[group]" title="タイトル"><img src="sample3.jpg" class="wid200"/></a></li> <li class="slide1"><a href="sample4.jpg" rel="shadowbox[group]" title="タイトル"><img src="sample4.jpg" class="wid200"/></a></li> </ul> |
こちらは、relのshadowboxにshadowbox[◯◯◯◯]と同じ単語を入れるだけです。
そうすると、「前へ」「次へ」のボタン等が出てきます。(ダウンロードしたファイルに画像があります。)
3.外部サイト
|
1 | <a href="http://www.yahoo.co.jp" rel="shadowbox">YAHOO!</a> |
こちらは、hrefの中をurlにすればOKです。
サイズを指定したい場合は、以下のようにします。
|
1 | <a href="http://www.yahoo.co.jp" rel="shadowbox;width=480;height=360">YAHOO!</a> |
これは、おそらくなんですが、yahooの背景が黒くなってしまうのは、
このshadowboxの背景は黒で設定されており、かつbodyや一番背後の要素に背景色が設定されてないからだと思います。
4.youtube
|
1 | <a href="http://www.youtube.com/embed/SYLj372c-zM?rel=0" rel="shadowbox;width=480;height=360">怒らない猫(youtube)</a> |
こちらは、youtubeのURLは、動画のページにある「共有」>「埋め込みコード」のsrcの部分のURLでないとダメなようです。
5.swf(動画ファイルも同じです。)
|
1 | <a href="main.swf" rel="shadowbox;width=730;height=300">swf</a> |
シンプルにhrefに動画のパスを記述して、relでサイズを指定してあげてください。
6.インラインコンテンツ
|
1 | <a href="#content" rel="shadowbox">ページ内コンテンツ1</a> |
これはhrefにページ内リンクを設定するような形で、「#◯◯◯◯」を記述します。
idでないとダメなようです。
cssで「#◯◯◯◯」をdeisplay:none;を設定しておけば、
shadowboxで開くときに勝手に表示させてくれます。
ちなみにこの場合で表示されるのは、「#◯◯◯◯」の中の要素になります。
デモで説明すると、
|
1 2 3 4 5 6 7 8 9 | <div id="content"> <!-- shadowboxで表示される要素はここから--> <div class="contents"> <h1>ページ内コンテンツ1</h1> 自由に設定したコンテンツを隠しておいて、<br> shaowboxで表示させることができます。 </div> <!-- ここまで --> </div> |
となります。#contentに背景色を設定しても反映されないということになりますので、お気をつけください。
オプションもいろいろありますので、
一部説明させて頂きます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | animate:true //表示するのアニメーションの有無 animateFade: true //表示する際フェイドさせるか否か initialHeight: 160 //relで高さを指定しない場合の最小の高さ initialWidth: 320 //relで幅を指定しない場合の最小の幅 overlayColor: "#000" //背景の色の指定 overlayOpacity: 0.5 //背景の透過度の設定 showOverlay: true //背景の表示の有無 modal:false //trueに設定すると、boxを表示させた時に背景をクリックしてもboxが閉じない handleOversize: "resize" //コンテンツが大きい場合リサイズする "drag"に設定するリサイズせず、ドラッグ可能になる ギャラリーの設定 slideshowDelay: 0 //スライドを自動送りの時間、1で１秒 0だと自動送りしない continuous: false //ギャラリーをループできるようにするか否か counterLimit: 10 //カウントの限界値 counterType: default //skipに設定すると枚数のカウントを別々にしてリンクできるようにする displayCounter: true //カウントの表示の有無 displayNav: true //ナビゲーションの表示の有無 |
オプションを設定する場合は、以下のような記述になります。
|
1 2 3 4 5 | Shadowbox.init({ overlayColor:'#fff', overlayOpacity:'0.8', continuous:true }); |
とても使い勝手のいいプラグインですね！
Author Profile
スターフィールド編集部
SHARE
