Moral Hazard!!

ドラマーが音楽やホームページやガラクタを作るよ。

WP-Cycleで透過画像をフェードさせたいのにIE8以下では透過出来てない件を解決する

No Comment wordpress,

とても便利なスライダープラグインWP-Cycleですが、IE8以下ではpng画像が透過しません。(ver.0.1.13現在)

■解決策■

外人さんが頑張ってくれてます。

こちらで、
「wp-cycle.phpの438から446行を書き換えればいいのさHAHA」
と書かれてます。
具体的には以下。

jQuery(document).ready(function($) {
$("#<?php echo $wp_cycle_settings['div']; ?>").cycle({
fx: '<?php echo $wp_cycle_settings['effect']; ?>',
timeout: <?php echo ($wp_cycle_settings['delay'] * 1000); ?>,
speed: <?php echo ($wp_cycle_settings['duration'] * 1000); ?>,
pause: 1,
fit: 1
});
});

を、

jQuery(document).ready(function($) {
$("#<?php echo $wp_cycle_settings['div']; ?>").cycle({
fx: '<?php echo $wp_cycle_settings['effect']; ?>',
timeout: <?php echo ($wp_cycle_settings['delay'] * 1000); ?>,
speed: <?php echo ($wp_cycle_settings['duration'] * 1000); ?>,
cleartypeNoBg: true
});
});

に書き換え。具体的には最後の2項目「pause: 1,fit: 1」を「cleartypeNoBg: true」に置き換えたらOK。

※最終Updateが去年の8月だけど、もしアップデートしたらこの部分を再度修正しないといけない。

これで背景は透過したかに見えたんだけど、今度はフェードの時に透過画像の縁にへんな黒いノイズがのってしまう。

なので今度はVIVID Labs.さんから知恵を拝借、IE用のフィルタ・AlphaImageLoaderを使用して回避する。

<!--[if lte IE 8 ]>
<script language="javascript">
jQuery(function() {
if(navigator.userAgent.indexOf("MSIE") != -1) {
jQuery('img').each(function() {
if(jQuery(this).attr('src').indexOf('.png') != -1) {
jQuery(this).css({
'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' +
jQuery(this).attr('src') +
'", sizingMethod="scale");'
});
}
});
}
});
</script>
<![endif]-->

WP-Cycleのタグ直後にでも、「IE8以下だったらこのフィルタをpng画像に適用する」と指定。
wordpressなので$をjQueryに変更しています。

これでIEでも(多少ジャギるけど)透過でフェード表示させることが出来ました。