jQuery.lightpop.js

229件の返信

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

対応している動画サイト

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

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

うり 2010年6月25日 12:01 PM

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

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

返信 ↓
1. をかもと 投稿作成者2010年7月2日 12:36 PM
  
  うりさん、はじめまして。
  
  prev,nextボタンを、closeボタンの左に常に表示させておきたいんですが、
  どこを書き換えればよいかご教授願えますでしょうか。。。
  
  jquery.lightpop-0.8.5.js の 490〜498 行目で、ナビゲーションボタンの CSS を設定していますので、この辺を良い感じに修正すれば、常に表示させておくことができるかもしれません。
  次期バージョンアップの時に、常に表示させるオプションをつけるかどうか検討させてもらいますね。
  
  返信 ↓
tanaka 2010年6月18日 8:35 PM

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

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

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

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

返信 ↓
1. tanaka 2010年6月18日 10:18 PM
  
  すみません。解決できました。
  
  iframeに「iframe-popup」とIDをつけて下記の内容を
  // show contentとコメントアウトがある、ロード完了あたりに追加しました。
  （#closeBTNは読み込んだhtml内のボタン）
  
  jQuery(“#iframe-popup”).contents().find(“#closeBTN”).click(function(){
  finish_lightpop();
  return false;
  });
  
  ロード完了後に記述しないと読み込んだhtmlの要素にアクセスできないんですね・・。
  すみません、基礎的なミスでした。
  お騒がせいたしました！
  
  返信 ↓
ozaki 2010年6月12日 4:11 PM

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

返信 ↓
1. をかもと 投稿作成者2010年6月16日 5:45 PM
  ozaki さん、どもです。
