jQuery.lightpop.js

画像だけでなく、各種動画ファイル、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 を指定すると、指定されたファイルをサムネイルとして表示させます。

対応している動画サイト

対応しているビデオファイル形式

.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'}}});

jQuery.lightpop.js」への229件のフィードバック

    1. t

      サンプルページで使われているので
      ソースからjsのパスを見つけて
      アドレスに入れてエンターでDLできますよ。

      返信
  1. けん

    こんにちは。
    lightpopを使わせてもらっています。

    jquery1.7.1、jquery.lightpop-0.8.5.1.min.jsの組み合わせで、

    jQuery(function(){
    $('a.content').lightpop();
    });

    ほげ

    とすると、「ほげ」の文字列が右にずれてしまいます。
    ブラウザはIEでもFirefoxでも同じです。一瞬左の位置に表示された後、
    右のずれた位置に表示されなおします。

    どなたか解決方法をご存知でしたら、、教えてください。
    よろしくお願いいたします。

    返信
  2. ピンバック: lightboxの動画版『lightpop』 « ウェブ制作の必需品 [jQuery編]

  3. 小鳥遊リクピ

    lightpopを愛用している小鳥遊リクピです。このたびはhttp://rikupix.blog39.fc2.com/blog-entry-2.html のページで1ページに複数ニコニコ動画のlightpopを使用したところ一回目は違うのが表示されたり、2回目ではきちんとしたものが表示されたりとよくわかりません。一体どうなってこういうふうになっているのか教えていただけると幸いです。画像やYoutubeなどでは現象は確認できていません。

    返信
  4. soto

    をかもと様、はじめまして。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 藤岡藤巻

    をリンクさせても、やはり通常のページ推移をしてしまいます。
    どこかおかしなところがございますでしょうか?
    初歩的な質問で大変お恥ずかしい限りでございますが、お時間ございますとき、
    ご回答いただけましたら幸いに存じます。
    });
    //]]>

    返信
  5. amako

    をかもとさま

    お世話になっております。
    jQueryを最新版に変更し、lightpop Ver.0.8.5.1に更新致しました所、
    全て問題なく動作いたしました。

    お忙しいなか迅速なご対応本当にありがとうございました…!

    返信
  6. たかおファン

    お世話になっております、たかおファンです。

    この度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使用の場合はホストをチェックしない条件式に変更されてはどうでしょうか?

    ご検討お願いいたします。

    返信
    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使用の場合はホストをチェックしない条件式に変更されてはどうでしょうか?

      おっ、そうですね。次バージョンで修正します。
      ご指摘ありがとうございます。

      返信
  7. amako

    はじめまして。WPプラグインでの挙動が理想的だったので
    通常のHTMLページでも使用させて頂きたく最新版をDL、設置いたしました。
    とてもスマートな使い心地で重宝しております、ありがとうございます。

    早速ですが、少しつまづいた箇所があり、同じような症状が出ている方がおられましたのでご報告致します。
    全体的な挙動に問題はありませんが、Firefoxでの閲覧時に限り
    Next・Close等の本来右側に寄せられる要素が全て左側に寄ってしまいます。
    IE8、Operaなどでは正常に表示されていました。
    WPプラグインの方ではFirefoxでも問題なく表示されています。

    原因、対策法などお知らせ頂けましたら幸いです。

    返信
    1. をかもと 投稿作成者

      amako さん、はじめまして。

      全体的な挙動に問題はありませんが、Firefoxでの閲覧時に限り
      Next・Close等の本来右側に寄せられる要素が全て左側に寄ってしまいます。
      IE8、Operaなどでは正常に表示されていました。

      一つ上にコメントしていただいた方と同じく他のCSSとの競合だと思われますが、原因がわかりません。
      その現象が発生しているサイトのURLをお教えいただけますか?

      返信
      1. amako

        をかもとさま

        レス有難うございました。
        先日、最新のjQuery(v1.4.3)からひとつバージョンを下げる事で
        レイアウトがずれる現象を回避できました。
        お手数をお掛けして申し訳ございません。

        取り急ぎご報告まで。

        返信
        1. をかもと 投稿作成者

          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 の画像ファイルをご使用ください。

          返信
  8. tamako

    こんにちは、またまた、分からないところがあるので教えて下さい。

    lightpopの最新版(0.8.5)を、新しいブログに設置しているのですが、画像を表示した際、LoadingイメージとNextイメージ、Close×イメージが左に寄ってしまってかっこわるいことになっています。

    何かのCSSとかと競合しているのかと思い、ブログのCSSを切って試してみたのですが、やはり左によったままなのです。

    バージョンを0.8.3などに変えてみても変わりませんでした。

    何が原因なのか、分かりますでしょうか??

    返信
    1. をかもと 投稿作成者

      tamako さん、はじめまして。

      lightpopの最新版(0.8.5)を、新しいブログに設置しているのですが、画像を表示した際、LoadingイメージとNextイメージ、Close×イメージが左に寄ってしまってかっこわるいことになっています。

      なにかのCSSとの競合だと思われますが、原因がわかりません。
      その現象が発生しているサイトのURLをお教えいただけますか?

      返信
      1. tamako

        こんにちは、たまこです。お返事遅くなりました。
        下の、amakoさんが行っているとおり、jqueryのバージョンを一つさげるとローディングのイメージ以外は
        正常に表示されるようになることを確認しています。

        ただ、それだと、今後困るかもしれませんので、contactからURLをお送りしますので、ご確認いただけますでしょうか?
        まだ、作成中のページですので、今は公にできません。

        よろしくお願いします

        返信
  9. mamiko

    はじめまして

    クリッカブルマップに対応させるにはどのように改造すればよいでしょうか。
    初心者の質問で申し訳ありませんが、ご教授いただけますと幸いです。

    返信
    1. をかもと 投稿作成者

      mamiko さん、はじめまして。

      クリッカブルマップに対応させるにはどのように改造すればよいでしょうか。

      最新版では、改造しなくてもクリッカブルマップに対応しているはずです。

      返信
  10. もりお

    はじめまして。

    こちらをvimeoで使ってみようとおもうのですが、対応は難しいのでしょうか?
    何せ初心者なもので、勝手に改造しようと思ったのですが、うまく行きませんでした。
    良いアイデアはございますでしょうか?
    よろしくお願いいたします。

    返信
    1. をかもと 投稿作成者

      もりおさん、はじめまして。

      Vimeo 対応については、他の方からもリクエストがきてますので対応しようと思ってます。
      しばし、お待ちください。

      返信
  11. 風待

    はじめまして。

    さて、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’)
    に書き換えて、現在問題なく動作しています。

    余り検証してないので申し訳ないのですが、ご報告まで。

    返信
    1. をかもと 投稿作成者

      風待さん、はじめまして。

      現象: 「/」で始まるサイト内リンクの場合に
      1. ポート番号付きURLでアクセスしているのに、lightpopを適用すると相対リンクからポート番号が消えてしまいページが表示できない
      2. 書き換え後のリンク先が必ず「ホスト名//PATH」とホスト名直後の「/」が二つになってしまい、RoRでmongrelを利用しているとページが表示できない

      そうですね。ポート番号付きURLに対応してませんでした。
      次期バージョンリリース時に修正します。
      ご報告ありがとうございました!

      返信
      1. 風待

        をかもとさん、修正よろしくお願い致します。

        ThickBoxはデフォルトで全称セレクタが入っていたりして使いにくいので、こちらのプラグインに期待しています 😀

        返信
  12. ちろん

    はじめまして。
    Lightbox風表示でニコニコ動画対応、との事でぜひ使わせていただこうと思ったのですが
    ダウンロードリンクの場所からダウンロードできません… 😥
    0.85、0.84などのバージョンは表示されるのですがDLのリンクが無く
    バージョンやNoteをクリックすると「Minor bug fix 1.3.x」というのが表示されるだけです。
    初心者な質問で申し訳ないですが、どちらからDLすれば良いのか教えていただけませんでしょうか?

    返信
  13. YUKI

    はじめまして。2点質問があります。
    lightpopを使ってflvの再生が終了した際に、shareの画面が出てきます。
    e-mailやテキストが打てるようになっているのですが、これを表示させないためには
    どうしたらいいでしょうか。
    また、movie再生の?ボタンを押す画面で、背景が全て真っ白になってしまうのですが
    こちらのサイトのように、movieの部分は黒い背景で、コンテンツ部分は白背景と
    言う風にはどうしたらいいでしょうか。(もしflv自体の問題でしたらすみません。。)
    よろしくお願いします。

    返信
    1. をかもと 投稿作成者

      YUKI さん、はじめまして。

      lightpop.js から、flvプレイヤーは制御していません。
      実際に動作しているサイトを見ないと分かりませんが、対処は難しいかもです。

      返信
  14. ozaki

    ごめんなさい、質問の続きですが...

    コンテンツ表示の場合、
    アドレスに“http://”が有る場合に効かなくなります。
    (ヤフーやグーグルなどなど)
    ただ、ローカルで動かすと効きます。(??)

    なぜなんでしょう??

    返信
    1. をかもと 投稿作成者

      ozaki さん、どもです。

      iframe 有効、無効 どちらの設定になってます?
      # Contents のパラメータ iframeEnabled (デフォルトは有効)

      iframe 有効になっていないと AJAX の制限で、外部サイトの内容は取得できないです。

      返信
      1. ozaki

        いつもお手数をお掛けいたします。
        Contents のパラメータはこんな感じです。

        “$(‘a.content’).lightpop({overlayBgColor:’#FFF’,contentFrameType:’box’,Contents:{size:[640,480],scrolling:’yes’}},{},”,’http://〜/’);”

        “iframeEnabled:true”はどこに記述すればいいのですか?
        (色々やったのですが...)

        返信
  15. nob

    はじめまして。
    動画を使えるということでこちらのプラグインを使わせていただきました。
    私のような初心者でも簡単にできました!
    ところで、動画が終了したら、CLOSEをクリックしなくても自動的に閉じるということは可能でしょうか?

    返信
    1. をかもと 投稿作成者

      nob さん、はじめまして。

      ところで、動画が終了したら、CLOSEをクリックしなくても自動的に閉じるということは可能でしょうか?

      lightpop.js から、動画が終了したタイミングを取得することができないのでムリです。

      返信

コメントを残す

メールアドレスが公開されることはありません。