Highslide JS 導入

IE7のリリースでメジャーなブラウザのすべてがタブ機能を持つことになりました。
使用者の設定次第ですが、これによりサイズ指定でオープンされるポップアップウィンドウのサイズが無視されることが出てきます。
演出のためにポップアップウィンドウを利用している場合は致命的ですね。

ということで、BLOGでHighslide JSを導入しました。
設置方法などはgoogle先生に教えてもらってください。
またはこちら

こいつは、select要素やiframe要素が前面に出てきてしまう問題にも対応していて拡大後のサイズに重なる部分に上記要素がある場合はそれを一時的に非表示にしています。
ただし、ちょいと詰めが甘く、拡大後のレイヤーの移動時に再描画されなかったりするのでそのあたり自分で修正。

また、上記2つの要素と同様にFlashも前面に出てしまいます。
こいつの対処方法は2つ。
ひとつは、wmodeをtransparentに設定する。
これでIE、Firefox、Safari(ちょっと微妙に変だけど)で正常に表示されます。
ただし、この指定は問題もあって、Flashにテキスト入力エリアがある場合に日本語入力ができなくなる問題がWinで発生します。
ここのBLOGなんかの場合だと、上のメニューなんかはこの指定で簡単解決ですが、
検索機能を持つサイドバーのAmashに問題が出ます。

そこで2つ目の対処方法。
まず、Amashの場合<div id="amash"></div>でFlashを囲います。
次にhighslide.jsにselect表示を切り替えている箇所が3箇所あります。
このあたりに

document.getElementById('amash').style.visibility = "hidden";

または、

document.getElementById('amash').style.visibility = "visible";

を加えてやれば、Amashの表示が切り替わります。

自分の場合は、selectの処理をしているhs.showHideElementsを参考に特定のidのものの表示を切り替える関数を作ってそれで処理しています。


ついでに、MTのファイルアップロードでポップアップを選択した場合にHighslide JS用のタグを書き出すようにmt/lib/MT/AppのCMS.pmを書き換えて、終了。
CMS.pmのカスタマイズ方法などはこちらが参考になるかと。
(自分とは少しカスタマイズ方法が違いますが)

トラックバック(0)

このブログ記事に対するトラックバックURL: http://eternitydesign.net/mt/mt-tb.cgi/89

コメントフォーム

AUTHOR

名古屋でひっそりと活動中。
ホームページ制作、Flashコンテンツ制作など制作依頼がありましたらお気軽にご連絡ください。
ご希望の方には制作実績も同時にお伝えいたします。

TAG CLOUD