POPS WEB KOUBOU

POPS-iBOX B2-B ( PAGER Opacity )

 

前のページ戻る

 

POPS-iBOX B2-B. PAGERタイプ (pops-ibox-b2-b.js) カスタムアニメopacity処理 サンプル

---

■ このスクリプトは pops-ibox-b2 を改造し、カスタムアニメopacity処理に変更したものである。( pops-ibox-b2-b )、opacity処理の性質上、動作は重くなります。
■ カスタムアニメopacity処理は環境の悪い場合に、重いのでそれなりの工夫をしています。後述の「スクリプトの改造などの資料」を参考にされたし。

★環境の悪い場合とは６-８年前あるいは以上のマシン環境であり、ある程度は快適に見られる場合を「良し、普通」、この環境で動作が重い場合を「重い、遅い」と表現しています。今時の高級マシンを基準にはしていません。
★サンプルデモなどはなるべく、ＨＴＭＬ、ＣＳＳの多い実際的なところで行っています。閲覧するマシン性能などそれらを考慮して判断ください。

 

 

POPS-iBOX B2-B opacity処理タイプ DOWNLOAD
[ pops-ibox-b2-b.zip ] ( 資料を含むサンプル一式 )
JS (pops-ibox-b2-b.js) 21KB / ZIP 832KB

 

■ POPS-iBOX B2-B 画像横幅を広げたタイプ

★jQuery-1.3.2以上が必要です。jquery.comより最新のものを DOWNLOAD ください。

このサンプル zip には サンプル動作のため、jquery-1.4.2.min.js が内包されています。

http://jquery.com/

 

注意、POPS-iBOX B2-B (pops-ibox-b2-b.js) は、「グループ」の設定はしておりません。
・動作を軽くするため、下部画像、陰影部分(allmask層)だけをopacity処理しています。伴いスクリプト処理が増えています。
・標準では、opacity処理(カスタムアニメopacity処理、fadeIn、fadeOut、fadeTo)などを行える構造に統一されています。
・IE8での階層認識が甘いので、z-indexを新たに割り振ったCSS構造になっています。
・IEの特殊な事情に合わせるため、色々な処理、工夫をしていますので、煩雑です。前もってご理解ください。
・このカスタムアニメopacity処理は、特殊なものですので、スクリプト処理がふえています。好みも分かれるものです。

 

POPS-iBOX B2-B PAGER Opacity処理伸縮タイプ、サンプル DEMO

★ サムネール画像を CLICK して下さい、POPUP拡大します。画像その他を、押すことにより消去します。

---

約25%の大きさのサムネールJPG画像を使用、奇数値にならないように作成しています。

画像1

画像2

画像3

画像4

画像5

サムネールなしリンク 画像1 100x80

---

 

※ パネル拡大表示中でも、他のサムネールをクリック可能です。
※ 完全に表示してから、または、完全に消えてから、次の画像を選定してください。
※ 「離れた場所に画像をおく」。このページ中間にサムネールがあります。離れた位置にあってもPAGERに設定表示されます。

PAGER

PAGERの番号 HOVER でサムネール画像を表示しますので、見たい画像だけ拡大することができます。

[ PAGER動作図 ]

1. ページ内、クラス設定されているもの全てが対象です。
2. サムネールのあるものは、PAGERの側に表示します。
3. 現在表示中のPAGER番号の色を変えます。現在位置がわかります。
4. PAGER選定画像の大きさに変化してクロスフェードします。画像の大きさでの変化が面白い。
5. 終了動作で現在表示中のサムネールに帰ります。

注意、PAGERの範囲外のクリックで「終了処理」に行かないように、上部テキストエリアにダミーの click action (何もしない) が設定されています

スクリプトの特徴

1. 画像拡大専用です。
2. 透過PNG画像を外周に配置したBOXがスムーツに伸縮します。
3. カスタムアニメopacity処理をしています。
4. 環境の良くない場所、スペックの良くないマシンでもスムーツに伸縮します。
5. 透過PNG画像を外周に配置したため擬似立体的です。
6. 今までない BOX 構造です。
7. サムネールが拡大して、LOADされた本画像とクロスフェードします。
8. サムネールが無くともＯＫです。(PAGER 付のため、サムネールがあるほうが便利)
9. 反面、解決出来ない IE のバグ(仕様)をも含みます。ほとんど気にならない範囲と思います。
10. PAGER 付属。画像選定が楽である。

対応ブラウザ(検証済みブラウザ)

・対応ブラウザ、IE6+ Safari(4.0.4) Firefox(3.5.5) Chrome(5.0.375.99) Opera(10.53)

DOWNLOAD ZIP に含まれる内容

1. jquery-1.4.2.min.js が内包されています。
2. 該当の、pops-ibox などの JS CSS 一式。
3. 該当の、サンプル画像 透過陰影画像など、一式。
4. サンプルＤＥＭＯ html。
5. ＪＳに説明のはいったテキスト。参考にしてください。

【重要】、jQuery以外、全てJISのテキストですので、使用環境に応じて適切に書き換えてください。

設置方法

