WP-lightpop Ver.0.7.1 リリース

WordPress 用プラグイン WP-lightpop Ver.0.7.1 をリリースしました。
今回のリリースは初期バージョンからあった不具合の修正。
これで、しばらくバージョンアップしない予定です。

ダウンロードと使用方法は下記サイトを参照してください。
WordPress Plugins/JSeries » WP-lightpop

で、今回のバージョンで修正した不具合ですが…
グループ表示している画像を「NEXT」「PREV」ボタンで次画像を表示している際、たまにローディング画像が表示されっぱなしになって、次画像が表示されないことがある。
と言う不具合でした。
再現性に乏しく中々原因が究明できなかったんですが、ようやく修正できました。

画像ファイルを表示する際に、画像のサイズ(width,height)を取得するために Image オブジェクトを作成して src をセットし onload() で width, height を取得していました。
具体的には、以下のようなコード。

 var image_set = function(contentNo){
  image_load(arrContent[contentNo].href, (function(contentNo){return function(){
   arrContent[contentNo] = jQuery.extend(arrContent[contentNo], {
     content:'<img src="' + this.src.replace(/\?.*$/, '') + '" width="' + this.width + '" height="' + this.height + '" />'
    ,width:this.width
    ,height:this.height
   });
  }})(contentNo));
 }

 // image loader
 var objImageLoader = {};
 var image_load = function(src, callback){
  if (typeof objImageLoader[src] === 'undefined') {
   objImageLoader[src] = new Image();
   if (typeof callback === 'function') objImageLoader[src].onload = callback;
   objImageLoader[src].src = src;
  }
  return objImageLoader[src];
 }

