WordPressのプラグインLightbox Galleryのカスタマイズ ー 楽天モーションウィジット(FLASH)の表示のための調整

楽天モーションウィジットをブログに表示させたところ、Lightbox Galleryの表示のときにFLASHの表示が前面に出てきてしまう不具合が発生。下記のようなサムネイルからLightboxを使って写真の表示をしたとき。

Mac環境では比較的大丈夫だったのですがWindows環境では、IE、Firefox、Chromeで背景を突き破って表に出てきます。

調べて見ると外部JavaScript経由でFLASHを表示しているのが原因の様子。外部JavaScriptを一度ダウンロードして、FLASH表示のための記述にいくつかパラメーターを足す方法があったのでやってみたのですが解決されない。。。

で、さらに調べているとLightboxのJSでFLASHの表示、非表示をさせることでコントロールする、という方法があることがわかりました。

参考にしたのはこちら

「Lightbox JS v2.0 と Flash」
http://web-conte.com/blue/200610/23_1952.php

Lightboxを表示するときに、同時にFLASHを含んだ「div」要素を消し、
Lightboxを消すときに、同時にFLASHを含んだ「div」要素の表示を戻す、という記述を加えればよい、とのこと。

ここでは楽天モーションウィジットなので、div要素を「id=”rakuten”」とする。

そこでプラグインのJSを確認してみる。

/wp-content/plugins/lightbox-gallery/lightbox-gallery.js

しかし、「jQuery」云々とあり、該当するスクリプトが見当たらない。
さらにディレクトリをあたってみると下記があったのでのぞいてみる。

/wp-content/plugins/lightbox-gallery/js/jquery.lightbox.js

どうやらこのスクリプトでLightboxを制御しているようだ。
と処理を追っていくと、該当するfunctionがあったので変更する。

Lightboxを表示するときに、ウィジットを含む「div id=”rakuten”」を消す記述を加える。

// 192行目あたり
function _set_image_to_view() { // show the loading

の中に

document.getElementById(“rakuten”).style.visibility = “hidden”;

を追加する。
Lightboxを消すときに、ウィジットを含む「div id=”rakuten”」表示する記述を加える。

// 401行目あたり
function _finish() {

の中に

document.getElementById(“rakuten”).style.visibility = “visible”;

を記述する。

でブラウザで確認してみると、たしかにLightboxの表示のときには下層のFLASHが消えて、Lightbox非表示のときにはFLASHが戻る。前面に突き破って出てくる見苦しさは無事に解決。

Lightboxの表示スピードが調整できることがわかったので、やや速いに調整する。
何度も確認をしていると、もうちょっと速いほうがいいな、と。

// 37行目あたり デフォルトは400
containerResizeSpeed: 250

と、ここで透過の背景が消えかけているときに、FLASHが前面にせり出てくることに気づく。
切り替えているような感じ。でも透過の背景はゆっくりと消えるので、FLASHがそこにせり出てくる(笑)。

写真を見ているときには支障がないのだけど、優雅なLightboxの動きを損ないたくない。

ちょっとこれをなんとかできないものか、としばし考える。

時間差をつけてこのFLASHの表示を戻すことはできないだろうか。

setTimeout()を使って、一呼吸待ってからFLASHの表示を戻してみよう。
さきほどのLightboxを消すときに加えた記述を下記に変更。

var r = “document.getElementById(‘rakuten’).style.visibility = ‘visible'”;
setTimeout( r, 350 );

と動作を確認。一呼吸おいてからFLASHの表示が戻ってくる。
何度かタイミングを確認してみて、好みのタイミングに調整する。

Lightboxが消えてから、ウィジットを戻すのがいいみたい。
350ミリ秒に落ち着く。

ということで一件落着。

<10月10日 追記>
function _finish()  の中に、

$(‘embed, object, select’).css({ ‘visibility’ : ‘visible’ });

の記述があるので、直接htmlにFLASHの記述があるときにはこの不具合は起こらないように調整されていることがわかります。外部参照で記述しているときには調整が必要なだけですね。時間差の記述はないので、気になる人は時間差をsetTimeout()で加えるといいかも知れません。

<2011年9月23日 追記>

バージョン 0.6.5にupdateしたら消えてしまったので、見直しました。
記述は下記に変更しています。jQueryの記述方式に合わせないと動作しないようです。

//192行目あたり、の記述
$(‘#rakuten,#rakuten2’).css({ ‘visibility’ : ‘hidden’ });

// 401行目あたり
r=”$(‘#rakuten,#rakuten2’).css({ ‘visibility’ : ‘hidden’ }).fadeIn(function() { $(‘#rakuten,#rakuten2’).css({ ‘visibility’ : ‘visible’ }); });”
setTimeout( r, 450 );