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. うり

    はじめまして。lightpop使わせてもらってます。

    prev,nextボタンを、closeボタンの左に常に表示させておきたいんですが、
    どこを書き換えればよいかご教授願えますでしょうか。。。
    お願い致します。

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

      うりさん、はじめまして。

      prev,nextボタンを、closeボタンの左に常に表示させておきたいんですが、
      どこを書き換えればよいかご教授願えますでしょうか。。。

      jquery.lightpop-0.8.5.js の 490〜498 行目で、ナビゲーションボタンの CSS を設定していますので、この辺を良い感じに修正すれば、常に表示させておくことができるかもしれません。
      次期バージョンアップの時に、常に表示させるオプションをつけるかどうか検討させてもらいますね。

      返信
  2. tanaka

    はじめまして。tanakaと申します。

    iframeEnabled:trueにしてiframeにhtmlを読み込み、
    読み込んだhtml内の「閉じるボタン」で閉じたいのですが、
    どのように記述をすればよいでしょうか?

    finish_lightpop();で閉じるが実行されているのはなんとなく解るのですが、
    読み込んだhtmlの要素にアクセスできません。

    javascriptをあまり触ったことが無いので、
    こちらで質問するような内容でなかったらごめんなさいです。
    よろしくおねがいいたします。

    返信
    1. tanaka

      すみません。解決できました。

      iframeに「iframe-popup」とIDをつけて下記の内容を
      // show contentとコメントアウトがある、ロード完了あたりに追加しました。
      (#closeBTNは読み込んだhtml内のボタン)

      jQuery(“#iframe-popup”).contents().find(“#closeBTN”).click(function(){
      finish_lightpop();
      return false;
      });

      ロード完了後に記述しないと読み込んだhtmlの要素にアクセスできないんですね・・。
      すみません、基礎的なミスでした。
      お騒がせいたしました!

      返信
  3. ozaki

    たかおファンさんの続きで申し訳ないのですが、
    “$(‘a.content’).lightpop({overlayBgColor:’#FFF’,contentFrameType:’box’},{},”,’http://〜/images/’);”
    の中にサイズとスクロールの指定をどのように記述すればいいのでしょうか??
    (Contents:{size:[800,600], scrolling:’yes’})

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

      ozaki さん、どもです。

      $('a').lightpop(
      {overlayBgColor:’#FFF’,contentFrameType:’box’, Contents:{size:[800,600], scrolling:'yes'},
      {},
      ’http://〜/images/’
      });

      こんな感じですね。

      返信
      1. ozaki

        ごめんなさい。
        “$(‘a.content’).lightpop({overlayBgColor:’#FFF’,contentFrameType:’box’,Contents:{size:[800,600],scrolling:’yes’},{},”,’http://〜/images/’);”
        では、
        アイコンが消え、動作しなくなりました。  (T_T)

        返信
        1. をかもと

          ごめんなさい、カッコが足らんかったですね。

          $('a.content').lightpop(
          {overlayBgColor:’#FFF’,contentFrameType:’box’,Contents: {size:[800,600],scrolling:’yes’}},
          {},
          '',
          ’http://〜/images/’
          );

          これで良いはず。

          返信
          1. ozaki

            ありがとうございます。
            m(_ _)m
            バッチリOKです!!

            このコンテンツ表示の場所を
             “http://www.yahoo.co.jp/” などを
            指定する事はできないですか?
            そのまま指定するとアイコンが消え効かなくなります。

            返信
  4. たかおファン

    はじめまして、たかおファンと申します。
    いつもlightpopには大変お世話になっております。

    htmlのページをlightpopで表示しようとするとなぜか縦長に表示されてしまいます。

    $(‘a’).lightpop({Contents:{size:[800,600]}});

    のように記述してもまったく反応がありません。
    やり方が間違っているのでしょうか?
    よろしければご教授お願いします!

    返信
    1. たかおファン

      すいません自己レスです。
      一応解決しました。

      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”に書き換えて対応できました。
      このスクロールの有無も設定で変えられるようになってると良いと思います。
      ご検討お願い致します。

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

        たかおファンさん、はじめまして。

        これはバグでしょうか??

        バグですね。修正します。

        それとスクロールもしたかったので328行目のscrolling=”no”をscrolling=”yes”に書き換えて対応できました。
        このスクロールの有無も設定で変えられるようになってると良いと思います。
        ご検討お願い致します。

        ご要望、ありがとうございます。
        というわけで、設定で変えられるようにして、バグを修正した 0.8.5 をリリースしました。
        Plugins | jQuery Plugins

        scrolling の設定を変更する時は、以下のように指定してください。

        $('a').lightpop({Contents:{size:[800,600]}, scrolling:'yes'});
        返信
        1. たかおファン

          素早い対応ありがとうございます!!
          早速使わせていただきます。

          ところで使い方の例は、本当は波カッコの閉じ位置はこうですよね?

          $('a').lightpop({Contents:{size:[800,600], scrolling:'yes'}});

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

            たかおファンさん、どもです。

            ところで使い方の例は、本当は波カッコの閉じ位置はこうですよね?

            $('a').lightpop({Contents:{size:[800,600], scrolling:'yes'}});

            うぉ、そうですね。間違ってました。

            返信
  5. ゆう

    はじめまして、ニコニコ動画もlightbox風に表示できるという事でこちらにたどり着きました。
    3日ほど色々いじってみて、本日やっとローカルで動くようになったのですけれど一つだけどうしても
    分からない事があり、恥ずかしながら書き込みさせていただきました。
    当方画像がメインのサイトを運営しており、現在はLightBoxで画像を、ポップアップでニコニコ動画を
    表示するようにしているのですが、乗り換えと同時にLightBoxは撤廃してLightpop一つで画像も
    管理できるようにしたいのです。

    ニコニコ動画、画像共問題なく表示されるのですが
    画像のグループ化がどうしてもできません…ギャラリーのページに置いてあるイラストが200枚近く
    あるのですが、すべて「Image」というグループでひとくくりになってしまいます。
    LightBoxではrel=”lightbox[グループ名]”の表記などでグループ化されていましたが
    このような細かい分類は不可能なのでしょうか?
    初歩的かつ調べ方が悪いのかもしれないのですが、もしできるようでしたらご教授くださると幸いです。
    長文かつ分かりにくい文章にて失礼いたしました。
    よろしくお願いいたします。

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

      ゆうさん、はじめまして。連絡遅くなって申し訳有りません。

      これに対応するには、以下のように一つずつ設定するしかありません。

      $('a[rel="lightbox[グループ名1]"]').lightpop();
      $('a[rel="lightbox[グループ名2]"]').lightpop();
      $('a[rel="lightbox[グループ名3]"]').lightpop();
      :

      もしくは、以下のような JavaScript を書いてやれば対応できるかもです。

      var rel_name = {};
      $('a[rel*="lightbox"]').each(function(){
      if ( $(this).attr('rel') != '' ) {
      rel_name[$(this).attr('rel')] = $(this).attr('rel');
      }
      });
      $.each(rel_name,function(){
      $('a[rel="' + this + '"]').lightpop();
      });

      このスクリプトは未検証です。適宜、修正してお使いください。

      返信
      1. ゆう

        お返事ありがとうございました!こちらこそ急がせてしまったみたいで申し訳ございません。
        ご指定の通りにタグを書き換えたところ、きちんとジャンルごとにグループ分けできました!
        早速サイトにて使用させていただきたく思っております。
        私のような初心者にもとても丁寧にご指導くださり本当にありがとうございました。

        返信
  6. takatoshi

    こんにちは、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以外の部分に効いてこない現状です。

    どうぞよろしくお願い致します。

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

      takatoshi さん、はじめまして。

      現在iframe内にhtmlのページを表示させて、そのiframe内に表示されているページにlightpopを使っています。ただlightpopを表示させようとすると、overlayの透明背景がiframe内にしか表示されず、動画を再生する時一部だけが暗くなるという不自然なレイアウトになってしまいます。
      どうにかiframeを飛び越えて、ページ全体が暗くなるように設定する事は出来ませんか?

      残念ながら iframe 内の子フレーム上で動作している jquery.lightpop から、親フレームの overlay を操作することはできません。
      また、そのような対応ができる仕様変更を行うことも考えておりません。

      返信
  7. andore

    はじめまして。
    こちらのスクリプトに一目惚れしたのですが、HP立ち上げたばかりで全く知識がないため自力で動かすことができませんでした・・・。
    是非、利用したいのでヒントをいただければと思います。
    認識が違っていたらご指摘ください。
    1. Wordpressをサーバーにインストール(FC2サーバー利用中) 済み
    2. WP-lightpopをPluginsにインストール 設置画面が確認でき 済み
    3.  の直前に 、 の直前に 記載 済み
    4. <a href="../../sakura5002small.JPG" rel="nofollow"><IMG>を書き込み 済み

    ですばらしいポップアップ表示が完成!のはずでしたが…。

    ど素人すぎる質問で、大変恐縮ですがお力をお貸しください。
    宜しくお願いします。

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

      andore さん、はじめまして。
      導入してみたのは http://super-atoys.com/ というサイトでしょうか?
      WordPressがインストールできていないように見えます。

      このスクリプトを使用するだけなら、WordPress のインストールは必要ありません。
      jQuery と jQuery.lightpop.js をロードするようにして、後はJavaScriptを記述すればおっけです。
      サンプルページ( https://dogmap.jp/lightpop_sample/ )のソースを参考にして記述してみてください。

      返信
  8. ozaki

    たまこさんのご質問の続きで申し訳ないのですが

    ビデオの標準サイズ指定はできたのですが、
    youtubeとcontentの標準サイズ指定ができません。
    これってできないのでしょうか?

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

      ozaki さん、どもです。

      youtubeとcontentの標準サイズ指定ができません。
      これってできないのでしょうか?

      YouTube のサイズ指定はできますよ。
      $('a.video').lightpop({YouTube:{size[640,480]}});
      で、おっけ。大文字小文字に注意してください。

      Contents の方はバグっぽいですね。時間のあるときに修正します。

      返信
      1. ozaki

        いまこんな感じで使っているのですが...、
        $(‘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]}”をどのように記述すればいいのでしょうか?

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

          ozaki さん、どもです。

          $('a[href*=.youtube.com/watch]').lightpop({
          overlayBgColor:'#FFF',
          contentFrameType:'box',
          grouping:false,
          YouTube: {enabled:true, param:{'hl':'ja','hd':'1','fs':'1'}, size:[640,480]}
          },{},'','http://〜 /images/');

          こんな感じで行っちゃってください。

          ただし、これはデフォルトのサイズを変更するだけなので、http://www.youtube.com/watch?v=zlfKdbWwruY&width=640&height=360&fmt=22 のように <a> タグで width, height が指定してあれば、そちらを優先します。

          返信
  9. tamako

    こんにちは、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]}});

    とかして見ましたができなかったので・・・

    よろしくお願いします

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

      tamako さん、はじめまして。

      過去のコメントを読むと、
      $(‘a’).lightpop({Image:{size:[320,240]}});
      でイメージサイズの最大高さ、幅を設定できるようですが、flvでは設定できないでしょうか?

      動画のデフォルトサイズを設定するには $(‘a.video’).lightpop({flvplayer:’lightpop/player.swf’,Video:{size[640,480]}}); とすればできます。

      返信
      1. tamako

        tamakoです

        動画のデフォルトサイズを設定するには $(‘a.video’).lightpop({flvplayer:’lightpop/player.swf’,Video:{size[640,480]}}); とすればできます。

        早速のお返事ありがとうございます。なるほど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
        で行っています

        よろしくお願いします

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

          tamako さん、どもです。すいません、私の記述ミスですね。
          正しくは $(‘a.video’).lightpop({flvplayer:’lightpop/player.swf’,Video:{size:[640,480]}}); ですね。
          # size の後ろに “:” を書き忘れてました。

          この辺は、一応エントリ内にも「リンク種類毎のオプション」と言う所で記述してるんですが、わかりづらいでしょうかね。
          もうちょい、例文を書きたしておきます。

          返信
          1. たまこ

            tamakoです

            tamako さん、どもです。すいません、私の記述ミスですね。
            正しくは $(‘a.video’).lightpop({flvplayer:’lightpop/player.swf’,Video:{size:[640,480]}}); ですね。
            # size の後ろに “:” を書き忘れてました。

            この辺は、一応エントリ内にも「リンク種類毎のオプション」と言う所で記述してるんですが、わかりづらいでしょうかね。
            もうちょい、例文を書きたしておきます。

            ありがとうございます。無事動作しました。あー良かったw
            あ、前のコメントの Image:{size:[320,240]} と見比べれば確かに”:”がありませんでしたね
            気づかなかったです。

            どうもお手数をおかけしました。

            返信
  10. hidechan

    はじめまして、lightpopについて質問があります。
    現在mp4ファイルを扱っているのですが、flvplayerで再生させようとしているのですが上手くいきません。
    quicktimeで再生すると、回線が遅い場所では音が遅れたりしてしまいます。

    mp4ファイルの際quicktimeを検出するのではなく、リンクされているflvplayerで再生させる方法はありませんでしょうか?

    よろしくお願い致します。

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

      hidechan さん、はじめまして。

      jquery.lightpop-0.8.3.js を修正すれば可能です。
      具体的に言うと107〜178行目で動画の種類によって、どのプレイヤーを使用するか設定しているので、その辺を修正してください。
      GPLで配布させてもらってるので、修正はご自由に。

      返信
  11. ozaki

    Ver.0.8.2 へアップデートしたのですが... 🙁

    通常利用では全く問題ないのですが、
    xoopsやPukiWikiに読み込んでいたサイトが
    「閉じる」、「前へ」などの画像を認識せず表示されません。
    また、テキストリンクの前に表示していたアイコンが表示されません。

    以前にご質問し解決して頂いたものと同じ症状です。
    どうしたものでしょう?

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

      ozaki さん、どもです。
      すいません Ver.0.8.2 で、ちょっと仕様変更してしまいました。
      Ver.0.8.3 では、以前の設定で動作するように修正しましたので、バージョンアップお願いします 😳

      返信
      1. ozaki

        アップデートありがとうございます。
        m(_ _)m
        タグで使えるのはおもしろいですネ。
        (FCKeditorのプラグイン“Image Maps Plugin”をハックしてみます。)

        質問なんですが、
        いつ頃かわかりませんが、
        “contentFrameType:’box’” のウィンドー形状が変わっているのですが、

        新しい方が「クール」でいいので「どうすれば」変えられるのですか??

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

          ozaki さん、どもです。

          配布している jquery.lightpop.0.8.3.zip の images フォルダ内にある、以下の3ファイルを現在使用しているファイルに上書きしてやってください。

          • lightpop-box.gif
          • lightpop-border-l.gif
          • lightpop-border-r.gif
          返信
  12. ひろ

    をかもと様、返信ありがとうございます。
    topからの表示位置調整も無事に出来ました!
    クリッカブルマップからのリンクで少々手こずっておりましたが、その原因としてJavaScript内でのarea呼び出しの追記をしていませんでした。
    $(‘area.video’).lightpop({flvplayer:’https://dogmap.jp/lightpop_sample/mediaplayer/player.swf'});
    の追記で呼び出し、表示も出来ました!
    ありがとうございます!!

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

      ひろさん、どもです。動作するようになって良かったです。

      一点、お願いが…

      クリッカブルマップからのリンクで少々手こずっておりましたが、その原因としてJavaScript内でのarea呼び出しの追記をしていませんでした。
      $(‘area.video’).lightpop({flvplayer:’https://dogmap.jp/lightpop_sample/mediaplayer/player.swf’});
      の追記で呼び出し、表示も出来ました!

      ウチのサーバの player.swf に対しての直接リンクは止めて、自サーバに player.swf を置くようにしてください。
      # .htaccess を修正してリファラに dogmap.jp ドメインが含まれていない場合はエラーにさせてもらいました。

      返信
      1. ひろ

        をかもと様。
        失礼致しました、動作確認で手こずっていた際、ソースを参考にさせて頂いておりました。
        申し訳ございません。
        現在すでに自サーバでの呼び出しに書き換えております。
        有益なプラグイン開発に感謝致します。

        返信
  13. ひろ

    はじめまして。
    素晴らしいプラグインと分かりやすい解説に感謝致します。
    お聞きしたいのですが、再生プレイヤーの表示位置(topから)の調整は可能でしょうか?
    再生サイズにかかわらずtopの表示位置は同じだと思うのですが再生サイズの都合上、もう少し上で再生させたく思い、色々いじっているのですが壁にぶち当たっております。

    またクリッカブルマップからのリンクは出来ませんか?
    再生動画はswfです。

    よろしくお願い致します。

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

      ひろさん、はじめまして。

      Ver.0.8.2 でトップからの表示位置を調整できるようにしました。
      JavaScript 内で lightpop を呼び出す前に、以下の一行を挿入してください。

      jQuery.fn.lightpop.position = {top: 20};

      ※このとき、{top:20} と指定してやれば、topから20pxの位置に表示されます。

      Ver.0.8.2 で <a> の他、<area> タグでも動作するように修正しました。
      これで、クリッカブルマップからのリンクが可能になります。

      返信
  14. ピンバック: jQuery.lightpopてすと ? RuputerFan

  15. おかめ

    こんにちは。

    大変参考になりました。ありがとうございます。

    一つ質問なのですが、IE6で確認すると背景の黒が途中で切れてしまいます。
    IE6でも背景を全て黒にする事は可能でしょうか?

    宜しくお願いいたします。

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

      おかめさん、はじめまして。

      一つ質問なのですが、IE6で確認すると背景の黒が途中で切れてしまいます。
      IE6でも背景を全て黒にする事は可能でしょうか?

      ありゃ、バグですね。時間のある時に調べてみます。

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

      おかめさん、どもです。

      IE で後方互換モードでレンダリングされている場合、背景の黒が途中で切れてしまう不具合がありました。
      Ver.0.8.2 で、この不具合を修正しましたので、ご確認ください。

      返信
  16. 江戸川やまま

    ソース内にESCキーでのCLOSEが実装されておりますが、こちらの動作は環境に依存しますでしょうか。
    WinXPのFx3.0、IE6.0/7.0それぞれでESCキーでのCLOSEが出来ませんでした。

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

      江戸川やままさん、はじめまして。

      ソース内にESCキーでのCLOSEが実装されておりますが、こちらの動作は環境に依存しますでしょうか。
      WinXPのFx3.0、IE6.0/7.0それぞれでESCキーでのCLOSEが出来ませんでした。

      すいません、そのコードは以前実験していた時の残骸です。
      # 結局、環境依存が激しくて正常に動作しなかった。
      現状では、ESCキーでのCLOSEには対応していません。

      返信
  17. ピンバック: オンポタメモ » links for 2009-11-25

  18. ozaki

    YouTube の再生リストか...
    探してみると「YouTubeのビデオを再生リストごとページに埋め込む方法」
     http://kenz0.s201.xrea.com/weblog/2009/05/youtube_16.html
    で、
    youtube.com/v/ を youtube.com/p/ にして 番号を入れる。 フムフム。

    C&Dさん おもしろいヒントありがとうございました。    😮

    返信
  19. C&D

    はじめまして。
    こちらのスクリプトに一目惚れしたのですが 😳 、知識がないため自力で動かすことができません・・・。

    YouTubeの通常の動画はうまく出来たのですが、
    YouTubeの再生リスト(複数の動画を順番に再生するプレーヤー)で動作させるにはどこをどのように書き換えればいいでしょうか。
    どうしてもこのスクリプトを使いたいです。どうぞよろしくお願いします。

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

      C&D さん、はじめまして。

      現在のバージョンでは、YouTube の再生リストを表示することはできません。
      YouTube の再生リストに対応するかは未定ですが、できそうなら対応してみます。
      ただし、今はちょっと余力が無いので、いつ対応するかは分かりませんが 😳

      返信
      1. C&D

        こんばんは。お返事ありがとうございます。

        再生リストには対応していなかったのですね。
        出来ないということがわかっただけでもよかったです。
        毎日どうやったら出来るのか悩み続けていたので、あきらめがつきました。 😛
        再生リスト以外の動画で使わせていただきますね。
        素敵なスクリプトありがとうございます♪

        返信
  20. ozaki

    ❓ 質問を一つお願い致します。

    でか〜い画像をリンク設定したいのですが、
    そのままでは原寸表示になってしまいます。
    ヘッダ部へはどのように記述すればいいのですか?

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

      ozaki さん、どもです。

      リンクタグのURLを <a href="media/pict.jpg?width=320&height=240"> のようにしてやれば、画像の表示サイズを変更できます。

      返信
      1. ozaki

        リンクタグではなく
        メタタグ内に(size:等)記述し、ブラウザーの表示領域に入りきれない画像サイズを
        縮小する事はできないでしょうか?

        度素人の質問で申し訳ないです。    m(_ _)m

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

          ozaki さん、どもです。

          画像の最大幅、最大高さをピクセル単位で指定することはできます。
          オプションを、以下のように書いてやってください。

          $('a').lightpop({Image:{size:[320,240]}});

          これで、画像の最大幅320px、最大高さ240pxになるように表示されるはずです。

          返信
          1. ozaki

            ありがとうございます。

            バッチリOKです!!

            追伸
            ・PukiWiki, PukiWiki Plus!
              自作プラグイン lightbox.inc.php から、
              lightpop.inc.php を作成。
            ・xoops 用 jQuery.lightpop.js + lightbox_plus.js OK
            ・  + xpWiki 用プラグイン lightpop.php 作成 OK

            いや〜素晴らしい!
            ありがとうございました。     m(_ _)m

            返信
  21. ozaki

    あれ?
    フルスクリーン表示ができなくなりました。
    いつ頃かわかりませんが...。
    お手数ですがご確認願います。

    返信
    1. ozaki

      ごめんなさい。  m(_ _)m

      私の大きな勘違いでした。
      フルスクリーンにしていたのは、
      私くしが Ver.0.7.4 をハックしたものでした。

      あらためて、Ver.0.8.1 にて
      670行目と683行目に追加して動くようになりました。
      本当に失礼致しました。

      m(_ _)m

      追伸
      xoops による jquery.lightpop.js 利用は、
      モジュール xpWiki (Prototype)が当たっていたのが原因でした。
      ただし、他のページでの部品画像の不認識は解決しておりません。
      (ゆるゆると追っていきます 😆 )

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

        ozaki さん、どもです。
        フルスクリーン表示は、そのうち本体に盛り込みます。

        xoops の方、ほったらかしにしておいてすみません。
        まとまった時間が取れたら、xoops 環境作って確認します。
        いちおう Prototype.js と共存している状態でも正常に動作するようにしているつもりなんですが、確認しきれてないところがありますね (^^;;;

        返信
        1. ozaki

          いつもお手数をお掛けし申し訳ございません。
          どうも不完全な情報でした...。  😕

          xpWikiでのHTMLプラグイン埋め込みで色々やってみたら見事動きました。
          もっと色々試していきます。(ゆるゆると...)

          m(_ _)m

          返信
  22. Mj

    をかもと様

    はじめましてこんにちわ。
    Mjと申します。

    いつも参考にさせて頂いてます。
    ありがとうございます。

    実は今度、雑誌に『jquery.lightpop-0.8.1.js』を利用したデザインを
    掲載しようと考えているのですが構いませんか。

    あとその時に『jquery.lightpop-0.8.1.js』も紹介したいのですが宜しいでしょうか。

    恐れ入りますがお願いいたします。

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

      Mj さん、はじめまして。

      実は今度、雑誌に『jquery.lightpop-0.8.1.js』を利用したデザインを
      掲載しようと考えているのですが構いませんか。

      あとその時に『jquery.lightpop-0.8.1.js』も紹介したいのですが宜しいでしょうか。

      どうぞ、どうぞ。
      GPLライセンスで配布しているものですので、これに反しない限りは、いくらでもご利用ください。
      あと、URLを掲示するようでしたらデモページ ( https://dogmap.jp/lightpop_sample/ ) のURLを掲示してくださるようお願いします。

      それから、メールでも良いので掲載予定の雑誌と発売日をお教えください、買いにいきます。
      連絡先のメールアドレスは wokamoto1973(あっと)gmail.com です。

      返信
  23. ozaki

    ありがとうございます。 😛

    トップページにおいて部品画像を認識してくれましたが、
    他のプラグインページでは認識してくれませんでした。
    (URL指定、絶対パス指定ともにダメでした)
    画像も自動縮小致しませんでした。

    ん〜〜〜、やっかいですネ。
    新しい xoops (XOOPS Cube Legacy 2.2alpha) ではjQueryが標準になりそうなので
    ゼヒにと思ったのですが...。

    またレポート致します。          m(_ _)m

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

      ozaki さん、どもです。返信遅くなって申し訳ない。

      とりあえずの回避策ですが lightpop を以下のようにして呼び出してみてください。

      $('a').lightpop({overlayBgColor:'#FFF', contentFrameType:'box'}, {}, '', 'http://example.com/images/');

      一つ目の引数は、lightpop に渡す設定。
      二つ目の引数は、ファイルタイプの追加設定。
      三つ目の引数は、プラグインの名前 (未指定の場合 ‘lightpop’ がセットされます)
      四つ目の引数は、image ファイルが存在するフォルダへのパス (絶対パス・相対パスどちらでも指定可)

      になります。

      あと、正常に動作しないページのURLを教えていただけると、何か分かるかもしれません。
      差し支えなければ、そちらもお教えください。

      返信
  24. ozaki

    いかがなものでしょうか?

    バッチリ呼んでくれて動いてくれるのですが、

    スクリプト自体は動いているのですが、ボタン画像が表示せず
    画像自体自動縮小してくれません。(100%のまま表示)

    返信

コメントを残す

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