dogmap.jp

画像だけでなく、各種動画ファイル、YouTubeなどの動画サイト、自サイト内の別ページを lightbox 風に表示するための jQuery用プラグインです。
コンテンツを表示する際のフレームを通常の白枠ではなく、画像を使用したフレームに変更することもできます。
フリーの FLV プレイヤー JW FLV Player を入手することで FLV 形式のファイルを扱えるようになります。

デモは以下のリンクからどうぞ。
jQuery.lightpop.js サンプル

ダウンロード

jQuery.lightpop plugin

使用方法

jQuery JavaScript Library を別途入手して、ヘッダ部に以下のように記述してください。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightpop-0.x.x.js"></script>

あとは適用させたい要素に対して、以下のように記述してやれば、動作します。

<script type="text/javascript">
$(function() {
 // <a href="http://hogehoge/" rel="lightbox"> な要素
 $('a[rel*=lightbox]').lightpop();
 // <a href="http://hogehoge/" class="lightpop"> な要素
 $('a.lightpop').lightpop();
 // 画像ファイルへのリンク
 $('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightpop();
 // YouTube へのリンク
 $('a[href*=.youtube.com/watch]').lightpop();
});

指定された要素のうち jQuery.lightpop.js を適用可能な要素にのみ適用されます。
# つまり $('a').lightpop(); などとやってもおっけ。（時間はかかりますが (^^;;)

※ただし、動画ファイル・自サイト内の別ページへのリンクは http://example.com/hogehoge.flv?width=320&height=240 のように width, height を指定してやってください。
また FLV へのリンクに限り http://example.com/hogehoge.flv?width=320&height=240&image=http://example.com/hogehoge.jpg のように image を指定すると、指定されたファイルをサムネイルとして表示させます。

対応している動画サイト

• YouTube
• Metacafe
• LiveLeak.com
• Google Video
• SPIKE Powered By IFILM ※ Ver.0.8.2 から未サポートになりました
• Dailymotion
• Super Deluxe
• ニコニコ動画(RC2) (サムネイル表示になります) ※ Ver.0.8.3 以降ではプレイヤーが表示されます

対応しているビデオファイル形式

.3gp	->	Quicktime Player
.asf	->	Windows Media Player
.avi	->	Windows Media Player
.mp4	->	Quicktime Player
.mpg	->	Windows Media Player
.mov	->	Quicktime Player
.rm	->	Realplayer
.swf	->	Flash 8 plugin
.flv	->	Flash 8 plugin ※フリーの FLV プレイヤー JW FLV Player の導入が必要
.wmv	->	Windows Media Player

オプションの設定

オプションを設定することで、フレーム枠の見た目を変更したりできます。
オプションは、ざっと次の通り。

通常のオプション

• overlayBgColor:
  オーバーレイの背景色
• overlayOpacity:
  オーバーレイの透明度
• contentFrameType:
  'border' (通常) or 'box' (画像を使用してフレームを表示)
• contentBgColor:
  コンテンツの背景色
• containerBorderSize:
  コンテンツの脇に表示する空白の幅を px で指定
• containerResizeSpeed:
  リサイズアニメーション時のスピードを数値で指定
• imageLoading:
  読み込み中に表示する画像ファイルのパス
• imageBtnClose:
  「閉じる」ボタン用の画像ファイルのパス
• imageBtnPrev:
  「前へ」ボタン用の画像ファイルのパス
• imageBtnNext:
  「次へ」ボタン用の画像ファイルのパス
• imageBlank:
  空白表示用の画像ファイル
• keyToClose:
  「閉じる」へのキーボードショートカット
• keyToPrev:
  「前へ」へのキーボードショートカット
• keyToNext:
  「次へ」へのキーボードショートカット
• flvplayer:
  JW FLV Player のパス
• iconAdd:
  テキストリンクの前にアイコンを表示する場合は true、しない場合は false を指定
• setLinkToTitle:
  拡大表示したメディアのタイトル部分にリンクを設定する場合は true を指定
• grouping:
  画像・動画のグループ化を無効にしたい場合は false を指定 (Ver.0.7.5 以降で有効なオプション)

contentFrameType が border の場合、有効なオプション

• contentBorder:
  ボーダーに適用させたい CSS
  (例：黒で幅1pxの実線を適用させたければ、'1px solid #000′)

contentFrameType が box の場合、有効なオプション

• boxBorderSize:
  フレーム画像の幅を px で指定
• imageBox:
  フレーム画像ファイルのパス
• imageBorderL:
  フレーム左枠表示用画像ファイルのパス
• imageBorderR:
  フレーム左枠表示用画像ファイルのパス

リンク種類毎のオプション

各リンク種類毎にオプション設定ができます。
設定できるリンク種類は以下のとおり。

• Image:
  画像ファイルへのリンク
• Video:
  動画ファイルへのリンク
• YouTube:
  YouTubeへのリンク
• Metacafe:
  Metacafeへのリンク
• LiveLeak:
  LiveLeakへのリンク
• GoogleVideo:
  GoogleVideoへのリンク
• ifilm:
  ifilmへのリンク
• Dailymotion:
  Dailymotionへのリンク
• superdeluxe:
  superdeluxeへのリンク
• nicovideo:
  ニコニコ動画へのリンク
• Contents:
  上記以外のリンク

各リンク種類は、それぞれ以下のオプションを設定できます。

• enabled: (全リンク種類共通)
  有効 / 無効 を true or false で指定(デフォルトは true)
• icon: (全リンク種類共通)
  iconAdd が true の場合、リンクの前に表示するアイコンファイルのパス
• size: (全リンク種類共通)
  幅、高さを配列で指定。
  例：Video:{size:[640,480]}
  → 動画のデフォルトサイズを幅 640, 高さ 480に指定する
  # 画像の場合は最大幅・高さとなり、元画像の幅・高さがこれを超えていた場合、縮小して表示する。
• param: (ニコニコ動画以外の動画サイトへのリンク種類)
  各動画サイトの動画プレーヤーに設定するパラメーターを指定。
  例：{'hl':'ja','autoplay':'1′,'fmt':'22′}
  → YouTube の動画プレーヤーに 言語：日本語、自動再生：on、高画質モード：on を設定
• iframeEnabled: (Contents のみ)
  true が指定されていると、リンク先表示時に <iframe> 要素の中に表示する。(デフォルトは true)

例：

// 背景を白の透過画像にし、銀色で幅1pxのボーダーで囲む。
$('a[href^=http://jp.youtube.com/watch]').lightpop({overlayBgColor:'#FFF', contentBorder:'1px solid silver'});
// 背景を白の透過画像にし、デザインされたフレームで囲む。
$('a[rel*=lightbox]').lightpop({overlayBgColor:'#FFF', contentFrameType:'box'});
// YouTube を自動再生・高画質モードで表示する。
$('a[href^=http://jp.youtube.com/watch]').lightpop({YouTube:{enabled:true,param:{'hl':'ja','autoplay':'1','fmt':'18'}}});