Posted by をかもと at 2007年12月22日 土曜日
画像だけでなく、各種動画ファイル、YouTubeなどの動画サイト、自サイト内の別ページを lightbox 風に表示するための jQuery用プラグインです。
コンテンツを表示する際のフレームを通常の白枠ではなく、画像を使用したフレームに変更することもできます。
フリーの FLV プレイヤー JW FLV Player を入手することで FLV 形式のファイルを扱えるようになります。
デモはこちら
ダウンロード
jquery.lightpop.0.8.3.zip Ver.0.8.3
使用方法
jQuery JavaScript Library を別途入手して、ヘッダ部に以下のように記述してください。
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightpop-0.8.3.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'}}});
つぶやく
あれ?
フルスクリーン表示ができなくなりました。
いつ頃かわかりませんが...。
お手数ですがご確認願います。
ごめんなさい。 m(_ _)m
私の大きな勘違いでした。
フルスクリーンにしていたのは、
私くしが Ver.0.7.4 をハックしたものでした。
あらためて、Ver.0.8.1 にて
670行目と683行目に追加して動くようになりました。
本当に失礼致しました。
m(_ _)m
追伸
)
xoops による jquery.lightpop.js 利用は、
モジュール xpWiki (Prototype)が当たっていたのが原因でした。
ただし、他のページでの部品画像の不認識は解決しておりません。
(ゆるゆると追っていきます
ozaki さん、どもです。
フルスクリーン表示は、そのうち本体に盛り込みます。
xoops の方、ほったらかしにしておいてすみません。
まとまった時間が取れたら、xoops 環境作って確認します。
いちおう Prototype.js と共存している状態でも正常に動作するようにしているつもりなんですが、確認しきれてないところがありますね (^^;;;
いつもお手数をお掛けし申し訳ございません。
どうも不完全な情報でした...。
xpWikiでのHTMLプラグイン埋め込みで色々やってみたら見事動きました。
もっと色々試していきます。(ゆるゆると...)
m(_ _)m
でか〜い画像をリンク設定したいのですが、
そのままでは原寸表示になってしまいます。
ヘッダ部へはどのように記述すればいいのですか?
ozaki さん、どもです。
リンクタグのURLを
<a href="media/pict.jpg?width=320&height=240">のようにしてやれば、画像の表示サイズを変更できます。リンクタグではなく
メタタグ内に(size:等)記述し、ブラウザーの表示領域に入りきれない画像サイズを
縮小する事はできないでしょうか?
度素人の質問で申し訳ないです。 m(_ _)m
ozaki さん、どもです。
画像の最大幅、最大高さをピクセル単位で指定することはできます。
オプションを、以下のように書いてやってください。
これで、画像の最大幅320px、最大高さ240pxになるように表示されるはずです。
ありがとうございます。
バッチリOKです!!
追伸
・PukiWiki, PukiWiki Plus!
自作プラグイン lightbox.inc.php から、
lightpop.inc.php を作成。
・xoops 用 jQuery.lightpop.js + lightbox_plus.js OK
・ + xpWiki 用プラグイン lightpop.php 作成 OK
いや〜素晴らしい!
ありがとうございました。 m(_ _)m
はじめまして。
、知識がないため自力で動かすことができません・・・。
こちらのスクリプトに一目惚れしたのですが
YouTubeの通常の動画はうまく出来たのですが、
YouTubeの再生リスト(複数の動画を順番に再生するプレーヤー)で動作させるにはどこをどのように書き換えればいいでしょうか。
どうしてもこのスクリプトを使いたいです。どうぞよろしくお願いします。
C&D さん、はじめまして。
現在のバージョンでは、YouTube の再生リストを表示することはできません。
YouTube の再生リストに対応するかは未定ですが、できそうなら対応してみます。
ただし、今はちょっと余力が無いので、いつ対応するかは分かりませんが
こんばんは。お返事ありがとうございます。
再生リストには対応していなかったのですね。
出来ないということがわかっただけでもよかったです。
毎日どうやったら出来るのか悩み続けていたので、あきらめがつきました。
再生リスト以外の動画で使わせていただきますね。
素敵なスクリプトありがとうございます♪
YouTube の再生リストか...
探してみると「YouTubeのビデオを再生リストごとページに埋め込む方法」
http://kenz0.s201.xrea.com/weblog/2009/05/youtube_16.html
で、
youtube.com/v/ を youtube.com/p/ にして 番号を入れる。 フムフム。
C&Dさん おもしろいヒントありがとうございました。
ソース内にESCキーでのCLOSEが実装されておりますが、こちらの動作は環境に依存しますでしょうか。
WinXPのFx3.0、IE6.0/7.0それぞれでESCキーでのCLOSEが出来ませんでした。
江戸川やままさん、はじめまして。
すいません、そのコードは以前実験していた時の残骸です。
# 結局、環境依存が激しくて正常に動作しなかった。
現状では、ESCキーでのCLOSEには対応していません。
こんにちは。
大変参考になりました。ありがとうございます。
一つ質問なのですが、IE6で確認すると背景の黒が途中で切れてしまいます。
IE6でも背景を全て黒にする事は可能でしょうか?
宜しくお願いいたします。
おかめさん、はじめまして。
ありゃ、バグですね。時間のある時に調べてみます。
おかめさん、どもです。
IE で後方互換モードでレンダリングされている場合、背景の黒が途中で切れてしまう不具合がありました。
Ver.0.8.2 で、この不具合を修正しましたので、ご確認ください。
はじめまして。
素晴らしいプラグインと分かりやすい解説に感謝致します。
お聞きしたいのですが、再生プレイヤーの表示位置(topから)の調整は可能でしょうか?
再生サイズにかかわらずtopの表示位置は同じだと思うのですが再生サイズの都合上、もう少し上で再生させたく思い、色々いじっているのですが壁にぶち当たっております。
またクリッカブルマップからのリンクは出来ませんか?
再生動画はswfです。
よろしくお願い致します。
ひろさん、はじめまして。
Ver.0.8.2 でトップからの表示位置を調整できるようにしました。
JavaScript 内で lightpop を呼び出す前に、以下の一行を挿入してください。
※このとき、{top:20} と指定してやれば、topから20pxの位置に表示されます。
Ver.0.8.2 で <a> の他、<area> タグでも動作するように修正しました。
これで、クリッカブルマップからのリンクが可能になります。
をかもと様、返信ありがとうございます。
topからの表示位置調整も無事に出来ました!
クリッカブルマップからのリンクで少々手こずっておりましたが、その原因としてJavaScript内でのarea呼び出しの追記をしていませんでした。
$(‘area.video’).lightpop({flvplayer:’http://dogmap.jp/lightpop_sample/mediaplayer/player.swf’});
の追記で呼び出し、表示も出来ました!
ありがとうございます!!
ひろさん、どもです。動作するようになって良かったです。
一点、お願いが…
ウチのサーバの player.swf に対しての直接リンクは止めて、自サーバに player.swf を置くようにしてください。
# .htaccess を修正してリファラに dogmap.jp ドメインが含まれていない場合はエラーにさせてもらいました。
をかもと様。
失礼致しました、動作確認で手こずっていた際、ソースを参考にさせて頂いておりました。
申し訳ございません。
現在すでに自サーバでの呼び出しに書き換えております。
有益なプラグイン開発に感謝致します。
Ver.0.8.2 へアップデートしたのですが...
通常利用では全く問題ないのですが、
xoopsやPukiWikiに読み込んでいたサイトが
「閉じる」、「前へ」などの画像を認識せず表示されません。
また、テキストリンクの前に表示していたアイコンが表示されません。
以前にご質問し解決して頂いたものと同じ症状です。
どうしたものでしょう?
ozaki さん、どもです。
すいません Ver.0.8.2 で、ちょっと仕様変更してしまいました。
Ver.0.8.3 では、以前の設定で動作するように修正しましたので、バージョンアップお願いします
アップデートありがとうございます。
m(_ _)m
タグで使えるのはおもしろいですネ。
(FCKeditorのプラグイン“Image Maps Plugin”をハックしてみます。)
質問なんですが、
いつ頃かわかりませんが、
“contentFrameType:’box’” のウィンドー形状が変わっているのですが、
新しい方が「クール」でいいので「どうすれば」変えられるのですか??
ozaki さん、どもです。
配布している jquery.lightpop.0.8.3.zip の images フォルダ内にある、以下の3ファイルを現在使用しているファイルに上書きしてやってください。
ありがとうございます。
バッチリクールになりました。
はじめまして、lightpopについて質問があります。
現在mp4ファイルを扱っているのですが、flvplayerで再生させようとしているのですが上手くいきません。
quicktimeで再生すると、回線が遅い場所では音が遅れたりしてしまいます。
mp4ファイルの際quicktimeを検出するのではなく、リンクされているflvplayerで再生させる方法はありませんでしょうか?
よろしくお願い致します。
hidechan さん、はじめまして。
jquery.lightpop-0.8.3.js を修正すれば可能です。
具体的に言うと107〜178行目で動画の種類によって、どのプレイヤーを使用するか設定しているので、その辺を修正してください。
GPLで配布させてもらってるので、修正はご自由に。
こんにちは、lightpop.js お世話になっています。
一つ教えていただければと思います。
イメージをクリックすると、flvの動画を再生するようにしていますが、再生のサイズを、任意のサイズで固定したいです。
http://mysite/hogehoge.flv?width=640&height=480
で規定サイズで再生出来るのは確認したのですが、クライアント側で更新するので、なるべく簡潔にしておきたいのです。
過去のコメントを読むと、
$(‘a’).lightpop({Image:{size:[320,240]}});
でイメージサイズの最大高さ、幅を設定できるようですが、flvでは設定できないでしょうか?
試しに
$(‘a.video’).lightpop({flvplayer:’lightpop/player.swf’,Flv:{size[640,480]}});
とかして見ましたができなかったので・・・
よろしくお願いします
tamako さん、はじめまして。
動画のデフォルトサイズを設定するには
$(‘a.video’).lightpop({flvplayer:’lightpop/player.swf’,Video:{size[640,480]}});とすればできます。tamakoです
早速のお返事ありがとうございます。なるほどVideoとは気がつきませんでした。
ただ、設定してみたのですが、ダウンロードのダイアログが開いてしまいます(FF、IE7)
,Video:{size[640,480]}を無くして、
$(‘a.video’).lightpop({flvplayer:’lightpop/player.swf’});
にすると正常にオリジナルサイズで再生されます。
環境を書いていませんでした。
jquery-1.4.2.min.js
jquery.lightpop-0.8.3.js
で行っています
よろしくお願いします
tamako さん、どもです。すいません、私の記述ミスですね。
正しくは
$(‘a.video’).lightpop({flvplayer:’lightpop/player.swf’,Video:{size:[640,480]}});ですね。# size の後ろに “:” を書き忘れてました。
この辺は、一応エントリ内にも「リンク種類毎のオプション」と言う所で記述してるんですが、わかりづらいでしょうかね。
もうちょい、例文を書きたしておきます。
tamakoです
ありがとうございます。無事動作しました。あー良かったw
あ、前のコメントの Image:{size:[320,240]} と見比べれば確かに”:”がありませんでしたね
気づかなかったです。
どうもお手数をおかけしました。
たまこさんのご質問の続きで申し訳ないのですが
ビデオの標準サイズ指定はできたのですが、
youtubeとcontentの標準サイズ指定ができません。
これってできないのでしょうか?
ozaki さん、どもです。
YouTube のサイズ指定はできますよ。
$('a.video').lightpop({YouTube:{size[640,480]}});で、おっけ。大文字小文字に注意してください。
Contents の方はバグっぽいですね。時間のあるときに修正します。
いまこんな感じで使っているのですが...、
$(‘a[rel*=lightpop]‘).lightpop({overlayBgColor:’#FFF’,contentFrameType:’box’,Image:{size:[640,480]}},{},”,’http://〜/images/’);
$(‘a[href*=.youtube.com/watch]‘).lightpop({overlayBgColor:’#FFF’,contentFrameType:’box’,grouping:false,YouTube:{enabled:true,param:{‘hl’:'ja’,'hd’:'1′,’fs’:'1′}}},{},”,’http://〜/images/’);
$(‘a.video’).lightpop({overlayBgColor:’#FFF’,contentFrameType:’box’,grouping:false,flvplayer:’http://〜/player.swf’,Video:{size:[640,400]}},{},”,’http://〜/images/’);
$(‘a.content’).lightpop({overlayBgColor:’#FFF’,contentFrameType:’box’,grouping:false},{},”,’http://〜/images/’);
色々やったのですが、パラメーターの指定がわかりません
“YouTube:{size[640,480]}”をどのように記述すればいいのでしょうか?
ozaki さん、どもです。
こんな感じで行っちゃってください。
ただし、これはデフォルトのサイズを変更するだけなので、
http://www.youtube.com/watch?v=zlfKdbWwruY&width=640&height=360&fmt=22のように<a>タグで width, height が指定してあれば、そちらを優先します。ありがとうございます。
m(_ _)m
バッチリ決まりました!!