D-log

クイックカートはフラッシュで作られているのでlightboxと併用すると
フラッシュが優先的に表示されてしまいます。
以前フラッシュよりlightboxを優先させる方法をご紹介しましたが今回はMT用のクイックカートプラグインのフラッシュ部分のソース変更方法をご紹介します。

ファイルの場所は
cgi/mt/mt-static/plugins/QuickPlugins/QuickCart/quickcart.js

カートの表示をライトボックスより後ろに表示させる

document.write('<param name="movie" value="'+quickcart_url+'quickcart.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="'+quickcart_url+'quickcart.swf" quality="high" bgcolor="#ffffff" flashvars="DATA='+escape(location.href)+'&amp;PROTOCOL='+location.protocol+'&amp;HOST='+location.hostname+'&amp;PATH='+cgipath+'" width="200" height="520" name="quickcart" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="'+location.protocol+'://www.macromedia.com/go/getflashplayer" />');

↓↓↓↓↓

document.write('<param name="movie" value="'+quickcart_url+'quickcart.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" /><embed wmode="transparent" src="'+quickcart_url+'quickcart.swf" quality="high" bgcolor="#ffffff" flashvars="DATA='+escape(location.href)+'&amp;PROTOCOL='+location.protocol+'&amp;HOST='+location.hostname+'&amp;PATH='+cgipath+'" width="200" height="520" name="quickcart" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="'+location.protocol+'://www.macromedia.com/go/getflashplayer" />');


ボタンもフラッシュで作られているので修正

document.write('<param name="movie" value="'+quickcart_url+'quickorder.swf" /><param name="quality" value="high" /><param name="bgcolor" value="'+(bg_color?bg_color:'#ffffff')+'" /><embed src="'+quickcart_url+'quickorder.swf" quality="high" bgcolor="'+(bg_color?bg_color:'#ffffff')+'" flashvars="DATA='+item_url+','+name+','+(postage?price+'('+postage+')':price)+',1,'+stock+','+(btn_color?'0x'+btn_color.substr(1):'')+','+(bg_color?'0x'+bg_color.substr(1):'')+'" width="100" height="25" name="quickorder" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="'+location.protocol+'://www.macromedia.com/go/getflashplayer" />');

↓↓↓↓↓

document.write('<param name="movie" value="'+quickcart_url+'quickorder.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="'+(bg_color?bg_color:'#ffffff')+'" /><embed wmode="transparent" src="'+quickcart_url+'quickorder.swf" quality="high" bgcolor="'+(bg_color?bg_color:'#ffffff')+'" flashvars="DATA='+item_url+','+name+','+(postage?price+'('+postage+')':price)+',1,'+stock+','+(btn_color?'0x'+btn_color.substr(1):'')+','+(bg_color?'0x'+bg_color.substr(1):'')+'" width="100" height="25" name="quickorder" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="'+location.protocol+'://www.macromedia.com/go/getflashplayer" />');

要は
<param name="wmode" value="transparent" />
の追加と
src部分にwmode="transparent"を追加しただけです。

lightbox2.0を入れました。
最初は立ち上げるとトップのフラッシュ:flashが優先して表示されてしまっていろいろ調べ
やっと解決できまいした。

lightboxを提供してくれている場所

http://www.huddletogether.com/projects/lightbox2/ 

インストール♪ 

ファイルをダウンロードして普通のサイトならイメージ画像、lightbox.css、と４つくらいのjavaファイルをアップロードし、連携させて終了だけど今回はMTなのでで相対パスでスクリプトやcssのリンクを関連付けしてしまうとリンク切れが発生・・・　ここは絶対パスで対応。

もしかしたらMTにすでにプラグインがあったりして。。anyway

修正が必要な箇所

lightbox.js

60行目のConfiguration

var fileLoadingImage = "http://hogehoge.com/images/loading.gif";
var fileBottomNavCloseImage = "hogehoge.com/images/closelabel.gif";

 lightbox.css

 47行目～54行目

    height: 100%;
    background: transparent url(http://d-skate.xsrv.jp/img/images/blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
    }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://hogehoge.com/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://hogehoge.com/images/nextlabel.gif) right 15% no-repeat; }

done 

これで各テンプレート、又は、htmlに関連ずけてあげればOK!

ちなみに 

フラッシュを載せた時の例をご紹介します。

ブラウザのせいなのかなぜかはわかりませんがlightboxを使うとflashが優先的に手前に表示されてしまいます。

ここでオブジェクト要素がhtml上にある場合

<object>
<param name="…" value="…" />
<param name="…" value="…" />
<param name="wmode" value="transparent">
<embed src="…" wmode="transparent" />
</object>

pramのvalueに"transparent"（透明）
といれてあげてればflashよりlightboxの方が優先的に表示されます。

僕はjavascriptでフラッシュを読み出すようにしているので同様にjavascriptに記述するだけでした。

楽しいね！下記に参考サイトを載せます。
沢山の知識人の人！ありがとう

続きを読む "Lightbox in Movable Type" »