POPSブログ

jQuery 伸縮するパネル/6

145

  Category:  jquery2012/09/07 pops 

新形式の「LightBox」の角丸処理を、GIF画像または corner.js、で行う場合の「シミュレーション」です。IE6には対応していません。


jQuery 伸縮するパネル6「LightBox」シミュレーション2

画像、JS設定の変更でどのように変化するかを確認するための、シミュレーションです。corner.jsは便利ですが、IEでは旨く行かない場合が多いようです。通常の透過GIF画像で角丸処理した時の状況がわかります。


GIF画像処理、jquery.corner.js 処理シミュレーション


[[ Google Chrome での閲覧を推奨します ]]


下の画像を「クリック」ください。拡大して表示します。(初期設定corner.js使用)


以下の条件の「切り替え変更」が、シミュレーションできます。(jquery.corner.js使用、またはgif画像使用)

MOVE/FADE 位置切替 スケール 速度切替 レーヤー色

角丸処理

move
center
拡大無
600
#000000
JS
  • MOVE
  • FADE
  • 画像
  • 中央
  • 標準
  • 拡大
  • 標準
  • 遅く
  • 黒色
  • 白色
  • JS
  • GIF

注意。FADEの場合、位置切替は center のみになります。IE6には対応していません。

「角丸処理」JSでの処理は IE ではキレイになりません。GIF画像を指定ください。


1. この「LightBox」は「MOVE」させるために制作されたもので、原則「FADE」タイプはありません。
2. 位置切替でサムネールの位置、中央位置の指定が可能です。
3. Overlayの色及び透明度は、CSSで設定ください。
4. 詳しい説明などは、下記の記事を参照ください。
5. IE9 での jquery.corner.js 処理は未確認です。IE6には対応していません。
6. 対応ブラウザ、GIF画像処理は全てOK、 corner.js 処理は IE 除きOK。(IE9未確認)


透過陰影画像(PNG32)を使用したシミュレーションは下記にあります。

【透過陰影画像使用のシミュレーション】当方の記事: jQuery 伸縮するパネル4



GIF画像画像使用または、jquery.corner.js使用の場合の変更点


使用する画像の寸法を15x15ピクセルの大きさに変更したので、JS及びCSS設定も変更になります。JS処理の場合は画像は不要になります。下記「MOVEタイプLightBox」の JS CSS を変更します。

【参考 MOVEタイプLightBox】当方の記事: jQuery 伸縮するパネル3


[ GIF画像使用の場合 ]


● GIF画像使用の場合のJSの変更

使用する画像の寸法を15x15ピクセルの大きさに変更したので、JSの設定もかえる。
透過背景画像削除処理を機能しないようにするか、または削除する。


var corner_W=15;//コーナーの大きさ
var corner_H=15;
var side_space_W=5;//画像の両サイドのスペース
var top_H=32;//32以上、上部ボックス高さ
var bottom_H=20;//20、下部ボックス高さ最低corner高さの分はとる

//標準初期値
var ST_all_W=130;
var ST_all_H=90;
var ST_image_W=100;
var ST_image_H=60;

途中略

//透過背景画像削除処理/noneで一応削除できる
//if(ailoader) {items_box.find('.filters').css('background-image','none');}

● CSS (GIF使用、JS使用、ともにほぼ共通)

四隅に使用する画像の寸法を15x15ピクセルの大きさにしていますので、それに合わせて若干変更しています。
GIF画像の場合は四隅に、配置します。JSで処理する場合は画像は不要ですが、背景の色を指定します。

透過PNG32画像を使用していませんので「画像パネル」の処理は不要になります。


/*pops-lightbox.css 日本語*/

#pops-lightbox {
	z-index: 7000;
	display:block;
	position:absolute;
	top:0;left:0;
	width:130px;/*初期の大きさ*/
	height:90px;
	text-align:left;
	background:transparent;
}

/* 陰影画像 */
#pops-lightbox .tl {
	display:block;
	position:absolute;
	top:0;left:0;
	width: 15px;
	height: 15px;
	background:url('/main/images/corner_tl.gif') no-repeat;
}
#pops-lightbox .tr {
	display:block;
	position:absolute;
	top:0;right:0;
	width: 15px;
	height: 15px;
	background:url('/main/images/corner_tr.gif') no-repeat;
}
#pops-lightbox .bl {
	display:block;
	position:absolute;
	bottom:0;left:0;
	width: 15px;
	height: 15px;
	background:url('/main/images/corner_bl.gif') no-repeat;
}
#pops-lightbox .br {
	display:block;
	position:absolute;
	bottom:0;right:0;
	width: 15px;
	height: 15px;
	background:url('/main/images/corner_br.gif') no-repeat;
}
#pops-lightbox .tm {
	display:block;
	position:absolute;
	top:0;left:15px;right:15px;
	width: auto;
	height: 15px;
	background-color:#FFFFFF;
}
#pops-lightbox .bm {
	display:block;
	position:absolute;
	bottom:0;left:15px;right:15px;
	width: auto;
	height: 15px;
	background-color:#FFFFFF;
}
#pops-lightbox .ml {
	display:block;
	position:absolute;
	left:0;top:15px;bottom:15px;
	width:15px;
	height:auto;
	background-color:#FFFFFF;
}
#pops-lightbox .mr {
	display:block;
	position:absolute;
	right:0px;top:15px;bottom:15px;
	width:15px;
	height:auto;
	background-color:#FFFFFF;
}

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