1. jQuery1.3.2以上が必要です。
2. 専用 js css の読み込み。
3. 画像サムネール aリンク要素に、クラスを設定 class="pops_ibox" を記入する。
4. 必要であれば、IE8用修正画像の読み込み。
5. jsの変更(centerImage画像のパス)。
6. js css 共、他のjQueryのプラグインの設定と同様です。

以下、詳細を記します。

POPS-iBOX b2 と構造など同じです、アニメのエフェクトの種類が違うので、スクリプトが若干違うだけで、設定は同じです。

[ 1 ] CSS 読み込み設定

★次のようににHTML head に記入して読み出す。(jsを下方hooterに設定でも可)
通常は、IE8のバグ(陰影が重なる)を修正するため、IE8用スタイル読み込み(修正画像)を行います。

jQuery動作には、先にＣＳＳを読み込むことが前提となっています。

pops-ibox-b2-b.css pops-ibox-b2-b_ie8.css

<link rel="stylesheet" href="css/pops-ibox-b2-b.css" type="text/css" media="all" />
<!--[if IE 8]>
<link rel="stylesheet" href="css/pops-ibox-b2-b_ie8.css" type="text/css" media="all" />
<![endif]-->

 

IE8、CSSを読み込以外の修正方法もありますが、原則CSS (pops-ibox-b2-b_ie8.css) を読み込ませての画像修正を行ってください。
注意、標準で「IE8専用の修正画像」を使用する設定になっています。動作モードなどに関係なく修正できます。
注意、pops-ibox-b2.cssと違いz-indexが設定されています。必ずpops-ibox-b2-b.cssを使用ください。

★CSSで、IE (IE6.7.8)では透過PNG画像を使用してフィルター処理しています。画像パスを確認ください。

フィルター部分の画像パスを確認、必要であれば変更する。

background: transparent url("../images/r_tl_w6.png") no-repeat;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/r_tl_w6.png',sizingMethod='scale');

