画像だけでなく、各種動画ファイル、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'}}});
つぶやく
2008年4月1日 火曜日 3:52 PM
RSSリーダーで購読する
ご確認、ありがとうございます。
それでは現状のスクリプトを使おうと思います。
ありがとうございました。
お世話になっております。
xoops(CMS)のテンプレート等にこれを読み込ませて使おうとしているのですが、
バッチリ呼んでくれて動いてくれるのですが、
「閉じる」、「前へ」などの画像を認識せず表示されません。
“jquery.lightpop-0.8.1.js”からの相対バス(images/〜)を呼んでくれないのですが、
なぜなんでしょうか？
すべての画像パスを書くのも(imageBtnClose:〜 等)ためらいます。
何かヒントを頂けないでしょうか。
jQuery.lightbox.jsをカスタマイズしていろんなメディアやiframeに対応させたプラグイン。MITライセンス。
jQuery.lightbox.jsをカスタマイズしていろんなメディアやiframeに対応させたプラグイン。MITライセンス。
いかがなものでしょうか？
スクリプト自体は動いているのですが、ボタン画像が表示せず
画像自体自動縮小してくれません。（100％のまま表示）
xoops プラグイン xpWiki と当たっている可能性があり
現在調査中です。
ozaki さん、どもです。返信遅くなって申し訳ない。
とりあえずの回避策ですが lightpop を以下のようにして呼び出してみてください。
一つ目の引数は、lightpop に渡す設定。
二つ目の引数は、ファイルタイプの追加設定。
三つ目の引数は、プラグインの名前 (未指定の場合 ‘lightpop’ がセットされます)
四つ目の引数は、image ファイルが存在するフォルダへのパス (絶対パス・相対パスどちらでも指定可）
になります。
あと、正常に動作しないページのURLを教えていただけると、何か分かるかもしれません。
差し支えなければ、そちらもお教えください。
ありがとうございます。
トップページにおいて部品画像を認識してくれましたが、
他のプラグインページでは認識してくれませんでした。
（URL指定、絶対パス指定ともにダメでした）
画像も自動縮小致しませんでした。
ん〜〜〜、やっかいですネ。
新しい xoops (XOOPS Cube Legacy 2.2alpha) ではjQueryが標準になりそうなので
ゼヒにと思ったのですが．．．。
またレポート致します。 m(_ _)m
jQuery.lightpop.js : dogmap.jp http://ff.im/-afU4z
をかもと様
はじめましてこんにちわ。
Mjと申します。
いつも参考にさせて頂いてます。
ありがとうございます。
実は今度、雑誌に『jquery.lightpop-0.8.1.js』を利用したデザインを
掲載しようと考えているのですが構いませんか。
あとその時に『jquery.lightpop-0.8.1.js』も紹介したいのですが宜しいでしょうか。
恐れ入りますがお願いいたします。
Mj さん、はじめまして。
どうぞ、どうぞ。
GPLライセンスで配布しているものですので、これに反しない限りは、いくらでもご利用ください。
あと、URLを掲示するようでしたらデモページ ( http://dogmap.jp/lightpop_sample/ ) のURLを掲示してくださるようお願いします。
それから、メールでも良いので掲載予定の雑誌と発売日をお教えください、買いにいきます。
連絡先のメールアドレスは wokamoto1973(あっと)gmail.com です。
あれ？
フルスクリーン表示ができなくなりました。
いつ頃かわかりませんが．．．。
お手数ですがご確認願います。
ごめんなさい。 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になるように表示されるはずです。
ありがとうございます。
バッチリＯＫです！！
追伸
・PukiWiki, PukiWiki Plus!
自作プラグイン lightbox.inc.php から、
lightpop.inc.php を作成。
・xoops 用 jQuery.lightpop.js + lightbox_plus.js OK
・ + xpWiki 用プラグイン lightpop.php 作成 OK
いや〜素晴らしい！
ありがとうございました。 m(_ _)m
MITのjQuery すごいなー
はじめまして。
、知識がないため自力で動かすことができません・・・。
こちらのスクリプトに一目惚れしたのですが
YouTubeの通常の動画はうまく出来たのですが、
YouTubeの再生リスト(複数の動画を順番に再生するプレーヤー)で動作させるにはどこをどのように書き換えればいいでしょうか。
どうしてもこのスクリプトを使いたいです。どうぞよろしくお願いします。
C&D さん、はじめまして。
現在のバージョンでは、YouTube の再生リストを表示することはできません。
YouTube の再生リストに対応するかは未定ですが、できそうなら対応してみます。
ただし、今はちょっと余力が無いので、いつ対応するかは分かりませんが
こんばんは。お返事ありがとうございます。
再生リストには対応していなかったのですね。
出来ないということがわかっただけでもよかったです。
毎日どうやったら出来るのか悩み続けていたので、あきらめがつきました。
再生リスト以外の動画で使わせていただきますね。
素敵なスクリプトありがとうございます♪
@hatch2 いろいろと応用が利くのでLightpopオススメです。（http://dogmap.jp/2007/12/22/jquerylightpopjs/）商用OKだったはず。
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 で、この不具合を修正しましたので、ご確認ください。
Lightbox系プラグイン
はじめまして。
素晴らしいプラグインと分かりやすい解説に感謝致します。
お聞きしたいのですが、再生プレイヤーの表示位置（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ファイルを現在使用しているファイルに上書きしてやってください。
ありがとうございます。
バッチリクールになりました。
めも http://dogmap.jp/2007/12/22/jquerylightpopjs/
はじめまして、lightpopについて質問があります。
現在mp4ファイルを扱っているのですが、flvplayerで再生させようとしているのですが上手くいきません。
quicktimeで再生すると、回線が遅い場所では音が遅れたりしてしまいます。
mp4ファイルの際quicktimeを検出するのではなく、リンクされているflvplayerで再生させる方法はありませんでしょうか？
よろしくお願い致します。
hidechan さん、はじめまして。
jquery.lightpop-0.8.3.js を修正すれば可能です。
具体的に言うと107〜178行目で動画の種類によって、どのプレイヤーを使用するか設定しているので、その辺を修正してください。
GPLで配布させてもらってるので、修正はご自由に。
一番柔軟かも
jQuery.lightpop.js
ライトボックス決定版
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
フリーの FLV プレイヤー JW FLV Player を入手することで FLV 形式のファイルを扱えるようになります。（JW FLV Playerは非商用。）
jQuery.lightpop.js : dogmap.jp: http://bit.ly/cu50Ak
こんにちは、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です
ありがとうございます。無事動作しました。あー良かったｗ
あ、前のコメントの 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
バッチリ決まりました！！
柔軟に対応している
はじめまして。
こちらのスクリプトに一目惚れしたのですが、HP立ち上げたばかりで全く知識がないため自力で動かすことができませんでした・・・。
是非、利用したいのでヒントをいただければと思います。
認識が違っていたらご指摘ください。
1. Wordpressをサーバーにインストール（FC2サーバー利用中） 済み
2. WP-lightpopをPluginsにインストール 設置画面が確認でき 済み
3. の直前に 、 の直前に 記載 済み
4. <a href="../../sakura5002small.JPG" rel="nofollow"><IMG>を書き込み 済み
ですばらしいポップアップ表示が完成！のはずでしたが…。
ど素人すぎる質問で、大変恐縮ですがお力をお貸しください。
宜しくお願いします。
andore さん、はじめまして。
導入してみたのは http://super-atoys.com/ というサイトでしょうか？
WordPressがインストールできていないように見えます。
このスクリプトを使用するだけなら、WordPress のインストールは必要ありません。
jQuery と jQuery.lightpop.js をロードするようにして、後はJavaScriptを記述すればおっけです。
サンプルページ( http://dogmap.jp/lightpop_sample/ )のソースを参考にして記述してみてください。
こんにちは、lightpopを使い始めてこのシンプルさが好きになりました。
現在iframe内にhtmlのページを表示させて、そのiframe内に表示されているページにlightpopを使っています。ただlightpopを表示させようとすると、overlayの透明背景がiframe内にしか表示されず、動画を再生する時一部だけが暗くなるという不自然なレイアウトになってしまいます。
どうにかiframeを飛び越えて、ページ全体が暗くなるように設定する事は出来ませんか？ちなみに
Contents: {enabled: true, icon: pre_icon + ‘contents.png’, param: {}, size: [0, 0], iframeEnabled: false} ,
としていますが、overlayOpacity: 0.5 ,の部分がiframe以外の部分に効いてこない現状です。
どうぞよろしくお願い致します。
takatoshi さん、はじめまして。
残念ながら iframe 内の子フレーム上で動作している jquery.lightpop から、親フレームの overlay を操作することはできません。
また、そのような対応ができる仕様変更を行うことも考えておりません。
はじめまして、ニコニコ動画もlightbox風に表示できるという事でこちらにたどり着きました。
３日ほど色々いじってみて、本日やっとローカルで動くようになったのですけれど一つだけどうしても
分からない事があり、恥ずかしながら書き込みさせていただきました。
当方画像がメインのサイトを運営しており、現在はLightBoxで画像を、ポップアップでニコニコ動画を
表示するようにしているのですが、乗り換えと同時にLightBoxは撤廃してLightpop一つで画像も
管理できるようにしたいのです。
ニコニコ動画、画像共問題なく表示されるのですが
画像のグループ化がどうしてもできません…ギャラリーのページに置いてあるイラストが２００枚近く
あるのですが、すべて「Image」というグループでひとくくりになってしまいます。
LightBoxではrel=”lightbox[グループ名]“の表記などでグループ化されていましたが
このような細かい分類は不可能なのでしょうか？
初歩的かつ調べ方が悪いのかもしれないのですが、もしできるようでしたらご教授くださると幸いです。
長文かつ分かりにくい文章にて失礼いたしました。
よろしくお願いいたします。
ゆうさん、はじめまして。連絡遅くなって申し訳有りません。
これに対応するには、以下のように一つずつ設定するしかありません。
もしくは、以下のような JavaScript を書いてやれば対応できるかもです。
このスクリプトは未検証です。適宜、修正してお使いください。
お返事ありがとうございました！こちらこそ急がせてしまったみたいで申し訳ございません。
ご指定の通りにタグを書き換えたところ、きちんとジャンルごとにグループ分けできました！
早速サイトにて使用させていただきたく思っております。
私のような初心者にもとても丁寧にご指導くださり本当にありがとうございました。
はじめまして、たかおファンと申します。
いつもlightpopには大変お世話になっております。
htmlのページをlightpopで表示しようとするとなぜか縦長に表示されてしまいます。
$(‘a’).lightpop({Contents:{size:[800,600]}});
のように記述してもまったく反応がありません。
やり方が間違っているのでしょうか？
よろしければご教授お願いします！
すいません自己レスです。
一応解決しました。
lightpop-0.8.3を使用していますが、下記のように325行目のget_sizes_from_str()の第二引数にサイズ設定値を当てたところうまくいきました。
var arrSizes = get_sizes_from_str(arrContent[contentNo].href, settings.Contents.size);これはバグでしょうか？？
それとスクロールもしたかったので328行目のscrolling=”no”をscrolling=”yes”に書き換えて対応できました。
このスクロールの有無も設定で変えられるようになってると良いと思います。
ご検討お願い致します。
たかおファンさん、はじめまして。
バグですね。修正します。
ご要望、ありがとうございます。
というわけで、設定で変えられるようにして、バグを修正した 0.8.5 をリリースしました。
Plugins | jQuery Plugins
scrolling の設定を変更する時は、以下のように指定してください。
素早い対応ありがとうございます！！
早速使わせていただきます。
ところで使い方の例は、本当は波カッコの閉じ位置はこうですよね？
$('a').lightpop({Contents:{size:[800,600], scrolling:'yes'}});たかおファンさん、どもです。
うぉ、そうですね。間違ってました。
all media
たかおファンさんの続きで申し訳ないのですが、
“$(‘a.content’).lightpop({overlayBgColor:’#FFF’,contentFrameType:’box’},{},”,’http://〜/images/’);”
の中にサイズとスクロールの指定をどのように記述すればいいのでしょうか？？
（Contents:{size:[800,600], scrolling:’yes’}）
ozaki さん、どもです。
こんな感じですね。
ごめんなさい。
“$(‘a.content’).lightpop({overlayBgColor:’#FFF’,contentFrameType:’box’,Contents:{size:[800,600],scrolling:’yes’},{},”,’http://〜/images/’);”
では、
アイコンが消え、動作しなくなりました。 (T_T)
ごめんなさい、カッコが足らんかったですね。
これで良いはず。
ありがとうございます。
m(_ _)m
バッチリＯＫです！！
このコンテンツ表示の場所を
“http://www.yahoo.co.jp/” などを
指定する事はできないですか？
そのまま指定するとアイコンが消え効かなくなります。
はじめまして。tanakaと申します。
iframeEnabled:trueにしてiframeにhtmlを読み込み、
読み込んだhtml内の「閉じるボタン」で閉じたいのですが、
どのように記述をすればよいでしょうか？
finish_lightpop();で閉じるが実行されているのはなんとなく解るのですが、
読み込んだhtmlの要素にアクセスできません。
javascriptをあまり触ったことが無いので、
こちらで質問するような内容でなかったらごめんなさいです。
よろしくおねがいいたします。
すみません。解決できました。
iframeに「iframe-popup」とIDをつけて下記の内容を
// show contentとコメントアウトがある、ロード完了あたりに追加しました。
（#closeBTNは読み込んだhtml内のボタン）
jQuery(“#iframe-popup”).contents().find(“#closeBTN”).click(function(){
finish_lightpop();
return false;
});
ロード完了後に記述しないと読み込んだhtmlの要素にアクセスできないんですね・・。
すみません、基礎的なミスでした。
お騒がせいたしました！
はじめまして。lightpop使わせてもらってます。
prev,nextボタンを、closeボタンの左に常に表示させておきたいんですが、
どこを書き換えればよいかご教授願えますでしょうか。。。
お願い致します。
うりさん、はじめまして。
jquery.lightpop-0.8.5.js の 490〜498 行目で、ナビゲーションボタンの CSS を設定していますので、この辺を良い感じに修正すれば、常に表示させておくことができるかもしれません。
次期バージョンアップの時に、常に表示させるオプションをつけるかどうか検討させてもらいますね。
おー！ これがやりたかったんだ
はじめまして。
動画を使えるということでこちらのプラグインを使わせていただきました。
私のような初心者でも簡単にできました！
ところで、動画が終了したら、CLOSEをクリックしなくても自動的に閉じるということは可能でしょうか？
nob さん、はじめまして。
lightpop.js から、動画が終了したタイミングを取得することができないのでムリです。
ご回答ありがとうございました。大変便利ですので、引き続き使わせていただきます！
結構便利
*sbm_hatena* jQuery.lightpop.js : 独断と偏見の何でもレビュー: jQuery.lightpop.js : 独断と偏見の何でもレビュー画像だけでなく、各種動画ファイル、YouTubeなどの動画サイ… http://bit.ly/aWyVH3
ごめんなさい、質問の続きですが．．．
コンテンツ表示の場合、
アドレスに“http://”が有る場合に効かなくなります。
（ヤフーやグーグルなどなど）
ただ、ローカルで動かすと効きます。（？？）
なぜなんでしょう？？
ozaki さん、どもです。
iframe 有効、無効 どちらの設定になってます？
# Contents のパラメータ iframeEnabled (デフォルトは有効)
iframe 有効になっていないと AJAX の制限で、外部サイトの内容は取得できないです。
いつもお手数をお掛けいたします。
Contents のパラメータはこんな感じです。
“$(‘a.content’).lightpop({overlayBgColor:’#FFF’,contentFrameType:’box’,Contents:{size:[640,480],scrolling:’yes’}},{},”,’http://〜/’);”
“iframeEnabled:true”はどこに記述すればいいのですか？
（色々やったのですが．．．）
はじめまして。2点質問があります。
lightpopを使ってflvの再生が終了した際に、shareの画面が出てきます。
e-mailやテキストが打てるようになっているのですが、これを表示させないためには
どうしたらいいでしょうか。
また、movie再生の▶ボタンを押す画面で、背景が全て真っ白になってしまうのですが
こちらのサイトのように、movieの部分は黒い背景で、コンテンツ部分は白背景と
言う風にはどうしたらいいでしょうか。（もしflv自体の問題でしたらすみません。。）
よろしくお願いします。
YUKI さん、はじめまして。
lightpop.js から、flvプレイヤーは制御していません。
実際に動作しているサイトを見ないと分かりませんが、対処は難しいかもです。
多分、そのうち触るであろうjQuery.lightpop.jsをメモ。
http://dogmap.jp/2007/12/22/jquerylightpopjs/