/* 画像パネル */
#pops-lightbox #center-box {
	position:absolute;
	top:15px;bottom:15px;
	left:5px;right:5px;
	width: auto;
	height: auto;
	background-color:#FFFFFF;
	overflow:hidden;
}
/* IE7 heightが伸びない HACK修正*/
#pops-lightbox #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-lightbox #panel-topbox {
	display:block;
	position:absolute;
	top:0;left:0;
	width:100%;
	height:100%;
	background-color:none;
	overflow:hidden;
}
/* close-btn */
/*gif背景画像の場合 close20.gif png*/
#pops-lightbox #close-btn {
	display; block;
	position: absolute;
	top:3px;right:10px;
	width: 25px;
	height: 25px;
	background:url("/main/images/close20.gif") no-repeat;
	background-position:0 0;
	cursor:pointer;
	overflow:hidden;
}
#pops-lightbox #close-btn.hover {
	background-position:0 -25px;
}

#pops-lightbox #popslb-loading {
	display:block;
	position: absolute;
top:0;left:0;
	width: 100%;
	height: 100%;
	background:url("/main/images/loading.gif") no-repeat center center;
	background-color:none;/*Safari*/
}
/*TEXT*/
#pops-lightbox #top-box {
	display: block;
	position: absolute;
	top:10px;left:15px;right:50px;
	width: auto;
	height: 15px;
	background-color:none;
	overflow:hidden;
}
#pops-lightbox #top-box #top-line{
	text-align:left;
	width:auto;
	height:14px;
	font-size: 12px;
	font-weight: bold;/*normal*/
	padding: 0;
	color: #AAAAAA;
	overflow:hidden;
}
#pops-lightbox #bottom-box {
	display: block;
	position: absolute;
	bottom: 5px;left:15px;right:15px;
	width: auto;
	height: 15px;
	background-color:none;
	overflow:hidden;
}
#pops-lightbox #bottom-box #btm-line{
	text-align:center;
	font-size: 10px;
	font-weight: bold;/*normal*/
	margin-top:8px;
	color: #CCCCCC;
	overflow:hidden;
}

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

CSSが重い場合は、スペースなどを削除すれば少し軽くなります。多少読みづらくなりますが。


[ jquery.corner.js使用の場合 ]


● JS処理の場合のJSの変更

大きさの変更は共通です、透過背景画像削除処理を機能しないようにして、その上に次ぎの角丸処理(jquery.corner.js)を書く。


var corner_W=15;//コーナーの大きさ
var corner_H=15;
var side_space_W=5;//画像の両サイドのスペース
var top_H=32;//32以上、上部ボックス高さ
var bottom_H=20;//20、下部ボックス高さ最低corner高さの分はとる

//標準初期値
var ST_all_W=130;
var ST_all_H=90;
var ST_image_W=100;
var ST_image_H=60;

途中略

//JS角丸処理
$('#pops-lightbox .tl').corner('10px tl');
$('#pops-lightbox .tr').corner('10px tr');
$('#pops-lightbox .bl').corner('10px bl');
$('#pops-lightbox .br').corner('10px br');

//透過背景画像削除処理/noneで一応削除できる
//if(ailoader) {items_box.find('.filters').css('background-image','none');}

● JS処理の場合のCSS (四隅画像は不要になります、その外は15x15ピクセルの大きさ設定で同じ)


/* 四隅画像は不要 */
#pops-lightbox .tl {
	display:block;
	position:absolute;
	top:0;left:0;
	width: 15px;
	height: 15px;
	background-color:#FFFFFF;
}

使用パーツ画像

  
陰影画像 陰影画像 陰影画像 陰影画像 img初期画像Loding画像

「img初期画像」は表示すべき写真画像がロードされるまでの間、「imgタグ」の中に収容する画像です。(画像無しのマークが表示されるのを防ぐ、画像高さを与える役目をします)


【参考 MOVEタイプLightBox】当方の記事: jQuery 伸縮するパネル3


以上です。


[ この記事のURL ]


タグ:jquery , LightBox , memo , series

[ jQuery 伸縮するパネル シリーズ記事 ]

jQuery 伸縮するパネル/72012.10.10
jQuery 伸縮するパネル/62012.09.07
jQuery 伸縮するパネル/52012.09.07
jQuery 伸縮するパネル/42012.09.06
jQuery 伸縮するパネル/32012.09.06
jQuery 伸縮するパネル/22012.09.02
jQuery 伸縮するパネル/12012.09.02

 

ブログ記事一覧



[1]