・background: transparent urlはＣＳＳからみたパスを設定
・AlphaImageLoader(srcはＨＴＭＬから見たパスを設定
わからない場合は、どちらとも http:// で始まる絶対urlで記入ください。

背景の削除はＪＳ側で行っています。

★CSSで、使用するボタン画像なども所定の画像フォルダに収容して、正確なパスを設定ください。

★お断り、opacity処理をしない POPS-iBOX A2などでは、IE8でフイルターをせず、修正画像をも使わずに済むはずですが、色々簡素化するために統一して全て同じにしています。よって、個人的にアニメ修正(fadeInほか)などそのままで可能になります。

★このPOPS-iBOX B2-Bはopacity処理をしているため、IE8でフイルターをして、ＣＳＳ「修正画像」による修正が必要になります。(動作モード限定ですが 99.99%法による修正方法もあります、下説明[ 9 ]参照)
★個人的に、特性バグなど理解して、より効率の良い手法にするなどの改造は自由です。

[ 2 ] JS 読み込み設定

★jQuery-1.3.2以上が必要です。

jQueryプラグイン動作には、先にjQueryを読み込むことが前提となっています。

pops-ibox-b2-b.js

<script type="text/javascript" src="js/jquery-1.4.2.min.js" /></script>
<script type="text/javascript" src="js/pops-ibox-b2-b.js" /></script>

 

[ 3 ] JS pops_ibox()の実行

★読み込む JS ( pops-ibox-b2-b ) の最後に、pops_ibox()の実行が付随しています。通常は読み込み後、自動的に実行されます。
事情があれば、分離しても結構です。HTML head 部、または、hooter 部以降で実行させます。

★分離して実行。
<script type="text/javascript">
$(function(){
	$(document).pops_ibox();
});
</script>

★分離しないで、hooter 部以降で、
<script type="text/javascript" src="js/pops-ibox-b2-b.js" /></script>
としても、同じことです。

★PAGER 付属の場合サムネールの大きさを取得しますが、ＩＥ以外では、大きさが旨く取得できない場合があります。
このような状況の場合は、hooter 部以降で、pops_ibox()を実行すると大きさが旨く取得できます。
またはhooter 部以降で、ＪＳ(pops-ibox-b2-b.js)を読み込む、これでも同じことです。

・PAGERタイプは、原則、IMG要素にサムネール画像の大きさ width="xxx" height="xxx" を設定記入して使用してください。

資料、[ ＪＳ読み出し位置の変更 ]

 

[ 4 ] 対象画像 a リンク にクラス設定

★必要な画像 a リンク にpops_iboxクラスを与えます。標準ではサムネールのある a 要素。サムネールが無くとも動作します。
一般的なLightBox系の設定方法とほぼ同じです。タイトル、詳細説明など記入できます。
ページ内のpops_iboxクラス設定のものを全て、PAGER、できるようにします。

---------------------------------------------------------------
★HTML側の修正表記

標準ではサムネールのある a要素、サムネールがなくとも可。

・pops_iboxクラスを与える。
・titleプロパティにタイトルを記入。
・captionプロパティに記事を記入。(パネルの大きさを考慮した長さであること)

title.captionが無い場合、文字がない場合は表示されません

★記入例
<a href="photo1/toyota_f1_p011.jpg" class="pops_ibox" title="title1" caption="MEMO/画像1"> </a>

★原則、サムネール画像の大きさを記入。記入なき場合も作動はしますが。サムネール画像を作らず、
直接、画像を縮小して表示使用する場合は、必ず大きさを設定ください。
<img src="photo1/toyota_f1_p011s.jpg" width="200" height="100" />

★サムネール画像が無くとも有効です。サムネール画像が無いリンクには、標準で100x80の大きさが
設定されます。変更可能です。

・PAGERタイプは、原則、IMG要素にサムネール画像の大きさ width="xxx" height="xxx" を設定記入して使用してください。

・サムネール画像の大きさ(width height)は、出来うる限り「偶数」の値にしてください。
・POPS-iBOX B2 (pops-ibox-b2-b.js) は rel="GROUP1"の判定は行っていません。クラス(pops_ibox)を与えた画像全てにアクションを設定します。
・注意、これは、「画像表示専用」ですので画像以外のものにクラスを与えても無意味です。永遠にLOADINGが表示されるだけです。クリックすれば消えます。(拡張子の判定はしていません)

[ 5 ] JSの設定変更

★多少の変更を、ＪＳ側で行うことができます、表にまとめておきます。
重要なパネル伸縮時に使用する画像パスの変更。

---------------------------------------------------------------
★JS側の変更注意
centerImage画像が必要ですので、パスを間違いなく設定してください。

JS 1行目前後に下のようなスクリプトがあります。画像パスを貴方のサイトの画像パスに変更してください。
勿論、貴方のサイトの画像保存フォルダに、center_xxxx.png 画像がなければなりません。3種類あります。

//★PANEL内部伸縮画像URL center_black.png center_white.png center_alpha.png
var centerImage = "images/center_white.png";

基本的にサムネールのない場合に読み込まれます、パネルの拡大に使用されます。
10x10-20x20のpngまたはgif画像です、枠の色とあわせます、白黒以外はcenter_alpha.pngを使用します。
自作の陰影を使用する場合は、枠の色と同じに自作しても結構です。

---------------------------------------------------------------

【重要】このサンプルである、カスタムアニメopacity処理タイプの設置の注意

※ opacity処理しながら画像を伸縮する、「一番処理の重いタイプ」ですので、HTML、CSSの少ない環境での使用が望ましい。
※ 表示完了、または消去完了、してから次のサムネールを押さないと、途中処理が残る場合あり、あまりせわしく操作しないこと。
※ このサンプルは最悪の条件下でＤＥＭＯを行っていますので、表示の速さ、重さなどを判断ください。
※ 軽くなるように陰影部分だけ処理しています。スペックの良くない私のマシンでも大丈夫なので、ほとんど大丈夫とはおもいます。
※ ブラウザにより消え方に特徴、違いがありますが、おおむね良好に処理されています。

 

 

[ 6 ] 陰影の重なりなどの状況図

 

陰影の重なりなどの状況

動作モード状況などにより、同じ場所に、IEで陰影の重なりが発生します。極力出ないように処理していますが。

項目	IE6	IE7	IE8	備考
画像修正で直す	-	-	(修正される結果、無)	CSS読み込み
奇数で重なり	有	(有)	-	IE7は条件により
XHTML1.0	有	無	-	IE6は全てで出る
HTML4.01 strict	有	無	-	標準モード
HTML4.01 strict以外	有	有	-	互換モード
-----	-	-	-	-----

IE6.7で状況により、陰影の重なり(奇数の場合重なる)が出る場合がありますが、適切に修正などほどこしていますのでほとんど見えません。この点ご了承ください。
静止中は出ないように修正されていますので、見えるのはアニメの1瞬間といえます。陰影が狭くうすい場合はわかりません。

1. IE8修正画像をＣＳＳで読み込み補正しますので、モードに関係なく、陰影の重なりはでません。
2.縦横の全体の長さが奇数の場合に陰影の重なりが出る。静止時は出ないようにスクリプトで修正しています。
3.XHTML1.0モードに関係なく、アニメ中、IE6の場合陰影の重なりが出る。
4.HTML4.01モードに関係なく、アニメ中、IE6の場合陰影の重なりが出る。IE7は互換モードの場合陰影の重なりが出る

IE6の場合は防ぐ方法は無い。

推奨する、DOCTYPE、の例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ja">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

但し、アニメ中は見えません。スペックの悪いマシンでアニメ終了直前に出る場合がありますが、ほとんど見えません。

[ 7 ] その他の設定変更

 

JSの変更できる変数の詳細

項目	変数	初期値	変更	備考
1.外枠の要素幅	shadow_W	20	10 (変更しないでください)	左右陰影の幅 10以上
2.外枠の要素高さ	shadow_H	20	20 (変更しないでください)	通常変更しない 10-20
3.上部テキストエリア	topbox_H	20	20 (偶数値)	上部テキスト高さ 10以上
4.下部テキストエリア	bottombox_H	20	20 (偶数値)	下部テキスト高さ 10以上
5.サムネール幅	start_W	100	100 (偶数値)	サムネールなし初期の大きさ
6.サムネール高さ	start_H	80	80 (偶数値)	同上
7.pagerの位置	pager_H_v	18	18	状況に応じ変更する

★通常、上下部テキストエリアの高さの変更だけです。

1.2 shadow_W shadow_H を変更した場合はCSSをも適切に設定しなければなりません。そのまま使用ください。
3.4 上下テキストエリアの高さが 10px 以内の場合はテキストを表示しない設計になっています。

【重要】、3.4 上下テキストエリアの高さを変更した場合は、合計値を必ず「偶数値」にしてください。またはどちらも「偶数値」で設定する。

pops-ibox-b2 (b2-b) 独自の設定
pagerの位置の指定、高さ変更 pager_H_v = 18;

★スクリプトを改造する場合は、自己責任で行ってください。

 

[ 8 ] HTML4.01の場合、または互換モードの場合

 

[ 9 ] ＪＳで99.99%を設定してIE8のバグを修正する方法

★IE8用スタイル読み込み(IE8修正画像)を行わず、ＪＳで99.99%を設定してIE8のバグを修正する方法です。
但し、XHTML1.0、標準モードの場合のみ有効です。標準(通常)では無効になっていますので、下のように有効にします。
(HTML 4.01標準モード でも可能ですが、互換モードで作動しているのが多い)

修正画像を使う場合は下のスクリプトを無効にすればよい。
IE8用スタイル読み込みは必要ない
if (browser_v == 8) {
	//★IE8影の重なりを除去する、必要ない場合は削除	
	$('#allmask').css({'width':'99.99%','height':'99.99%'});
}

こりゃ不思議、IE8 陰影の重なりのバグが無くなる。説明できない現象だ。
DOCTYPE XHTML1.0、標準モードの場合のみ有効です、pops-ibox-b2_ie8.css の読み込みが不要です。

注意、DOCTYPE HTML4.01、または互換モードの場合は、pops-ibox-b2-b_ie8.css を読み込み、
IE8修正画像を使用してください。99.99%を無効にする。

標準では、IE8用スタイル読み込み(IE8修正画像)のため、無効になっている。

IE8用スタイル読み込みが困難な状況の場合です、適応できるモードが限定されますので、有効な手段ではありません。
面倒でも、IE8用スタイルを読み込み、IE8修正画像でバグを取る。こんな方法もあることを認識していただければよい。

[ 離れた場所に画像をおく ]

---

離れた場所画像をおく。クラス設定されているものは、PAGERに表示される

画像12

利点、クラス設定されているものは、PAGERが作成されますから、遠く離れた場所からでもサムネール画像を確認できます。スクロールはしません。

 

---

 

 

スクリプトの改造などの資料

---

アニメＦＡＤＥ処理する場合には、おおむね２つの処理の構造が考えられる 。

1.全体をＦＡＤＥする。アニメが重い。上層部分(ボタンなど)が壊れる。標準ではこの構成になっている。
2.部分的にＦＡＤＥする。陰影のあるALL-MASK層をＦＡＤＥすると軽い。上層部分に影響がないが処理が増える。今回はこの処理について解説する。

・POPS-iBOX B2-B(pops-ibox-b2-b.js)は、POPS-iBOX A2を改造して、拡大縮小Opacity処理したものである。
・POPS-iBOX A2は通常の拡大縮小であるが、構造的にはOpacity処理を出来るように作っている。
・Opacity処理の場合、負荷が大きいので、内部の透過PNGで構成の陰影部分(#all_mask層)のみ処理して、負荷の少ないようにしている。但し、IE8ではz-indexを新たに付け加えないと、陰影部分の処理が出来ない特性がある。
・スクリプト、ＣＳＳ変更(z-index)などが大変だが、動作が軽くなる。特にWordPressなどのＣＳＳの多い環境では有効である。
・ボタンなどが分離されているため、Opacity処理で壊れない利点がある。(IEでボタンなどOpacity処理すると壊れる)
その場合の、修正点などを解説します。

Opacity処理、スクリプトの改造などの資料

 

問題点の数々

 

 

 

[ 原則としてIE7 IE8 でもAlphaImageLoaderフィルター使用 ]

 

IE7.8 AlphaImageLoaderフィルター処理をしないと、fadeTo() fadeIn()....カスタムアニメopacity処理など、opacity処理を伴う場合、透過PNNG32画像が黒くなり使用できません。
ところが、AlphaImageLoaderフィルター処理をすると、IE8で陰影の重なりが出る、バグが発生します。これは解決できます。

 

- 簡単なCSSの記述例 -

IE全てにAlphaImageLoader処理をする、IE以外はfilterがないのでスッキプする

#test_box3 .filters {
  width: 100px;
  height: 100px;
  background: transparent url("../images/panel01.png") no-repeat;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/panel01.png',sizingMethod='scale');
}

background-imageはあとでjQueryで削除するように処理を行っています

・background: transparent urlはＣＳＳからみたパスを設定
・AlphaImageLoader(srcはＨＴＭＬから見たパスを設定
わからない場合は、どちらとも http:// で始まる絶対urlで記入ください

 

IEでは簡単にいかない

 

BOXひとつ作るのに、IEでの問題不具合が多く、結構時間をついやしました。

 

参考、パネルの構造 [ 基本的なＢＯＸの構造 形式Ａ ]
JSのHTML構造とCSS

★ブラウザ判定
//IEのみ影枠の補正を行うので、一括して判定フラグを設定しておくこちらを使用/IETesterで判定できる方法で記述しています
var browserIE = 0;//IE判定
var browser_v = 0;
if (jQuery.browser.msie) {
	browserIE = 1;
	if (navigator.userAgent.match(/MSIE (\d\.\d+)/)) {browser_v = parseFloat(RegExp.$1);}//IE6.7.8
}

★BOX一体成形R陰影枠のHTML構造

$('<div id="pops_panel"> \
<div id="allmask"><!-- allmask start --> \
<div id="mask"> \
<div class="ml filters"></div><div class="tm filters"></div> \
</div> \
<div id="mask2"> \
<div id="back"></div> \
<div id="bm_mask"><div class="bm filters"></div></div> \
<div id="mr_mask"><div class="mr filters"></div></div> \
</div> \
<div class="tl filters"></div><div class="tr filters"></div><div class="bl filters"></div><div class="br filters"></div> \
</div><!-- allmask end --> \
</div>').prependTo("body");

実際の使用ではbodyにprependToします
実際使用するには、必要なコンテンツ、画像、ボタン、などを適切に配置して使用します

★99.99%補正 / IE8 影の重なりを除去する、必要ない場合は削除
if (browser_v == 8) {
	$('#allmask').css({'width':'99.99%','height':'99.99%'});
}

XHTML1.0標準モードで作動している場合のみ、有効です
allmaskは通常100%ですが、99.99%にすることによりIE8のバグ、透過画像の重なりを除去できます
この場合、CSSで修正画像の読み込みは不要になります

逆にCSSで修正画像の読み込みの場合は
if (browser_v == 8) {
	//$('#allmask').css({'width':'99.99%','height':'99.99%'});
}
無効にする、または削除する、必要があります。

--------------------------------------------------------------------------

★HTMLでIE8修正画像を、CSSで読み込む場合
<link rel="stylesheet" href="css/xxxxx.css" type="text/css" media="all" />
<!--[if IE 8]>
<link rel="stylesheet" href="css/xxxxx_ie8.css" type="text/css" media="all" />
<![endif]-->

--------------------------------------------------------------------------

★CSSの記述例 xxxxx.css
白 20x20 _w6 系を使用した場合、

#pops_panel * {
	padding: 0;
	margin: 0;
}
#pops_panel {
	z-index: 7000;
	display: block;
	position: absolute;
	top: 0;left: 0;
	text-align: left;
}
#pops_panel #allmask {
	display: block;
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#pops_panel .tl {
	display: block;
	position: absolute;
	top: 0;left: 0;
	width: 20px;
	height: 20px;
	background: transparent url("../images/r_tl_w6.png") no-repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/r_tl_w6.png',sizingMethod='scale');
}
#pops_panel .tr {
	display: block;
	position: absolute;
	top: 0;right: 0;
	width: 20px;
	height: 20px;
	background: transparent url("../images/r_tr_w6.png") no-repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/r_tr_w6.png',sizingMethod='scale');
}
#pops_panel .bl {
	display: block;
	position: absolute;
	bottom: 0;left: 0;
	width: 20px;
	height: 20px;
	background: transparent url("../images/r_bl_w6.png") no-repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/r_bl_w6.png',sizingMethod='scale');
}
#pops_panel .br {
	display: block;
	position: absolute;
	bottom: 0;right: 0;
	width: 20px;
	height: 20px;
	background: transparent url("../images/r_br_w6.png") no-repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/r_br_w6.png',sizingMethod='scale');
}

