jQuery.lightpop.js

229件の返信

画像だけでなく、各種動画ファイル、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'}}});