POPS WEB KOUBOU

POPS-iBOX C2 LightBoxタイプ

---

POPS-iBOX シリーズ No3 サンプル (pops-ibox-c2.js)

 

POPS-iBOX C2 LightBoxタイプ DOWNLOAD...........
[ pops-ibox-c2.zip ] ( HTML画像を含むサンプル一式 )
JS (pops-ibox-c2.js) 21KB / ZIP 601KB

 

■ 画像横幅を広げたタイプ

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

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

http://jquery.com/

 

POPS-iBOX C2 LightBoxタイプ がどのようなものかは、下のＤＥＭＯで体感してください。パネル外周が透過PNG画像であり、透過レーヤーとの組み合わせのため少し重くなります。

POPS-iBOX C2 LightBox PAGER付き通常伸縮タイプ、サンプル DEMO

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

---

GROUP設定があれば、PAGERが作成されます。/25%の大きさのサムネールJPG画像を使用/サムネール矯正

GROUP1

画像1

画像2

画像3

画像4

画像5

---

GROUP2 (このページ最終に GROUP2 画像1枚あり)

画像6

画像7

画像8

画像9

画像10

サムネールなし 画像5

---

GROUP設定なしの場合、/PAGERは作成されません。

画像11

画像12

画像13

画像14

画像15

---

GROUP設定なし、/REL無。

サムネールなしLINK 画像7

---

 

PAGER

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

[ PAGER動作図 ]

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

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

スクリプトの特徴

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

以下、詳細を記します。

[ 1 ] CSS 読み込み設定

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

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

pops-ibox-c2.css pops-ibox-c2_ie8.css

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

 

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

★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');

url がわからない場合は、どちらとも http:// で始まる絶対urlで記入ください。

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

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

[ 2 ] JS 読み込み設定

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

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

pops-ibox-c2.js

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

 

[ 3 ] JS pops_ibox()の実行

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

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

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

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

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

 

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

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

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

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

・pops_iboxクラスを与える。
・titleプロパティにタイトルを記入。
・captionプロパティに記事を記入。(パネルの大きさを考慮した長さであること)
・relプロパティに、分類するグループ名を記入します。但し、グループ名がない場合は、PAGER表示はしません。
 グループ名ごと分類してPAGERを作ります。

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

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

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

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

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

資料、[ a リンク 画像の設定のまとめ表 ]

項目	POPS-iBOX A2 (No1)	POPS-iBOX B2 (No2)	POPS-iBOX C2 (No3)	備考
ＪＳ名	pops-ibox-a /a2	pops-ibox-b /b2	pops-ibox-c /c2	偶数補正に少しの違い
クラス設定	pops_ibox	pops_ibox	pops_ibox	class="pops_ibox"
サムネールの大きさ	無くとも可	原則必要	原則必要	無い場合、js後方実行
グループ化	しません	しません	必要 rel="group1"	relにgroupを記入
タイトル	使用可	使用可	使用可	titleを記入
画像説明	使用可	使用可	使用可	captionを記入
サムネールなし	OK	OK	OK	100x80
PAGER機能	なし	あり、クラス全て	あり、rel分類ごと	全て、分類ごと

[ 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を使用します。
自作の陰影を使用する場合は、枠の色と同じに自作しても結構です。

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

[ 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	40 (偶数値)	上部テキスト高さ 10以上
4.下部テキストエリア	bottombox_H	20	20 (偶数値)	下部テキスト高さ 10以上
5.サムネール幅	start_W	100	100 (偶数値)	サムネールなし初期の大きさ
6.サムネール高さ	start_H	80	80 (偶数値)	同上
7.peagerの位置	pager_H_v	18	18	状況に応じ変更する

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

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

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

pops-ibox-c2独自の設定

//peagerの位置の指定、高さ変更 pager_H_v = 18;

pops-ibox-c2には独自にoverlayがあります。CSSの変更が可能です。

CSSの例、単純に設定しています。

#pops_ibox_overlay {
	z-index: 8880;
	position: absolute;
	top: 0px;
	left: 0px;
	width:100%;
	background-color: #000000;
	opacity: 0.5;
	filter:alpha(opacity=50); 
}

★CSSで、背景色、overlayの透明度を変更できます。JSでは表示非表示だけでその他の変更はなし。

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

 

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

 

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

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

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

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

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

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

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

 

ライセンス (GPL)

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

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

 

 

[ 離れた場所にグループ画像をおく ]

---

離れた場所にグループ画像をおく。GROUP2

画像1

利点、グループ(GROUP2)のPAGERが作成されますから、遠く離れた場所からでもサムネール画像を確認できます。スクロールはしません。

 

---

■ このスクリプトは pops-ibox-c を改造し、初期LOADING中とサムネール先に戻ったときの偶数補正を追加したものである。( pops-ibox-c2 )

 

---

その他の POPS-iBOX

POPS-iBOXシリーズ No1 POPUPタイプ

POPS-iBOXシリーズ No2 PAGERタイプ