#pops_panel #mask {
	display: block;
	position: absolute;
	top: -20px;left: -20px;
	width: 100%;
	height: 100%;
	overflow:hidden;
	background-color:transparent;
}
#pops_panel .ml {
	display: block;
	position: absolute;
	top: 40px;left: 20px;
	width: 20px;
	height: 100%;
	background: transparent url("../images/r_ml_w6.png") repeat-y;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/r_ml_w6.png',sizingMethod='scale');
}
#pops_panel .tm {
	display: block;
	position: absolute;
	top: 20px;left: 40px;
	width: 100%;
	height: 20px;
	background: transparent url("../images/r_tm_w6.png") repeat-x;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/r_tm_w6.png',sizingMethod='scale');
}

#pops_panel #mask2 {
	display: block;
	position: absolute;
	top: 20px;left: 20px;
	width: 100%;
	height: 100%;
	overflow:hidden;
	background-color: transparent;
}

#pops_panel #back {
	display: block;
	position: absolute;
	bottom: 40px;right: 40px;
	width: 100%;
	height: 100%;
	background-color:#FFFFFF;
}
#pops_panel #mr_mask {
	display: block;
	position: absolute;
	top: -40px;right: 20px;
	width: 20px;
	height:100%;
	overflow: hidden;
	background-color: transparent;
}
#pops_panel .mr {
	display: block;
	position: absolute;
	top: 40px;right: 0;
	width: 20px;
	height: 100%;
	background: transparent url("../images/r_mr_w6.png")  repeat-y;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/r_mr_w6.png',sizingMethod='scale');
}
#pops_panel #bm_mask {
	display: block;
	position: absolute;
	bottom: 20px;left: -40px;
	width: 100%;
	height: 20px;
	overflow: hidden;
	background-color: transparent;
}
#pops_panel .bm {
	display: block;
	position: absolute;
	bottom: 0px;left: 40px;
	width: 100%;
	height: 20px;
	background: transparent url("../images/r_bm_w6.png") repeat-x;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/r_bm_w6.png',sizingMethod='scale');
}

