POPSブログ

jQuery pops-ibox用パネルの特性とフエードの対処

147

  Category:  jquery2012/09/16 pops 

角丸陰影画像を外周に配置し伸縮する新しいパネル構造を利用してpops-iboxを制作した。パネルの特性とフエードの対処について調べてみた。


jQuery pops-ibox用パネルの特性とフエードの対処

CSS3の世の中で、何で「角丸陰影画像」か?。全てCSS3で作れる訳でもないし、私のような「低性能マシン」の環境ではCSS3なんか動きはしない!。
「IE6非対応」にしたことにより新しい構造にすることが出来たが、以前と変わらずPNG32画像を外周に配置伸縮するため、IEでバグが出ない訳がない。
パネル全体をフエードすれば案の定IE7でバグの連続である。それに対処するために取った処置である。(IE7も除外すれば簡単になるが、一応ここでは対応することで処理する)


パネル構造

余計なところを削除すれば、以下のような構造になる。部材をpositionの「始点」「終点」で指定して配置したものであるから、陰影の重なりバグは出ない。問題は画像との重なりで透過部分が出来たりすることである。


HTML構造 (簡略)


<div id="pops-ibox">
	<div class="tl"></div>
	<div class="tr"></div>
	<div class="bl"></div>
	<div class="br"></div>
	<div id="panel-back"></div>
	<div class="tm"></div>
	<div class="bm"></div>
	<div class="ml"></div>
	<div class="mr"></div>
	<div id="center-box"><div id="imgwrap"><img /></div></div>
</div>

#pops-ibox は全体のブロック。外周に陰影画像を配置。#panel-back は中央の背景である。
#center-box は画像ブロック、大きさ位置を変えられるように最後に配置した。
#imgwrap は IE7 対策に追加した(bottom配置)。その中に img がある。縦横100%であるから常に#center-boxの大きさになる。
#panel-backに画像 img を挿入可能であるが、上下左右の間隔が固定される。


CSS


/* パネル中央部分 */
#pops-ibox #panel-back {
	position:absolute;
	top:20px;bottom:20px;
	left:20px;right:20px;
	width: auto;
	height: auto;
	background-color:#FFFFFF;
}

/* 画像パネル */
#pops-ibox #center-box {
	position:absolute;
	top:20px;bottom:20px;
	left:10px;right:10px;
	width: auto;
	height: auto;
	/*margin-bottom:20px;*/
	background: transparent url("/main/images/panel_black.png") repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/main/images/panel_white.png',sizingMethod='scale');
	overflow:hidden;
}
/* IE7 heightが伸びない HACK修正*/
#pops-ibox #center-box #imgwrap {
	*position:absolute;
	*left:0;
	*bottom:0;
	width: auto;
	height: 100%;
	background-color:#000000;
}
#imgwrap img {
	width: 100%;
	height: 100%;
	vertical-align:bottom;
	border-style:none;
}

/* パネル上層部分 */
#pops-ibox #panel-topbox {
	display:block;
	position:absolute;
	top:0;left:0;
	width:100%;
	height:100%;
	background-color:none;
	overflow:hidden;
}

パネル全体を伸縮させれば画像も伴って伸縮する構造である。IE7でばらつきがあるので(親のブロックが、height:auto;なので旨く高さが取れないのだろう) #imgwrap の position:absolute をbottom にして解決した。これは他のページでも言及している。
これで透過(Fade処理)を伴わないものは全て問題なく動作する仕組みである。問題はパネル全体をFade処理した場合である。(面倒な予感がする)


Fade処理すると問題がでる

説明図


1. IEの場合、Fade処理を行うとPNG32陰影画像が黒くなり汚くなるので、AlphaImageLoaderフィルター処理をして背景を削除する。これでキレイになる。但しIEで、この画像に他の画像を重ねた時、アルファフィルター処理した時など「バグ」が出易い。
2. 画像幅をかえて、PNG32陰影画像部分と重なると、IE7で画像が重なる部分が透過して仕舞い壊れてしまう。(#center-boxの横幅をひろげている)
3. 通常は全体にopacity=1の処理をすると直ることが多かったが今回はそれで直らない。試行錯誤の上に#center-boxに黒アルファチャンネル画像(PNG32)を背景に配置してAlphaImageLoaderフィルター処理をしたら直った(白でもよいが見えなくなる)。面倒である。ここでこのような処理をしているから、他にも影響があるはずである。
4. パネル全体をFade処理してみたら、画像が無くなった。手品か、魔法か夜逃げか?、やはりIE様である。
5. #center-boxを事前にopacity=1処理してから、パネル全体をFade処理したらOKであった。
6. このため、画像によっては白い点がでるので、全体をFade処理の後にフィルターを除去した。
7. その他。画像の在るブロック内部に黒のレーヤーを入れたら高さが決まらない。コケタ。しょうがないので背景に透過GIF画像を配置し高さを確保した。(内部コントロール部分)


Fade処理を行うと何がおきるか想像も付かない、構造が違うとまた症状が違うので臨機応変に対処しなければならない。つまりは非常識な方法も試さなくてはならない。ああ面倒だ!

一応、IE7にも対処したが、IE7も除外したほうが手間隙がかからない。IEのない「平和な世の中」が来ることをみんなでお祈りしましょう。


JSでの処理


//新IE判定
var browserIE = 0;//IE判定
var browser_v = 0;//IE 6 7 8 9
if (/*@cc_on!@*/false) {
	browserIE = 1;
	if (navigator.userAgent.match(/MSIE (\d\.\d+)/)) {browser_v = parseFloat(RegExp.$1);}
}

var centerbox=$('#center-box');

//IE7対策/画像フエードが効かなくなるのでopacity=1を事前に処理
//画像パネルfilter処理でopacityがこわれている、処理でIE7画像白点でる
if(browser_v == 7) {
	centerbox.css({'opacity':1});
}

//IE7対策事前にfilter処理したためIE7フエードで画像白点でる除去
if(browser_v == 7) {
	centerbox.css({'filter':'none'});
}

この際バラスが、前のパネルは1年半かかった、今回は半日でかたずいた。画像専門にあれこれやっているとなんとなくバグの対処が早くなる。(クロスブラウザは地獄だ、アタマがバグる)
フィルター除去だけでは直らんゼヨ。
Google Chromeを導入されている方も多数であるしIEのこのような手間隙を考慮しますと、IEに対応しなくてはならない理由がありません。作業上、大変効率的であることは言うまでも有りません。


【参考】当方の記事: 特集記事 iBoxページ


簡単ですが以上です。


[ この記事のURL ]


タグ:jquery , LightBox , memo

 

ブログ記事一覧

年別アーカイブ一覧



[1]