```
$('a').lightpop(

{overlayBgColor:’#FFF’,contentFrameType:’box’, Contents:{size:[800,600], scrolling:'yes'},

{},

’http://〜/images/’

});
```
  こんな感じですね。
  返信 ↓
  1. ozaki 2010年6月17日 9:55 AM
    
    ごめんなさい。
    “$(‘a.content’).lightpop({overlayBgColor:’#FFF’,contentFrameType:’box’,Contents:{size:[800,600],scrolling:’yes’},{},”,’http://〜/images/’);”
    では、
    アイコンが消え、動作しなくなりました。　　(T_T)
    
    返信 ↓
    1. をかもと 2010年6月17日 10:01 AM
      
      ごめんなさい、カッコが足らんかったですね。
      
      $('a.content').lightpop( {overlayBgColor:’#FFF’,contentFrameType:’box’,Contents: {size:[800,600],scrolling:’yes’}}, {}, '', ’http://〜/images/’ );
      
      これで良いはず。
      
      返信 ↓
      1. ozaki 2010年6月17日 11:48 AM
        
        ありがとうございます。
        m(_ _)m
        バッチリＯＫです！！
        
        このコンテンツ表示の場所を
        　“http://www.yahoo.co.jp/” などを
        指定する事はできないですか？
        そのまま指定するとアイコンが消え効かなくなります。
        
        返信 ↓
たかおファン 2010年6月7日 8:46 PM

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

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

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

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

返信 ↓
1. たかおファン 2010年6月8日 11:06 AM
  
  すいません自己レスです。
  一応解決しました。
  
  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. をかもと 投稿作成者2010年6月8日 1:54 PM
    たかおファンさん、はじめまして。
    
    これはバグでしょうか？？
    
    バグですね。修正します。
    
    それとスクロールもしたかったので328行目のscrolling=”no”をscrolling=”yes”に書き換えて対応できました。
    このスクロールの有無も設定で変えられるようになってると良いと思います。
    ご検討お願い致します。
    
    ご要望、ありがとうございます。
    というわけで、設定で変えられるようにして、バグを修正した 0.8.5 をリリースしました。
    Plugins | jQuery Plugins
    
    scrolling の設定を変更する時は、以下のように指定してください。
    
    $('a').lightpop({Contents:{size:[800,600]}, scrolling:'yes'});
    返信 ↓
    1. たかおファン 2010年6月8日 2:30 PM
      
      素早い対応ありがとうございます！！
      早速使わせていただきます。
      
      ところで使い方の例は、本当は波カッコの閉じ位置はこうですよね？
      
      $('a').lightpop({Contents:{size:[800,600], scrolling:'yes'}});
      
      返信 ↓
      1. をかもと 投稿作成者2010年6月8日 2:34 PM
        
        たかおファンさん、どもです。
        
        ところで使い方の例は、本当は波カッコの閉じ位置はこうですよね？
        
        $('a').lightpop({Contents:{size:[800,600], scrolling:'yes'}});
        
        うぉ、そうですね。間違ってました。
        
        返信 ↓
ゆう 2010年5月7日 11:47 PM

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

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

返信 ↓
1. をかもと 投稿作成者2010年6月8日 2:47 PM
  ゆうさん、はじめまして。連絡遅くなって申し訳有りません。
  
  これに対応するには、以下のように一つずつ設定するしかありません。
```
$('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. ゆう 2010年6月17日 7:41 AM
    
    お返事ありがとうございました！こちらこそ急がせてしまったみたいで申し訳ございません。
    ご指定の通りにタグを書き換えたところ、きちんとジャンルごとにグループ分けできました！
    早速サイトにて使用させていただきたく思っております。
    私のような初心者にもとても丁寧にご指導くださり本当にありがとうございました。
    
    返信 ↓
takatoshi 2010年3月23日 10:45 AM

こんにちは、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. をかもと 投稿作成者2010年3月24日 4:26 PM
  
  takatoshi さん、はじめまして。
  
  現在iframe内にhtmlのページを表示させて、そのiframe内に表示されているページにlightpopを使っています。ただlightpopを表示させようとすると、overlayの透明背景がiframe内にしか表示されず、動画を再生する時一部だけが暗くなるという不自然なレイアウトになってしまいます。
  どうにかiframeを飛び越えて、ページ全体が暗くなるように設定する事は出来ませんか？
  
  残念ながら iframe 内の子フレーム上で動作している jquery.lightpop から、親フレームの overlay を操作することはできません。
  また、そのような対応ができる仕様変更を行うことも考えておりません。
  
  返信 ↓
andore 2010年3月22日 8:59 PM

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

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

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

返信 ↓
1. をかもと 投稿作成者2010年3月23日 9:10 AM
  
  andore さん、はじめまして。
  導入してみたのは http://super-atoys.com/ というサイトでしょうか？
  WordPressがインストールできていないように見えます。
  
  このスクリプトを使用するだけなら、WordPress のインストールは必要ありません。
  jQuery と jQuery.lightpop.js をロードするようにして、後はJavaScriptを記述すればおっけです。
  サンプルページ( https://dogmap.jp/lightpop_sample/ )のソースを参考にして記述してみてください。
  
  返信 ↓
ozaki 2010年2月23日 1:51 PM

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

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

返信 ↓
1. をかもと 投稿作成者2010年2月23日 2:09 PM
  
  ozaki さん、どもです。
  
  youtubeとcontentの標準サイズ指定ができません。
  これってできないのでしょうか？
  
  YouTube のサイズ指定はできますよ。
  $('a.video').lightpop({YouTube:{size[640,480]}});
  で、おっけ。大文字小文字に注意してください。
  
  Contents の方はバグっぽいですね。時間のあるときに修正します。
  
  返信 ↓
  1. ozaki 2010年2月24日 6:40 AM
    
    いまこんな感じで使っているのですが．．．、
    $(‘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. をかもと 投稿作成者2010年2月24日 9:46 AM
      
      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 が指定してあれば、そちらを優先します。
      
      返信 ↓
      1. ozaki 2010年2月24日 11:35 AM
        
        ありがとうございます。
        m(_ _)m
        バッチリ決まりました！！
        
        返信 ↓
tamako 2010年2月22日 5:18 PM

こんにちは、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. をかもと 投稿作成者2010年2月22日 6:14 PM
  
  tamako さん、はじめまして。
  
  過去のコメントを読むと、
  $(‘a’).lightpop({Image:{size:[320,240]}});
  でイメージサイズの最大高さ、幅を設定できるようですが、flvでは設定できないでしょうか？
  
  動画のデフォルトサイズを設定するには $(‘a.video’).lightpop({flvplayer:’lightpop/player.swf’,Video:{size[640,480]}}); とすればできます。
  
  返信 ↓
  1. tamako 2010年2月22日 7:49 PM
    
    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. をかもと 投稿作成者2010年2月22日 10:11 PM
      
      tamako さん、どもです。すいません、私の記述ミスですね。
      正しくは $(‘a.video’).lightpop({flvplayer:’lightpop/player.swf’,Video:{size:[640,480]}}); ですね。
      # size の後ろに “:” を書き忘れてました。
      
      この辺は、一応エントリ内にも「リンク種類毎のオプション」と言う所で記述してるんですが、わかりづらいでしょうかね。
      もうちょい、例文を書きたしておきます。
      
      返信 ↓
      1. たまこ 2010年2月22日 10:39 PM
        
        tamakoです
        
        tamako さん、どもです。すいません、私の記述ミスですね。
        正しくは $(‘a.video’).lightpop({flvplayer:’lightpop/player.swf’,Video:{size:[640,480]}}); ですね。
        # size の後ろに “:” を書き忘れてました。
        
        この辺は、一応エントリ内にも「リンク種類毎のオプション」と言う所で記述してるんですが、わかりづらいでしょうかね。
        もうちょい、例文を書きたしておきます。
        
        ありがとうございます。無事動作しました。あー良かったｗ
        あ、前のコメントの　Image:{size:[320,240]}　と見比べれば確かに”：”がありませんでしたね
        気づかなかったです。
        
        どうもお手数をおかけしました。
        
        返信 ↓
hidechan 2010年2月2日 5:45 PM

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

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

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

返信 ↓
1. をかもと 投稿作成者2010年2月3日 10:31 AM
  
  hidechan さん、はじめまして。
  
  jquery.lightpop-0.8.3.js を修正すれば可能です。
  具体的に言うと107〜178行目で動画の種類によって、どのプレイヤーを使用するか設定しているので、その辺を修正してください。
  GPLで配布させてもらってるので、修正はご自由に。
  
  返信 ↓
ozaki 2010年1月29日 2:16 PM

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

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

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

返信 ↓
1. をかもと 投稿作成者2010年2月1日 1:00 PM
  
  ozaki さん、どもです。
  すいません Ver.0.8.2 で、ちょっと仕様変更してしまいました。
  Ver.0.8.3 では、以前の設定で動作するように修正しましたので、バージョンアップお願いします 😳
  
  返信 ↓
  1. ozaki 2010年2月2日 10:27 AM
    
    アップデートありがとうございます。
    m(_ _)m
    タグで使えるのはおもしろいですネ。
    （FCKeditorのプラグイン“Image Maps Plugin”をハックしてみます。）
    
    質問なんですが、
    いつ頃かわかりませんが、
    “contentFrameType:’box’” のウィンドー形状が変わっているのですが、
    
    新しい方が「クール」でいいので「どうすれば」変えられるのですか？？
    
    返信 ↓
    1. をかもと 投稿作成者2010年2月3日 10:27 AM
      
      ozaki さん、どもです。
      
      配布している jquery.lightpop.0.8.3.zip の images フォルダ内にある、以下の3ファイルを現在使用しているファイルに上書きしてやってください。
      
      lightpop-box.gif
      
      lightpop-border-l.gif
      
      lightpop-border-r.gif
      
      返信 ↓
      1. ozaki 2010年2月3日 10:57 AM
        
        ありがとうございます。
        
        バッチリクールになりました。 😛
        
        返信 ↓
ひろ 2010年1月27日 3:56 PM

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

返信 ↓
1. をかもと 投稿作成者2010年1月27日 5:00 PM
  
  ひろさん、どもです。動作するようになって良かったです。
  
  一点、お願いが…
  
  クリッカブルマップからのリンクで少々手こずっておりましたが、その原因としてJavaScript内でのarea呼び出しの追記をしていませんでした。
  $(‘area.video’).lightpop({flvplayer:’https://dogmap.jp/lightpop_sample/mediaplayer/player.swf’});
  の追記で呼び出し、表示も出来ました！
  
  ウチのサーバの player.swf に対しての直接リンクは止めて、自サーバに player.swf を置くようにしてください。
  # .htaccess を修正してリファラに dogmap.jp ドメインが含まれていない場合はエラーにさせてもらいました。
  
  返信 ↓
  1. ひろ 2010年1月27日 11:57 PM
    
    をかもと様。
    失礼致しました、動作確認で手こずっていた際、ソースを参考にさせて頂いておりました。
    申し訳ございません。
    現在すでに自サーバでの呼び出しに書き換えております。
    有益なプラグイン開発に感謝致します。
    
    返信 ↓
ひろ 2010年1月24日 6:22 AM

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

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

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

返信 ↓
1. をかもと 投稿作成者2010年1月26日 12:48 PM
  ひろさん、はじめまして。
  
  Ver.0.8.2 でトップからの表示位置を調整できるようにしました。
  JavaScript 内で lightpop を呼び出す前に、以下の一行を挿入してください。
```
jQuery.fn.lightpop.position = {top: 20};
```
  ※このとき、{top:20} と指定してやれば、topから20pxの位置に表示されます。
  
  Ver.0.8.2 で <a> の他、<area> タグでも動作するように修正しました。
  これで、クリッカブルマップからのリンクが可能になります。
  返信 ↓
ピンバック: jQuery.lightpopてすと ? RuputerFan
おかめ 2009年12月16日 4:41 PM

こんにちは。

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

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

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

返信 ↓
1. をかもと 投稿作成者2009年12月26日 8:37 AM
  
  おかめさん、はじめまして。
  
  一つ質問なのですが、IE6で確認すると背景の黒が途中で切れてしまいます。
  IE6でも背景を全て黒にする事は可能でしょうか？
  
  ありゃ、バグですね。時間のある時に調べてみます。
  
  返信 ↓
2. をかもと 投稿作成者2010年1月26日 12:44 PM
  
  おかめさん、どもです。
  
  IE で後方互換モードでレンダリングされている場合、背景の黒が途中で切れてしまう不具合がありました。
  Ver.0.8.2 で、この不具合を修正しましたので、ご確認ください。
  
  返信 ↓
江戸川やまま 2009年12月15日 4:59 PM

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

返信 ↓
1. をかもと 投稿作成者2009年12月15日 8:06 PM
  
  江戸川やままさん、はじめまして。
  
  ソース内にESCキーでのCLOSEが実装されておりますが、こちらの動作は環境に依存しますでしょうか。
  WinXPのFx3.0、IE6.0/7.0それぞれでESCキーでのCLOSEが出来ませんでした。
  
  すいません、そのコードは以前実験していた時の残骸です。
  # 結局、環境依存が激しくて正常に動作しなかった。
  現状では、ESCキーでのCLOSEには対応していません。
  
  返信 ↓
ピンバック: オンポタメモ » links for 2009-11-25
ozaki 2009年11月21日 12:56 PM

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

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

返信 ↓
C&D 2009年11月18日 3:24 PM

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

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

返信 ↓
1. をかもと 投稿作成者2009年11月20日 8:34 PM
  
  C&D さん、はじめまして。
  
  現在のバージョンでは、YouTube の再生リストを表示することはできません。
  YouTube の再生リストに対応するかは未定ですが、できそうなら対応してみます。
  ただし、今はちょっと余力が無いので、いつ対応するかは分かりませんが 😳
  
  返信 ↓
  1. C&D 2009年11月21日 12:10 AM
    
    こんばんは。お返事ありがとうございます。
    
    再生リストには対応していなかったのですね。
    出来ないということがわかっただけでもよかったです。
    毎日どうやったら出来るのか悩み続けていたので、あきらめがつきました。 😛
    再生リスト以外の動画で使わせていただきますね。
    素敵なスクリプトありがとうございます♪
    
    返信 ↓
ozaki 2009年11月6日 11:11 AM

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

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

返信 ↓
1. をかもと 投稿作成者2009年11月6日 9:29 PM
  
  ozaki さん、どもです。
  
  リンクタグのURLを <a href="media/pict.jpg?width=320&height=240"> のようにしてやれば、画像の表示サイズを変更できます。
  
  返信 ↓
  1. ozaki 2009年11月7日 6:52 PM
    
    リンクタグではなく
    メタタグ内に（size:等）記述し、ブラウザーの表示領域に入りきれない画像サイズを
    縮小する事はできないでしょうか？
    
    度素人の質問で申し訳ないです。　　　　m(_ _)m
    
    返信 ↓
    1. をかもと 投稿作成者2009年11月10日 6:18 PM
      
      ozaki さん、どもです。
      
      画像の最大幅、最大高さをピクセル単位で指定することはできます。
      オプションを、以下のように書いてやってください。
      
      $('a').lightpop({Image:{size:[320,240]}});
      
      これで、画像の最大幅320px、最大高さ240pxになるように表示されるはずです。
      
      返信 ↓
      1. ozaki 2009年11月11日 3:59 AM
        
        ありがとうございます。
        
        バッチリＯＫです！！
        
        追伸
        ・PukiWiki, PukiWiki Plus!
        　　自作プラグイン lightbox.inc.php から、
        　　lightpop.inc.php を作成。
        ・xoops 用 jQuery.lightpop.js + lightbox_plus.js OK
        ・　　+　xpWiki 用プラグイン lightpop.php 作成 OK
        
        いや〜素晴らしい！
        ありがとうございました。　　　　　m(_ _)m
        
        返信 ↓
ozaki 2009年11月1日 3:05 PM

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

返信 ↓
1. ozaki 2009年11月4日 9:54 AM
  
  ごめんなさい。　　m(_ _)m
  
  私の大きな勘違いでした。
  フルスクリーンにしていたのは、
  私くしが Ver.0.7.4 をハックしたものでした。
  
  あらためて、Ver.0.8.1 にて
  670行目と683行目に追加して動くようになりました。
  本当に失礼致しました。
  
  m(_ _)m
  
  追伸
  xoops による jquery.lightpop.js 利用は、
  モジュール xpWiki （Prototype）が当たっていたのが原因でした。
  ただし、他のページでの部品画像の不認識は解決しておりません。
  （ゆるゆると追っていきます 😆 ）
  
  返信 ↓
  1. をかもと 投稿作成者2009年11月4日 10:25 AM
    
    ozaki さん、どもです。
    フルスクリーン表示は、そのうち本体に盛り込みます。
    
    xoops の方、ほったらかしにしておいてすみません。
    まとまった時間が取れたら、xoops 環境作って確認します。
    いちおう Prototype.js と共存している状態でも正常に動作するようにしているつもりなんですが、確認しきれてないところがありますね (^^;;;
    
    返信 ↓
    1. ozaki 2009年11月5日 8:30 AM
      
      いつもお手数をお掛けし申し訳ございません。
      どうも不完全な情報でした．．．。　 😕
      
      xpWikiでのHTMLプラグイン埋め込みで色々やってみたら見事動きました。
      もっと色々試していきます。（ゆるゆると．．．）
      
      m(_ _)m
      
      返信 ↓
Mj 2009年10月27日 7:35 PM

をかもと様

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

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

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

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

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

返信 ↓
1. をかもと 投稿作成者2009年10月27日 11:22 PM
  
  Mj さん、はじめまして。
  
  実は今度、雑誌に『jquery.lightpop-0.8.1.js』を利用したデザインを
  掲載しようと考えているのですが構いませんか。
  
  あとその時に『jquery.lightpop-0.8.1.js』も紹介したいのですが宜しいでしょうか。
  
  どうぞ、どうぞ。
  GPLライセンスで配布しているものですので、これに反しない限りは、いくらでもご利用ください。
  あと、URLを掲示するようでしたらデモページ ( https://dogmap.jp/lightpop_sample/ ) のURLを掲示してくださるようお願いします。
  
  それから、メールでも良いので掲載予定の雑誌と発売日をお教えください、買いにいきます。
  連絡先のメールアドレスは wokamoto1973(あっと)gmail.com です。
  
  返信 ↓
ozaki 2009年9月30日 6:59 PM

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

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

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

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

返信 ↓
ozaki 2009年9月29日 6:05 PM

xoops プラグイン xpWiki と当たっている可能性があり
現在調査中です。　 😕

返信 ↓
1. をかもと 投稿作成者2009年9月30日 3:31 PM
  ozaki さん、どもです。返信遅くなって申し訳ない。
  
  とりあえずの回避策ですが lightpop を以下のようにして呼び出してみてください。
```
$('a').lightpop({overlayBgColor:'#FFF', contentFrameType:'box'}, {}, '', 'http://example.com/images/');
```
  一つ目の引数は、lightpop に渡す設定。
  二つ目の引数は、ファイルタイプの追加設定。
  三つ目の引数は、プラグインの名前 (未指定の場合 ‘lightpop’ がセットされます)
  四つ目の引数は、image ファイルが存在するフォルダへのパス (絶対パス・相対パスどちらでも指定可）
  
  になります。
  
  あと、正常に動作しないページのURLを教えていただけると、何か分かるかもしれません。
  差し支えなければ、そちらもお教えください。
  返信 ↓
ozaki 2009年9月27日 12:59 PM

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

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

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

返信 ↓