画像だけでなく、各種動画ファイル、YouTubeなどの動画サイト、自サイト内の別ページを lightbox 風に表示するための jQuery用プラグインです。
コンテンツを表示する際のフレームを通常の白枠ではなく、画像を使用したフレームに変更することもできます。
フリーの FLV プレイヤー JW FLV Player を入手することで FLV 形式のファイルを扱えるようになります。
デモは以下のリンクからどうぞ。
jQuery.lightpop.js サンプル
ダウンロード
使用方法
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'}}});
お世話になっております。 😮
xoops(CMS)のテンプレート等にこれを読み込ませて使おうとしているのですが、
バッチリ呼んでくれて動いてくれるのですが、
「閉じる」、「前へ」などの画像を認識せず表示されません。
“jquery.lightpop-0.8.1.js”からの相対バス(images/〜)を呼んでくれないのですが、
なぜなんでしょうか？
すべての画像パスを書くのも(imageBtnClose:〜 等)ためらいます。
何かヒントを頂けないでしょうか。
ご確認、ありがとうございます。
それでは現状のスクリプトを使おうと思います。
ありがとうございました。
ご連絡、誠にありがとうございます。
自己解決しました。
finish!部分の「jQuery(this).remove();」が2つあったうち、
一つをコメントアウトしたところ、エラー表示がでなくなりました。
// finish!
var finish_lightpop = function(){
set_visibility(jQuery(‘object’,jQuery(‘#lightpop’)), false).remove();
jQuery(‘#lightpop’).slideUp(function(){
// jQuery(this).remove();
jQuery(‘#overlay’).fadeOut(function(){
jQuery(this).remove();
// show embed, object, select element
set_visibility(jQuery(‘embed, object, select’), true);
});
});
keyboard_navigation(false);
window_resize(false);
};
他のブラウザでも確認しましたが、
特に問題がなさそうなので、このまま使用しようと思います。
「lightpop Ver.0.8.1 」では、上記の対応で解決したので試してません。
もし、上記の対応で問題がありそうでしたら、
ご指摘をいただけますでしょうか。
よろしくお願いします。
matsuken さん、どもです。
なるほど lightpop のボックスをリムーブしている所で、当該のエラーが発生しているんですね。
この処理は外しておいても、なんら問題は無いので、その対応で大丈夫です。
ご報告ありがとうございました。
初めまして。matsukenと申します。
jquery.lightpop-0.7.5.min.jsを使わせていただいています。
一つわからないことがありご質問させていただきました。
IE6で、https内で画像を表示させて、閉じるボタンを押すと、
「This page contains both secure and nonsecure items.
Do you want to display the nonsecure items?」
というエラーが出ます。
このエラーを表示しないようにできる方法はございますでしょうか。
どうか、ご教授をお願い致します。
matsuken さん、はじめまして。
現在、同一環境を作ってテストする余裕がありません。
なにか分かりましたら、連絡させていただきたいと思います。
ちなみに lightpop Ver.0.8.1 で、同じ症状が発生するでしょうか？
他のブラウザでは、どうでしょうか？
情報があれば、お教えください。
はじめまして
jquery.lightpop-0.7.5.min.jsを使用させていただいています。ありがとうございます。
NEXT、PREVボタンび表示方法なのですが、LIGHTBOXのように、右半分、左半分というように大きくすることはできないでしょうか？
改変方法があればよろしくお願いします。
simclear さん、はじめまして
lightpop では YouTube 等の動画も扱うため、NEXT・PREV ボタンを全面に割り当てていません。
# 全面に割り当てると動画プレイヤーの操作ができなくなります。
どうしてもということであれば、JavaScript の修正で右半分・左半分をすべてボタンに割り当てることはできます。
非圧縮版の jquery.lightpop-0.x.x.js を修正してお使いください。
最新の配布バージョン jquery.lightpop-0.8.1.js ですと 424 行目からはじまる「// set interface CSS」という箇所で、スタイルシートの設定を行っています。
静止画のみを対象にしたいのであれば、別の jQuery プラグイン（例えば jQuery.lightbox など) を使用されることをオススメします。
はじめまして。
公式のjquery.lightboxより多機能なので、利用させていただきたいと思っています。
FLV+JW Playerでのサムネイル表示に関する挙動なのですが、
リンクにhref=”video.flv?width=300&height=200&image=/img/xxxx.jpg”を指定しても、
画像が表示されません。
画像のパスは（「/」からはじまる）相対パス指定でやっています。
もしかしたらJW Playerのバージョンにもよるのかもしれませんが、いかがでしょうか。
（v4.3を使用しています）
加えて、できればJW Playerにflashvarsを渡す方法があれば助かります。
autostartをtrueにしたりしたいので・・・
コイズミさん、はじめまして。
相対パス指定だと、うまくいかないかも。時間のある時に確認しますね。
パラメータとして渡せるはずです。
例： $(‘a.video’).lightpop({Video:{param:{‘flashvars’:{‘autostart’:true}}}});
返信ありがとうございます。
ですが、http://〜の絶対パスで指定しても表示されませんでした・・・
環境のせいですかね・・・？
aタグでの画像指定はうまくいかないので、flashvarsで渡してみようと思い、
いただいた例をもとに以下のようなコードで試してみました。
$(‘a#hoge’).lightpop({
flvplayer:’player.swf’,
Video:{
param:{
’flashvars’:{
’file’:’video.flv’,
’image’:’http://xxxxxxxxxx/video.jpg’,
’autostart’:true
}
}
}
});
しかし、どうもflashvarsは渡されていないようです。
ちなみに、ソースを拝見させていただいたところ、autostartはデフォルトでtrueになっているようでしたが、
「autoStart」と「S」が大文字になっているため動いてないようです。
ためしに小文字にしたら自動再生されました。
コイズミさん、どもです。
flashvars 渡しが、うまくいってないですか…
ちょっと時間が取れないので、いつになるか分かりませんが、次回バージョンアップの時に修正します。
をかもとさん、お返事を有り難うございました。
さっそく教えていただいたやり方で試してみたのですが、どうもうまくいかず、
私の質問の仕方に問題があることに気づきました。せっかく教えていただいたのに、本当にすいません。orz
それで申し訳ないのですが、改めて質問させてください。
現在、再構築中のホームページのトップページにコンテンツ表示用のiframeAを組み込んでいて、
そのiframeAに、動画リンク(lightpop起動コマンド付き)を表示するページを表示し、動画リンクをクリックしてlightpopを使うような形になっています。
しかし、これだと、lightpopは、lightpopを呼び出しているページを表示しているiframeA内に表示され、キーボードコマンドも効きません。
それでiframeA内ではなく、lightpopをiframeAのparentであるトップページ全体に表示できたらと思っています。
(トップページ全体にlightpopの半透明背景がかかり、その中央に動画再生ボックスがされる感じに)
何度も申し訳ないのですが、もしこのようなことが可能であれば教えていただけないでしょうか。
宜しくお願いいたします。
sound さん、どもです。
frame 内にあるリンクに対して lightpop の効果を与えたいということですね。
それだと、現在の jquery.lightpop.js では対応できません。
また、対応する予定もありません。
申し訳ありませんが、フレームを使わないようにするか、他の対応できるスクリプトを探してみてください。
をかもとさん、お返事ありがとうございました。
改めて表示方法を検討してみるなどしてみたいと思います。
m(_ _)m
はじめまして、素晴らしいスクリプトをありがとうございます。
このスクリプトのおかげでページが使いやすく、ずっと見栄えするようになりました。
ところで質問をさせていただきたいのですが、lightpopをiframeに表示されているのページから使うと
iframe内にlightpop画面が表示されるのですが
これを親フレームに表示させるにはどのようにしたら良いでしょうか？
var d = parent.document
にしてみたりしたのですが、うまくいきませんでした。
お手数ですが、ご指導いただけないでしょうか。
宜しくお願いいたします。
sound さん、はじめまして。
オプションで設定することで iframe 内ではなく Ajax で取得してきて表示することができます。
$(’a.lightpop’).lightpop({Contents:{iframeEnabled:false}});ただし XMLHttpRequest の制限上、同一ドメインのページしか取得してくることはできませんが…
jquery.lightpopを利用させて頂こうと思っています。
IEを基本でHTMLでホームページを作り上げたのですが
IEとSleipnir上では、オフライン オンライン（ｆｃ２サーバー）できちんと稼動したのですが、
Firefox３がなぜだか、オフラインでは稼動するのですが、サーバー上だとうまく稼動しないのです。
いろいろ調べてみたのですが、お知恵を拝借できませんでしょうか？
Sleepingsun さん、はじめまして。
問題が起こっているページのURLを教えていただければ何か分かるかもしれませんが、これだけの情報ではわかりません。
Firefox に Firebug 等をインストールして、何が起きているかを確認してみるのも手です。
jQuery の他に Prototype.js などを利用されている場合は競合が起きているのかもしれません。
そちらもご確認ください。
をかもと様
お世話になっております。
jquery.lightpop-0.7.5.min.js を使用させていただいております。（ありがとうございます!!!!）
overlayBgColorに指定した色に変わるブラウザのウインドウ（スクロール）について、わからないことがあります。
ブラウザのウインドウののスクロールバーを動かした際にoverlayBgColorが反映されない部分がでてしまうのです。
IE7及び8で確認しました。
画像をポップアップした後、ブラウザのウインドウのりサイズには
overlayBgColorが対応していますが、
ブラウザのウインドウをスクロールには、対応していないようなのです。
overlayBgColorがブラウザウインドウの開いているエリアに限定されているようで
縦・横にスクロールした先のぶぶんは、overlayBgColorが入らず、地の色が出てます。
画像のポップアップについては未・済の両方の場合でおきます。
これを修正するには、どこをどのように書き換えをしたら良いでしょうか。（Javascriptの理解度は低です）
Firefox,Operaでは問題ありません。
お手数ですが、お知恵を拝借願えませんでしょうか。
宜しくお願いいたします。
おかもと様
自己解決しました。
jquery.lightpop-0.7.5.min.js の13行目以降を overlayOpacity で検索し、
.overlayOpacity,width:W[0],height:W[1],zIndex:90}); の height:W[1] の後ろに任意のピクセル数を追加しました。
.overlayOpacity,width:W[0],height:W[1]+600,zIndex:90});
縦方向のみ伸ばしたかったので、heightのみ数を加えました。
Firefox,Operaでは、背景がoverlayで覆われた際にスクロールバーが縦方向に伸びますが問題はありません。
お騒がせいたしました。m(_.._)m
今後も数箇所で jquery.lightpop-0.7.5.min.js を使用させていただく予定ですので改めて、お礼申し上げます。
ありがとうございます。
kpon さん、はじめまして。
返答遅くなって、申し訳ありません。
うーん、デモページでは IE7, 8 共に問題なく表示されてるんですが、ひょっとすると、そちらのサイトの XHTML マークアップでおかしなところがあるのかも知れません。
The W3C Markup Validation Service等で、一度確認してみてはどうでしょう？
問題が起きている URL を連絡いただければ、確認できるかもしれません。
また、jQuery の他に Prototype.js などを利用されている場合は競合が起きているのかもしれません。
そちらもご確認ください。
はじめまして、kiwと申します。
この度、製作中のサイトで、ポップアップウインドウの代わりにlightpopを使わせていただこうと思い設置してみましたが、
表示されたhtmlの中のリンクをクリックすると、lightpopのポップアップの中でリンク先のページが表示されるのですが、
これを、lightpopのポップアップを閉じて、リンク先のページに移動させることは可能でしょうか？
kiw さん、はじめまして。
デフォルトでは iframeEnabled オプションが true になっているため、リンク先のページは <iframe> の中に表示されます。
iframeEnabled オプションを false にすれば、同一フレーム内に表示されるので、ご期待の動作になるかも知れません。
あとは、表示されるフレーム内のリンクタグの挙動を javascript で強引に書き換えるくらいでしょうか？
をかもと様
早速のご回答ありがとうございます。
仰るようにiframeEnabledオプションを設定すれば解決できそうだと思い下記のようにしてみたのですが、動作が変わりません。
同時に、サイズ指定もしてみましたが、こちらも指定したサイズで表示されません。
記述方法が間違っているのでしょうか？
$(’a.lightpop’).lightpop({size:’new Array(640,480)’, iframeEnabled:’false’});
※間違って先ほど新規コメントで投稿してしまいました。お手数ですが削除お願いします。申し訳ありません。。
kiw さん、どもです。
うまく行かないですか？うーん。ちょっと時間のある時に検証してみます。
あと、実際に動作させようとしているサイトの URL を教えていただけると助かります。
別に、返信でも新規でもやりやすい方で構いませんよ。
をかもと様
どうもありがとうございます。
URLですが、現在非公開で製作中のサイトの為、申し訳ありませんが現段階ではお知らせできないのです。
いろいろ試した結果、下記のように修正したら期待通りに動作しました。
$(‘a.lightpop’).lightpop({Contents:{iframeEnabled:false}});
サイズ指定に関しては、URLの後ろに ”?width=500&height=400” を追加することでとりあえず動作させています。
期待していた動作ができましたので、引き続きありがたく使わせていただきます！
ありがとうございました。
kiw さん、どもです。
期待通りに動作したようで良かったです。
通常リンクの iframe 内ポップアップは、普段あまり使わないおまけ機能なので、私もオプションの設定方法を勘違いしてました 😳
度々申し訳ありません。
.lightpop-details-number内に「Image」や「Contents」といった文字が表示されますが、
将来的にこちらを非表示にするオプションを付けていただくことは可能でしょうか。
クライアントから「必要最小限以外のものは表示させたくない」という要望がございまして。＾＾；
現在は下記の箇所から該当箇所を消すことで無理矢理対応しております。
単品画像を表示しているだけなので今は問題ないですが。＾＾；
var data_box = set_visibility(jQuery(csspath.data + ‘,’ + csspath.details + ‘,’ + csspath.details + ‘-caption,’ + csspath.details + ‘-number,’ + csspath.data + ‘-nav-close’), false).show();
大変お忙しいとは思いますが、どうかご検討ください。
ダダさん、どもです。
説明に書き忘れていましたが、説明を表示しないオプション（detailsEnabled）があります。
使い方は
$('a.lightpop').lightpop({detailsEnabled:false});のようにして指定してください。
これで、説明部分がまるごと表示されなくなります。
ありがとうございます！ 隠しオプションがあったのですね。
グループしない設定もそうですが、このコメント一覧を見ていると役に立ちますねｗ
ダダさん、どもです。
隠しオプションと言うか、単にドキュメントに記載するのを忘れてるだけです 😳
あとで、まとめて修正しておきます。
素晴らしいスクリプトを公開してくださってありがとうございます！
今まで Shadowboxを使っていたのですが、画面サイズより大きい画像を表示するときに
リサイズかドラッグしかなく、クライアントに不評だったのです。
ところでポップアップの外をクリックすると閉じますが、IE6の場合ポップアップの左右だと閉じませんでした。
ポップアップより上または下だと閉じます。FireFox2では問題ありませんでした。
お時間ある時でも対応していただけると嬉しいです。
ダダさん、はじめまして。
申し訳ありませんが IE6 はシェアも減少してきているブラウザなので、「IE6 ではとりあえず動作すれば良い」というスタンスで作成しています。
なので、この問題については今後も対応しないと思います。
# 気が変わって対応するカモですが…
素早いお返事ありがとうございます。
了解いたしました。ポリシーでしたら致し方ありません。＾＾；
IE6に対応させるための応急措置として画像をクリックすると閉じるようにしてみました。
現在は画像表示にしか使っていないので当面これで対応したいと思います。
var set_content_to_view = function(contentNo){
〜略〜
$(‘#lightpop-content img’).click(function(){finish_lightpop(); return false;});
};
なさっくさん、どもです。解決されたようで良かったです。
ソース自体は GPL2 ライセンスで配布していますので、好きなだけ改変して、自分の使いやすいように修正してお使いくださいませ。
・・・iframeでも画像表示できるように変更する方法でやることにしました。
phpgd.php?w=300&height=300&img=hoge.jpg
↓iframe用に[width][height]追加。同じパラメータ数(汗)
phpgd.php?width=300&height=300&w=300&height=300&img=hoge.jpg
でもなんかiframeに約10px余白(FFで)があったので、
js：272行目辺りのiframeタグに・・・無理矢理ですが、
hspace=”0″ vspace=”0″ marginheight=”0″ marginwidth=”0″ framespacing=”0″
を追加しました。これで問題なく画像も指定サイズで見れるようになりました。
$(‘a[href*=phpgd.php]’).lightpop({Contents:{iframeEnabled:false}});
試してみたんですが、普通の画像リンクになってしまいました・・・；
url最後の拡張子で判別してるのかな？と思い
phpgd.php?w=40&height=60&img=hoge.jpg
にもしてみましたがダメでした。やっぱ厳しそうですね・・・；
なさっくさん、どもです。
現在、jQuery.lightpop.js では URL の ? より前を判断基準にして、ファイルタイプを判定しているので現場では難しいですね。
lightpop を呼び出す時のオプションに
Contents:{iframeEnabled:false}を追加すれば、iframe 呼び出しは行わないようになりますが、それで対応できるでしょうか？呼び出し方の例：
パラメータを持った画像を表示したいのですが、iframeで表示されるみたいで、
強制でfileTypes->Imageにできないでしょうか？
画像URLがたとえば、
<a href="/phpgd.php?img=hoge.jpg&w=40&height=60" rel="nofollow">
なのです。phpで画像出力してるんです；
ピンバック: [jQuery]多種メデイア対応のオーバーレイ表示ポップアップ”lightpop.js” - Webmilk
早いお返事ありがとうございます。
すいませんが、よろしくお願いします。
sho さん、はじめまして。
すいません、jquery.lightpop のバグかもしれません。
# もしくは JW FLVPlayer の仕様変更。
時間のある時に調査して修正しようと思いますが、ちょっと時間がかかるかも。
しばらく、お待ちください。
初めまして。
jQuery用でFlvを表示対応できるプラグインを探していて、こちらにたどり着きました。
一つ教えてほしいのですが、
Flvのリンクの際、 image を指定するとサムネイルが表示されると書いてあったので、
例題通りにやってみたのですが、どうもうまく表示されませんでした。
(Mac Safari、Win IEにて)
すいませんが、もう少し具体例を教えていただけないでしょうか。
よろしくお願いします。
ozaki さん、どもです。
こちらこそ、色々と検証ありがとうございました。大変参考になりました。
これからも、よろしくお願いします。 😛
ごめんなさい。
メチャクチャ汚してしまいました。
お手数をお掛けしましたが、
本当にありがとうございました。 😛
とりあえず、解決ですね。
良かった、良かった。