--------------------------------
★IE8修正画像用CSSの記述例 xxxxx_ie8.css

#pops_panel .tl {
	display: block;
	position: absolute;
	top: 0;left: 0;
	width: 20px;
	height: 20px;
	background: transparent url("../images/r_tl_w6_4.png") no-repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/r_tl_w6_4.png',sizingMethod='scale');
}
#pops_panel .tr {
	display: block;
	position: absolute;
	top: 0;right: 0;
	width: 20px;
	height: 20px;
	background: transparent url("../images/r_tr_w6_4.png") no-repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/r_tr_w6_4.png',sizingMethod='scale');
}
#pops_panel .bl {
	display: block;
	position: absolute;
	bottom: 0;left: 0;
	width: 20px;
	height: 20px;
	background: transparent url("../images/r_bl_w6_4.png") no-repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/r_bl_w6_4.png',sizingMethod='scale');
}
#pops_panel .br {
	display: block;
	position: absolute;
	bottom: 0;right: 0;
	width: 20px;
	height: 20px;
	background: transparent url("../images/r_br_w6_4.png") no-repeat;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/r_br_w6_4.png',sizingMethod='scale');
}

実際使用するには#pops_panelを他の名前に変更します

 

 

陰影部の長さが奇数の場合陰影が重なる。偶数値では出ない。アニメ中はほとんどわからない。

 

 

 

