画像だけでなく、各種動画ファイル、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'}}});
ダウンロードページをクリックすると、
http://jquery.com/のページに飛ぶんですが、
どこからダウンロードできるんでしょうか？
ダウンロードできない・・・・・
サンプルページで使われているので
ソースからjsのパスを見つけて
アドレスに入れてエンターでDLできますよ。
こんにちは。
lightpopを使わせてもらっています。
jquery1.7.1、jquery.lightpop-0.8.5.1.min.jsの組み合わせで、
jQuery(function(){
$('a.content').lightpop();
});
ほげ
とすると、「ほげ」の文字列が右にずれてしまいます。
ブラウザはIEでもFirefoxでも同じです。一瞬左の位置に表示された後、
右のずれた位置に表示されなおします。
どなたか解決方法をご存知でしたら、、教えてください。
よろしくお願いいたします。
ピンバック: lightboxの動画版『lightpop』 « ウェブ制作の必需品 [jQuery編]
lightpopを愛用している小鳥遊リクピです。このたびはhttp://rikupix.blog39.fc2.com/blog-entry-2.html のページで1ページに複数ニコニコ動画のlightpopを使用したところ一回目は違うのが表示されたり、2回目ではきちんとしたものが表示されたりとよくわかりません。一体どうなってこういうふうになっているのか教えていただけると幸いです。画像やYoutubeなどでは現象は確認できていません。
追記ですが リンク表示ではなくサムネイル画像表示にしてあります。(ただのプレーヤー自身に見えますがjpegを表示してあるだけです)
をかもと様、はじめまして。jqueryでモーダルウィンドウで動画を再生できるものを探していて、をかもと様のサイトにたどり着きました。皆様、容易に導入できているご様子なのですが、なぜか僕はご説明の通りにしてもうまくいかず。
内に
//<![CDATA[
// jQuery Lightpop
jQuery(function(){
jQuery('a[rel*=lightbox]').lightpop({overlayBgColor:'#FFF',contentFrameType:'box'});
jQuery('a[href^=http://www.youtube.com/watch]').lightpop({overlayBgColor:'#000000',contentBorder:'1px solid silver'});
jQuery('a.video').lightpop({flvplayer:'/lightpop_sample/mediaplayer/player.swf'});
jQuery('a.content').lightpop({Contents:{iframeEnabled:false}});
と記述し、目当ての画像に動画へのリンクを貼るも、通常のページ推移をしてしまいます。
ためしに、をかもと様のページにある
オヤジの心に灯った小さな火 – 里田まい with 藤岡藤巻
をリンクさせても、やはり通常のページ推移をしてしまいます。
どこかおかしなところがございますでしょうか？
初歩的な質問で大変お恥ずかしい限りでございますが、お時間ございますとき、
ご回答いただけましたら幸いに存じます。
});
//]]>
をかもとさま
お世話になっております。
jQueryを最新版に変更し、lightpop Ver.0.8.5.1に更新致しました所、
全て問題なく動作いたしました。
お忙しいなか迅速なご対応本当にありがとうございました…！
お世話になっております、たかおファンです。
この度lightpop 0.8.5で外部サイトをiframeで表示しようとしたところ、321行目にあるホストのチェックにおいて外部サイトの場合、無条件で蹴られていることに気がつきました。
return (settings.Contents.enabled && RegExp(w.location.host, ‘i’).test(strUrl) && !/\.(jpe?g|gif|png|bmp)$/i.test(strUrl));
インライン表示ならばともかく、iframeでの外部サイト表示には制限が無いと思いますので、iframe使用の場合はホストをチェックしない条件式に変更されてはどうでしょうか？
ご検討お願いいたします。
たかおファンさん、どもです。
おっ、そうですね。次バージョンで修正します。
ご指摘ありがとうございます。
はじめまして。WPプラグインでの挙動が理想的だったので
通常のHTMLページでも使用させて頂きたく最新版をDL、設置いたしました。
とてもスマートな使い心地で重宝しております、ありがとうございます。
早速ですが、少しつまづいた箇所があり、同じような症状が出ている方がおられましたのでご報告致します。
全体的な挙動に問題はありませんが、Firefoxでの閲覧時に限り
Next・Close等の本来右側に寄せられる要素が全て左側に寄ってしまいます。
IE８、Operaなどでは正常に表示されていました。
WPプラグインの方ではFirefoxでも問題なく表示されています。
原因、対策法などお知らせ頂けましたら幸いです。
amako さん、はじめまして。
一つ上にコメントしていただいた方と同じく他のCSSとの競合だと思われますが、原因がわかりません。
その現象が発生しているサイトのURLをお教えいただけますか？
をかもとさま
レス有難うございました。
先日、最新のjQuery(v1.4.3)からひとつバージョンを下げる事で
レイアウトがずれる現象を回避できました。
お手数をお掛けして申し訳ございません。
取り急ぎご報告まで。
amako さん、どもです。
どうやら、jQuery Ver.1.4.3 と jQuery.lightpop Ver.0.8.5 の組み合わせで、おこる不具合のようです。
ざっと修正してみましたので、以下のリンクから Ver.0.8.5.1 をDLしてお試しください。
http://dl.dropbox.com/u/110305/jquery.lightpop-0.8.5.1.zip
IE7, Chrome, Firefox 3.6.12, Opera 9.8 で、ざっとテストした感じは、問題無さそうです。
なお、Ver.0.8.5.1 にはアイコンファイル等は含まれておりませんので Ver.0.8.5 の画像ファイルをご使用ください。
こんにちは、またまた、分からないところがあるので教えて下さい。
lightpopの最新版（0.8.5)を、新しいブログに設置しているのですが、画像を表示した際、LoadingイメージとNextイメージ、Close×イメージが左に寄ってしまってかっこわるいことになっています。
何かのCSSとかと競合しているのかと思い、ブログのCSSを切って試してみたのですが、やはり左によったままなのです。
バージョンを0.8.3などに変えてみても変わりませんでした。
何が原因なのか、分かりますでしょうか？？
tamako さん、はじめまして。
なにかのCSSとの競合だと思われますが、原因がわかりません。
その現象が発生しているサイトのURLをお教えいただけますか？
こんにちは、たまこです。お返事遅くなりました。
下の、amakoさんが行っているとおり、jqueryのバージョンを一つさげるとローディングのイメージ以外は
正常に表示されるようになることを確認しています。
ただ、それだと、今後困るかもしれませんので、contactからＵＲＬをお送りしますので、ご確認いただけますでしょうか？
まだ、作成中のページですので、今は公にできません。
よろしくお願いします
はじめまして
クリッカブルマップに対応させるにはどのように改造すればよいでしょうか。
初心者の質問で申し訳ありませんが、ご教授いただけますと幸いです。
mamiko さん、はじめまして。
最新版では、改造しなくてもクリッカブルマップに対応しているはずです。
リクエストです。
↓のようなUstreamの録画を再生できたら嬉しいです。
http://www.ustream.tv/recorded/9729447
たつさん、はじめまして。
Ustreamの件、次回バージョンアップ時の参考にさせてもらいます。
はじめまして。
こちらをvimeoで使ってみようとおもうのですが、対応は難しいのでしょうか？
何せ初心者なもので、勝手に改造しようと思ったのですが、うまく行きませんでした。
良いアイデアはございますでしょうか？
よろしくお願いいたします。
もりおさん、はじめまして。
Vimeo 対応については、他の方からもリクエストがきてますので対応しようと思ってます。
しばし、お待ちください。
はじめまして。
さて、Ruby on Rails環境でlightpopを利用させていただこうと思い、バージョン0.8.5を組み込んでみたのですが、RoRの開発環境では以下の問題がありましたのでご報告致します。
現象： 「/」で始まるサイト内リンクの場合に
1. ポート番号付きURLでアクセスしているのに、lightpopを適用すると相対リンクからポート番号が消えてしまいページが表示できない
2. 書き換え後のリンク先が必ず「ホスト名//PATH」とホスト名直後の「/」が二つになってしまい、RoRでmongrelを利用しているとページが表示できない
ソースを斜め読みしたところ397行目が上記のURL変更を行っていたようでしたので、
? location.protocol + ‘//’ + location.hostname + ‘/’ + jQuery_this.attr(‘href’)
から
? location.protocol + ‘//’ + location.host + jQuery_this.attr(‘href’)
に書き換えて、現在問題なく動作しています。
余り検証してないので申し訳ないのですが、ご報告まで。
風待さん、はじめまして。
そうですね。ポート番号付きURLに対応してませんでした。
次期バージョンリリース時に修正します。
ご報告ありがとうございました！
をかもとさん、修正よろしくお願い致します。
ThickBoxはデフォルトで全称セレクタが入っていたりして使いにくいので、こちらのプラグインに期待しています 😀
早々のご対応、ありがとうございます！
無事使うことができました 😀
はじめまして。
Lightbox風表示でニコニコ動画対応、との事でぜひ使わせていただこうと思ったのですが
ダウンロードリンクの場所からダウンロードできません… 😥
0.85、0.84などのバージョンは表示されるのですがDLのリンクが無く
バージョンやNoteをクリックすると「Minor bug fix 1.3.x」というのが表示されるだけです。
初心者な質問で申し訳ないですが、どちらからDLすれば良いのか教えていただけませんでしょうか？
ちろんさん、はじめまして。
なぜかダウンロードのリンクが消えていたようです。
追加しておきましたので、ご確認ください。
ちなみに最新版の Ver.0.8.5 は、以下のリンクからもダウンロードできます。
http://plugins.jquery.com/files/jquery.lightpop-0.8.5.zip
はじめまして。2点質問があります。
lightpopを使ってflvの再生が終了した際に、shareの画面が出てきます。
e-mailやテキストが打てるようになっているのですが、これを表示させないためには
どうしたらいいでしょうか。
また、movie再生の?ボタンを押す画面で、背景が全て真っ白になってしまうのですが
こちらのサイトのように、movieの部分は黒い背景で、コンテンツ部分は白背景と
言う風にはどうしたらいいでしょうか。（もしflv自体の問題でしたらすみません。。）
よろしくお願いします。
YUKI さん、はじめまして。
lightpop.js から、flvプレイヤーは制御していません。
実際に動作しているサイトを見ないと分かりませんが、対処は難しいかもです。
ごめんなさい、質問の続きですが．．．
コンテンツ表示の場合、
アドレスに“http://”が有る場合に効かなくなります。
（ヤフーやグーグルなどなど）
ただ、ローカルで動かすと効きます。（？？）
なぜなんでしょう？？
ozaki さん、どもです。
iframe 有効、無効 どちらの設定になってます？
# Contents のパラメータ iframeEnabled (デフォルトは有効)
iframe 有効になっていないと AJAX の制限で、外部サイトの内容は取得できないです。
いつもお手数をお掛けいたします。
Contents のパラメータはこんな感じです。
“$(‘a.content’).lightpop({overlayBgColor:’#FFF’,contentFrameType:’box’,Contents:{size:[640,480],scrolling:’yes’}},{},”,’http://〜/’);”
“iframeEnabled:true”はどこに記述すればいいのですか？
（色々やったのですが．．．）
はじめまして。
動画を使えるということでこちらのプラグインを使わせていただきました。
私のような初心者でも簡単にできました！
ところで、動画が終了したら、CLOSEをクリックしなくても自動的に閉じるということは可能でしょうか？
nob さん、はじめまして。
lightpop.js から、動画が終了したタイミングを取得することができないのでムリです。
ご回答ありがとうございました。大変便利ですので、引き続き使わせていただきます！