ただ、このコードだとたまに onload が発生しないことがあったんですが、原因が分かりませんでした。
で、「完全に状況を掌握した画像の遅延読み」と言うエントリを参考に以下のようにコードを修正した結果、うまいこと動作するようになりました。

 var image_set = function(contentNo){
  image_load(arrContent[contentNo].href, (function(contentNo){return function(src, width, height){
   arrContent[contentNo] = jQuery.extend(arrContent[contentNo], {
     content:'<img src="' + src.replace(/\?.*$/, '') + '" width="' + width + '" height="' + height + '" />'
    ,width:width
    ,height:height
   });
  }})(contentNo));
 }

 // image loader
 var images = document.images;
 var image_load = function(src, onLoad, onError, delay, timeout) {
  onLoad  = onLoad  || function(){};
  onError = onError || function(){};
  delay   = delay   || 10;
  timeout = timeout || 2000;
  for (var i = 0, sz = images.length; i < sz; ++i) {
   if (images&#91;i&#93;.src === src && images&#91;i&#93;.complete) {
    onLoad(src, images&#91;i&#93;.width, images&#91;i&#93;.height);
    return;
   }
  }
  var img = new Image(), tick = 0;

  img.finish = false;
  img.onabort = img.onerror = function() {
   if (img.finish) { return; }
   img.finish = true;
   onError(src);
  };
  img.onload  = function() {
   img.finish = true;
   if (opera && !img.complete) {
    onError(src);
    return;
   }
   onLoad(src, img.width, img.height);
  };
  img.src = src;
  if (!img.finish && timeout) {
   setTimeout(function() {
    if (img.finish) { return; }
    if (img.complete) {
     img.finish = true;
     if (img.width) { return; }
     onError(src);
     return;
    }
    if ((tick += delay) > timeout) {
     img.finish = true;
     onError(src);
     return;
    }
    setTimeout(arguments.callee, delay);
   }, 0);
  }
 }

あと、ついでにウィンドウ・ページの表示領域のサイズを取得する関数 get_page_sizes() と、表示領域の左上の x,y 座標を取得する関数 get_page_scroll() も以下のように修正しました。

修正前

var d = document;

// get page sizes
var get_page_sizes = function(){
var xScroll,yScroll, windowWidth, windowHeight, pageHeight, pageWidth;
xScroll = (d.documentElement && d.documentElement.scrollWidth) ? d.documentElement.scrollWidth : d.body.scrollWidth;
yScroll = (d.documentElement && d.documentElement.scrollHeight) ? d.documentElement.scrollHeight : d.body.scrollHeight;
if (d.compatMode && d.compatMode !== "BackCompat") {
windowWidth = d.documentElement.clientWidth;
windowHeight = d.documentElement.clientHeight;
} else {
windowWidth = d.body.clientWidth;
windowHeight = d.body.clientHeight;
}
pageWidth = (xScroll < windowWidth ? xScroll : windowWidth); pageHeight = (yScroll < windowHeight ? windowHeight : yScroll); return new Array(pageWidth, pageHeight, windowWidth, windowHeight); }; // get page scroll var get_page_scroll = function(){ var x = (d.documentElement && d.documentElement.scrollLeft) ? d.documentElement.scrollLeft : d.body.scrollLeft; var y = (d.documentElement && d.documentElement.scrollTop) ? d.documentElement.scrollTop : d.body.scrollTop; return new Array(x, y); };[/javascript] 修正後

var d = document;
var e = document.documentElement, b = document.body;

// get page sizes
var get_page_sizes = function(){
var back_compat = (d.compatMode && d.compatMode !== "BackCompat");
var pageWidth = (e && e.scrollWidth ? e : b).scrollWidth;
var pageHeight = (e && e.scrollHeight ? e : b).scrollHeight;
var windowWidth = (back_compat ? b : e).clientWidth;
var windowHeight = (back_compat ? b : e).clientHeight;
pageWidth = (pageWidth < windowWidth ? pageWidth : windowWidth); pageHeight = (pageHeight < windowHeight ? windowHeight : pageHeight); return new Array(pageWidth, pageHeight, windowWidth, windowHeight); }; // get page scroll var get_page_scroll = function(){ var x = (e && e.scrollLeft ? e : b).scrollLeft; var y = (e && e.scrollTop ? e : b).scrollTop; return new Array(x, y); };[/javascript] やってることは変わりませんが、三項演算子をうまいこと使ってスッキリ書けましたね。満足

「WP-lightpop Ver.0.7.1 リリース」への17件のフィードバック

しむ 2011年11月15日 4:39 AM

プラグイン使わせていただいてます。
iPhoneで動作確認したところ、表示位置が画面中央になりません。
アップロードはしばらく行わないとの事ですので
解決法をご教授頂けると嬉しいです。

返信 ↓
まっく 2011年1月12日 12:10 AM

たびたびで済みません。
前述のように自前のサーバでflvの動画を表示しているのですが、サムネイル(ハメ込み画像)が表示できずに悩んでいます。
同梱のmediaplayerやVideoPop+でもやってみたのですが、LightPopにするとサムネイルが表示できません。
オートプレイだと始まりはあまり気にならないのですが終了したときが寂しいです。
タグの記述が足りないのか、私の使い方に問題があるのでしょうか。お教えいただけますと助かります。

返信 ↓
まっく 2010年11月29日 11:37 PM

はじめまして。すばらしいプラグインありがとうございます。使い始めて間もないので、まだ理解が不十分かと思います。Prev, Nextボタンもマウスを持っていくと表示されるのだとしばらく気づきませんでした。3つほどご教示いただけますでしょうか。
1. 洗練されているとは思いますが、私のような閲覧者もいるでしょうから下方(タイトルとcloseの間)にでもPrev, Nextボタンを表示しておく
2. タイトルからオリジナルへのリンクですが、画像の場合は新たなタブ(target=_blank)で開く
3. 動画(flv)でタイトルをクリックするとdownloadになるので、動画の場合はリンクをつけない

WordPress3.01, JW player plugin1.3.2, 自前のサーバで動かしています。お願いいたします。

返信 ↓
1. をかもと 投稿作成者2010年12月8日 11:36 PM
  
  まっくさん、はじめまして。
  ご意見どうもです、次回バージョンアップのときに検討させてもらいますが、３以外はオプションでの提供になるかなぁ。
  
  返信 ↓
りゅう・д・ 2010年11月18日 4:59 PM

YouTubeの埋め込みコードの場合、オプションにhd=1やfmt=37を指定しても1080pにはなりませんね。
これは以前からのことでYouTube側の問題だと思いますが。

jquery.lightpop-0.8.5.1.jsを色々いじってYouTube公式の貼り付けコードに変えてみたり、fmt周りの
コードを修正(その後YUI Compressorでmin.jsを生成)したりもしてみましたが、やはりダメのようです。

なんとかうまくやる方法はないもんですかね(；・∀・)

返信 ↓
1. をかもと 投稿作成者2010年12月8日 11:33 PM
  
  りゅう・д・さん、はじめまして。
  
  YouTubeの埋め込みコードの場合、オプションにhd=1やfmt=37を指定しても1080pにはなりませんね。
  これは以前からのことでYouTube側の問題だと思いますが。
  
  次回バージョンアップのときに検討してみますね。
  
  返信 ↓
かっきー 2010年8月27日 11:21 AM

をかもと　さんへ

はじめまして、かっきーです。
こちらのプラグインを使いたいと思っているのですが、
Veohに対応する予定はございませんでしょうか？

もしその予定があれば、うれしい！！とおもいまして。

返信 ↓
1. をかもと 投稿作成者2010年8月30日 7:23 PM
  
  かっきーさん、はじめまして。
  
  こちらのプラグインを使いたいと思っているのですが、
  Veohに対応する予定はございませんでしょうか？
  
  Veoh ですね、時間のあるときに対応したいと思います。
  気長にお待ちください。
  
  返信 ↓
しょーた 2010年5月21日 11:15 AM

特定ファイルのエフェクト適用除外はできますでしょうか？

具体的には同じフォルダにjpg、PDFをアップし
relやclassを使用せずjpgをLightPopにて表示させて、
PDFはLightPopで表示させないようにしたいと思っています。

返信 ↓
1. をかもと 投稿作成者2010年6月8日 2:57 PM
  
  特定ファイルのエフェクト適用除外はできませんが、特定ファイルのみエフェクト適用指定はできます。
  
  WP-lightpop 設定画面の「対象のXHTML要素」という項目がデフォルトでは
  a[href^=http://www.example.com/wp-content/uploads/]
  のようになっているかと思います。
  
  jpg 、gif ファイルにのみ適用させるのでしたら、これを
  a[href*=".jpg"], a[href*=".gif"]
  のように変更してください。
  
  返信 ↓
  1. しょーた 2010年6月8日 4:39 PM
    
    動作確認しましたがバッチリです！
    ありがとうございました。
    
    返信 ↓
もこちち 2009年7月18日 12:07 PM

はじめまして。もこちちと申します。
wp-lightpop.0.8.0 を WordPress 2.7.1 に設置し、VideoPop+の動画（flv）を表示させようとしましたが、
lightbox は表示されるものの、FlvPlayer が表示されません。
原因を調べてたころ、詳細設定の FLV player のパスが
http://ドメイン名/ディレクトリ名/wp-content/plugins/wp-lightpop/mediaplayer.swf
となっているのに、実際の mediaplayer.swf のパスは
wp-content/plugins/wp-lightpop/swf/mediaplayer.swf
であることに気づきました。
そこで、詳細設定のFLV player のパスを書き換えたところ、無事 FlvPlayer が表示されました。
一応、ご報告させていただきます。

返信 ↓
1. をかもと 投稿作成者2009年7月18日 8:10 PM
  
  もこちちさん、はじめまして。
  
  およ、デフォルト値設定時のバグっぽいですね。報告ありがとうございました。 m(_ _)m
  後で時間のある時に修正します。
  
  返信 ↓
をかもと 投稿作成者2008年12月5日 3:17 PM

きめらそ。さん、どもです。

無事、解決したようでよかったです。
前から FAQ を用意しようと思ってたので、良い機会でした。

返信 ↓
きめらそ。 2008年12月5日 3:09 PM

をかもと様

ありがとうございます、をかもと様の指示通り、「<?php wp_footer(); ?>」の記述を足し、Lightpopを再インストールしたところ、問題なく動作いたしました。
使用していたテーマが自作の簡単な記述のものだったので、フッターに「<?php wp_footer(); ?>」が入っておりませんでした(ヘッダーは、デフォルトテーマからコピペした時に入っておりました)。

この度は、突然のコメントにも、ご丁寧に対応していただき、ありがとうございました。
Lightpopの動作、大変満足しております。

返信 ↓
をかもと 投稿作成者2008年12月5日 2:53 PM

きめらそ。さん、はじめまして。

お使いのテーマに起因する問題かもしれません。
WP-lightpop の FAQ を書いて JSeries に掲載したので、参考にしてみてください。
http://wppluginsj.sourceforge.jp/wp-lightpop/wp-lightpop-faq/

それでも解決しない場合は、使用されているサイトとテーマ名・テーマの入手先を連絡くだされば、対応できるかもしれません。

返信 ↓
きめらそ。 2008年12月5日 1:24 PM

コメント失礼します。
WordPressにて、動画をサイト自体を重くせずに、スマートに貼り付けられる方法を探していて、Lightpopに辿り着きました。

現在、WordPress 2.6.3環境下にて、Lightpopの導入を考えておりまが、Lightpopが全く動作してくれず、困っております。
やりたいことは、LightpopとVideopopを連携させ、リンクをクリックしてアップロードした動画をポップアップ再生させることです。
環境は以下の通りです。

WordPress：2.6.3
サーバー：CPIレンタルサーバー
mySQL：4.0.24
PHP：5.2.4
検証環境：IE7, FireFox(両Win)

上記環境下にて、Lightpopをインストールすると、Youtubeへリンクを貼ってもlightpopが起動しません(フツウにYoutubeに遷移します)。
また、videopopと連携させようとすると、動画ファイルのダウンロードが始まってしまいます。
Videopopに関しては、インライン動作は問題なく動作しておりますが、ポップアップの場合、”現在のタブを空白にして”ビデオが表示される状態です。

ちなみに、他のサーバーで動作させているWordPress(mySQL:5.0.67, PHP:5.2.6)では、ただYoutubeにリンクを貼るだけでLightpopが立ち上がりますので、Lightpopの設定や使い方が間違っているワケではなさそうです。

このCPIというサーバーが、少々クセモノのサーバーで、文字コードがJISでしか行けないため、.htaccessとPHP.iniをいじって無理矢理UTF-8表示にしております。
.htaccessは、
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
AddHandler x-httpd-php524 .php
suPHP_ConfigPath /サーバーディレクトリ/
# BEGIN WordPress

# END WordPress
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
PHP.iniは、文字コード部分をUTF-8に書き換えたものを使用しております。

情報が少なくて申し訳ありませんが、何か解決策があれば、ご教示願えますでしょうか。

返信 ↓