JSによる修正方法

all_W 全体の横幅
all_H 全体の高さ、とすると

//奇数なら+1する
if (all_W % 2 != 0) {all_W += 1;}
if (all_H % 2 != 0) {all_H += 1;}

奇数なら +1 して偶数に修正する、1ピクセル広くなっても見た目はわからない
-------------------------------------------------------------------------------

実際にはall_W all_Hを計算した時点でfunction odd_number_Correction()を実行して修正
IE以外は修正していない

詳細略す...................

//IE67奇数補正
odd_number_Correction();

詳細略す...................


//共通IE67奇数補正function
function odd_number_Correction() {
	if (!ie67) {return}
	if (all_W % 2 != 0) {all_W  += 1;}
	if (all_H % 2 != 0) {all_H  += 1;}
}

 

IE8のバグ陰影が重なる。解決には2種の方法がある。

 

 

IE8専用修正画像、CSSの読み込み

先に修正画像を配置した pops-ibox-b2-b_ie8.css を作っておく

<link rel="stylesheet" href="css/pops-ibox-b2-b.css" type="text/css" media="all" />
<!--[if IE 8]>
<link rel="stylesheet" href="css/pops-ibox-b2-b_ie8.css" type="text/css" media="all" />
<![endif]-->

 

 

■[ JSでの99.99%補正を行っていいる箇所を修正する ]

■修正する

//HTMLのパネルを作成、付属処理を行う、処理後非表示にします
function makebase () {

	途中略...........

	//IE8 影の重なりを除去する、必要ない場合は削除
	if (browser_v == 8) {
		$('#allmask').css({'width':'99.99%','height':'99.99%'});
	}

	途中略...........

}

上のスクリプトの部分
$('#allmask').css({'width':'99.99%','height':'99.99%'});
を
//$('#allmask').css({'width':'99.99%','height':'99.99%'});
にして実行させないようにする
または全体を削除する

 

 

 

 

[ 実際の処理の例 ]

★実際の処理の例
IEでアル、事前に判別しておく
browserIE = 1;

//画像拡大表示処理
var viewphoto = function () {

★必要でないものは事前に display:none 消しておく

途中略..................

★全体を消す、CSS処理なので中の要素も全て opacity:0 になる
★IEでは alpha-filter 処理される

	//opacity CSS処理/全体を opacity で消す
	items_box.css({'opacity':0});
	var opacity_v = 1;

	//拡大速度
	var v_speed = 600;

	//画像を移動/横自動
	backimage.animate({'top':topbox_H,'height':show_H},v_speed);

	★opacity処理はカスタムである、jQueryの正式なアニメでは無い

	★重要、時間のかかる重い処理を最後にすること、順序を違わせると、opacity処理が終了しない内に次に進んでしまう
	IE6.7は javascript実行が遅いから注意が必要である、他のアニメであっても同様に重い処理を最後にすること

	//枠全体opacity拡大処理
	items_box.animate({'top':box_pos_Y,'left':box_pos_X,'width':all_W,'height':all_H,'opacity':opacity_v},v_speed,function() {

		★animate終了あと、すぐに壊れたものを修正(復活)する

		//opacity 処理のため壊れているので、復活させる
		//必要のないものは非表示にしておく

		★IEの場合 alpha-filter が残ってしまうので復活させる
		if (browserIE) {
			//opacity 処理
			backimage.css({'opacity':1});//★中の画像
			items_loading.css({'opacity':1});//★loadingも処理したほうが良い
		}

		途中略..................

	});
}

★loading は事前に消しているが影響をうけているので処理した
画像を含む要素は、このようなことが結構あるから、注意が必要、IEは難しい
特に、IE8 は要素の認識が IE6.7 よりも甘いからより注意が必要である(厳密に要素指定する、必要であれば z-index をつける)

★状況によりだが、opacity処理(fadeInも含む)をすると、IEで画像の黒部分に白い点がでる場合がある
1.IE、画像の黒補正
	if (browserIE) {backimage.children("img").css({'opacity':1});}
画像のopacityを1にすることで、防げる場合がある

2.画像のDIV要素をopacity処理するのではなく、画像そのものをopacity処理すると防げる場合がある
	通常は、backimage.animate({'opacity':1},v_speed)、のところを
	画像そのものを、backimage.children("img").animate({'opacity':1},v_speed)、と処理する

但し、上記 1.2の方法が必ずうまくゆくとは限らないので注意、非常にわからない部分がある

 

 

ほぼ、IEでおきます。IEのalpha-filter処理の影響です。

 

 

 

IE8で、指定要素が認識できない不具合。

 

 

 

[ 1 ] カスタムopacity処理の不具合。

 

 

[ 2 ] #allmask層を旨く使う。

 

IE6の高さが取得できなくなる場合の補正/次のfunctionを実行する

//IE6安定しないので/アニメ表示を行うので100%に戻す
if (browser_v == 6) {setallmask_parsent();}

//all_maskでopacity処理するとIE6で高さ取得が不安定/実寸値にする
if (browser_v == 6) {setallmask_value(all_W,all_H);}

//all_mask階層縦横100%にする
function setallmask_parsent() {
	all_mask.css({'width':'100%','height':'100%'});
}
//all_mask階層縦横、原寸にする
function setallmask_value(w,h) {
	all_mask.css({'width':w,'height':h});
}

[ 3 ] IE6 透過PNG32画像の大きさ制限。

IE6 透過PNG32画像の大きさ制限 2 (特殊な場合もある)

 

[ 4 ] IE6 奇数を偶数にしても、陰影の重なりを完全には除去できない。

 

[ 5 ] POPS-iBOX原型と頒布型との違いと、全体をOpacity処理する場合

アニメ表示前ならどこでも良い、ここではloadimage = function のなかで処理している。
IEで背景の透過処理が旨く出来ないので、backimage.css({'opacity':1});を入れる。

//画像LOAD
var loadimage = function () {

	//画像幅を大きくしたので、IEでopacity処理の場合、画像左右に隙が出来るので修正
	if (browserIE) {backimage.css({'opacity':1});}

	詳細略す...................
}

-------------------------------------
backimage.css({'opacity':1});
だけでも問題は起きない

//RESET終了処理
var resetview = function () {

	途中略............

	//画像伸縮
	backimage.animate({'top':0,'height':show_H},v_speed,function() {

		//全体をCSSでけす
		items_box.css({'display':'none'});
		//復活、opacity処理
		all_mask.css({'opacity':1});
	});

}

使いまわしのため、opacity 0になる部分をopacity:1にもどしている
all_maskを処理しているのでall_maskを戻す

 

・負荷が大きいので、内部の透過PNGで構成の陰影部分(#all_mask層)のみ処理して、負荷の少ないようにしている。

 

[ 6 ] 標準のPOPS-iBOXで、全体をOpacity処理する場合。

 

//画像拡大表示処理
var viewphoto = function () {

	途中略............

	//画像を拡大移動
	backimage.animate({'top':topbox_H,'height':show_H},v_speed);
	//枠全体をopacity処理移動する
	items_box.animate({'top':box_pos_Y,'left':box_pos_X,'width':all_W,'height':all_H,'opacity':opacity_v},v_speed,function() {

		//opacity処理でこわれたものの復活処理
		if (browserIE) {
			items_loading.css({'opacity':1});//条件次第
			//opacity処理の場合backimageが壊れるので必要
			backimage.css({'opacity':1});
			//その他必要なもの
			$('要素').css({'opacity':1});
		}

		途中略............
	});

}


//RESET終了処理
var resetview = function () {

	途中略............

	//画像伸縮
	backimage.animate({'top':0,'height':show_H},v_speed,function() {

		//全体をCSSでけす
		items_box.css({'display':'none'});
		//復活、opacity処理
		items_box.css({'opacity':1});
	});

}

使いまわしのため、opacity 0になる部分をopacity:1にもどしている
全体を処理しているのでitems_boxを戻す、必ず先に「全体をCSSでけす」を実行してから処理する

★使いまわしをしない場合は、すべてremove()削除するのが、通常の処理法なので事後の処理は無い

 

・色々と説明しましたが、ご理解ください。ＪＳに説明の有るテキストをいれていますので、読んで下されば理解が深まるとおもいます。
・一度、JS雌型を作れば応用も楽になります。
・他のＩＥの不具合の解決に役立つこともあるかとおもいます。

 

[ 7 ] Opacity処理階層とコンテンツ階層を完全分離した構造にする方法

別の方法として、新たに分離した階層を重ねて、表示する方法も考えられます。上層階層はあとで表示するものであり、下層階層がアニメしているときは、常に非表示の状態です。

構造をかえてみる

$('<div id="pops_ibox"> \
<div id="allmask"> \
<div id="mask"> \
<div class="ml filters"></div><div class="tm filters"></div> \
</div> \
<div id="mask2"> \
<div id="back_wrap"><div id="back"></div></div> \
<div id="bm_mask"><div class="bm filters"></div></div> \
<div id="mr_mask"><div class="mr filters"></div></div> \
</div> \
<div class="tl filters"></div><div class="tr filters"></div><div class="bl filters"></div><div class="br filters"></div> \
<div id="back_image_wrap"><div id="back_image_wrap2"><div id="back_image_wrap3"><div id="back_image"><img /></div></div></div></div> \
</div><!-- allmask end --> \
</div><!-- pops_ibox end --> \
<div id="pops_ibox2"> \
<div id="centerbox"><img /></div><div id="topbox"><div id="line1"></div></div><div id="bottombox"><div id="line4"></div></div><div id="closetext"><p>CLOSE</p></div><div id="close_btn"><a title="close"></a></div><div id="loading"></div></div>').prependTo("body");

 

・#pops_iboxの上に#pops_ibox2階層をかさねます。大きさはともに同じですので、ＣＳＳ記述など増えても簡単です。
・#pops_iboxをOpacity処理階層とします。ＩＥ6での大きさが取得できないバグは解消されます。
・#pops_ibox2を上層階層とします。Opacity処理の影響がおよびませんから、ボタンなどは保護されます。ＩＥ8が認識しない場合はz-indexをつければ良い訳です。Opacity処理で消えるものがあれば復活してやればよい。
・このような、考えで色々試しても良いとおもいます。
・この例では、loading の位置が同じですので、他に移動するなりの処置は必要です、、、

ＩＥのOpacity処理の不具合などを、理解していればそう難しいものではありません。自由なアニメ処理、自由なデザインが可能です。
ＩＥの性質など、記述してきましたので、それらを参考に自由なものを制作ください。

 

[ 8 ] 要素のアニメを高速にする

パネルと画像が分離してアニメ操作されていますので、同時に処理が開始されることが要求されます。
そのため要素のDOMの取得オブジェクトをキャッシュする方法が広くおこなわれています。この技法は欠かせません。

jQueryでは、$('#要素').anime({.............})などを実行する際、要素の位置をその都度取得しているのだそうです。
それを、キャッシュしておき、使用すると早く実行できるということです。

大変な効果があります。この技法がなければこのＪＳは作れません。

★よく使う、要素をキャッシュする。

//パネル作成
function makebase () {

	詳細略す...................

	//オブジェクトを保存
	items_box = $('#pops_ibox');
	center_box = $('#centerbox');
	items_loading = $('#loading');
	items_close = $('#closetext');
	closebtn = $('#close_btn');
	backimage = $('#back_image');
	//allmask
	all_mask = $('#pops_ibox #allmask');

	詳細略す...................
}

★使用例、下の、画像拡大、そのほかの箇所で使用しています

//画像拡大
var viewphoto = function () {

	詳細略す...................

	//画像拡大
	backimage.animate({'top':topbox_H,'height':show_H},v_speed);
	//全体を伸縮
	items_box.animate({'top':box_pos_Y,'left':box_pos_X,'width':all_W,'height':all_H},v_speed);
	//allmask階層をフェード(fadeTo)
	all_mask.animate({'opacity':opacity_v},v_speed,function() {

		詳細略す...................

	});
}

どうしても同時に処理したいため、キャッシュしています。
画像、全体、allmask階層が時間的に、ほぼ同時に処理されます、大変便利です。

【参考リンク】

[to-R] jQueryを良くする25のTIPS

 

自由なデザインとパネルの応用

---

自由なデザイン、自由な構造を構築可能

 

パネルの構造と性質、不具合など理解できれば、パネルを利用して、自由なデザイン、自由な構造を構築可能である訳です。

 

 

 

★ＩＥに対応しないでよければ、もっと簡単になるし、補正などは皆無になる。
ポイントは、ＩＥ9がどのような仕様になるか、ＩＥ8がいつまで使用されるかである。

★もっと良い方法、構造があれば改善していただければ、嬉しくおもいます。

---

■ このスクリプトは pops-ibox-b2 を改造し、カスタムopacity処理を追加したものである。( pops-ibox-b2-b )

 

---

 

ライセンス (GPL)

パネル構造、および付随Scriptの応用、再頒布などについて

1. jQuery自体が、「ＧＰＬライセンス」ですので、それに順次ます。
2. 掲載されたパネル、Scriptの応用、書き換え、再頒布などについては、当方の許可を得ることなく全て自由に行えます。
3. Scriptの応用などによる発生する弊害、損害などは自己責任でお願いします。
4. jQueryを応用した単なるパネルのシステムですので、問題になる箇所などはほとんどないとおもわれます。
5. より良きものにして頂くため、パネルの改良、ＣＳＳ箇所の発展改良、画像自動伸縮の改良などして頂き、発表される事を強く望みます。

 

画像引用: TOYOTA(株) ギャラリー、アーカイブギャラリー、より引用しました。http://ms.toyota.co.jp/jp/F1archive/

 

前のページ戻る

---------------------------------------------------------
Copyright © 1999-2010 POPS WEB KOUBOU