iBoxページに戻る

 

POPS-iBOX-3I. CSS3 LightBoxタイプ (pops-ibox-3i) サンプル/保存形式UTF-8


このスクリプトは 新しい形式のパネルを用いたライトボックスです。(3年以上前から原型はあったがIE6に対応できなかった)
[IE6]には対処しないことにより、簡単なパネル構造を作れますので以前より簡単になります。その角丸陰影処理をCSS3で行うようにしたものです。
[IE6]は完全に対象外になります。[IE7.8]は表示は可能ですが、角丸陰影処理部分がCSS3処理ですから未処理になります。
このスクリプトはpops-ibox-3cを改造して「テスト」的に制作したものです。

 

POPS-iBOX-3I 伸縮フエードタイプ (CSS3)

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

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

http://jquery.com/

 

POPS-iBOX-3I 伸縮フエードタイプ、サンプル DEMO


★ サムネール画像を CLICK して下さい、拡大します。画像その他を、押すことにより消去します。
(現在の設定は、view_type:"move"、group_use:"none"、pager_use:"use"、start_position:"image"、panel_color:"#EAEDF7" (白菫色) に設定されています。グループ化、フエード無しにもできます。)



下の画像を「クリック」ください。拡大して表示します。


jQuery 伸縮するパネル/4 角丸陰影画像を外周に配置した「伸縮するパネル」を利用して伸縮する「LightBox」の「シミュレーション」を行います。
[GROUP1]
2xxxxxxxxxxxxxxxxxx
[GROUP1]
3モード、fade:画像のみフエード、all:全体をフエード、 move:フエードと拡大が同時。moveのみ指定位置に戻ります。拡大モードに設定されている場合のみ、拡大率が有効。但しブラウザの大きさにより表示は異なります。
4xxxxxxxxxxxxxxxxxx
[GROUP1]

[サムネール無1]

7xxxxxxxxxxxxxxxxxx
[GROUP2]
8xxxxxxxxxxxxxxxxxx
[GROUP2]
9xxxxxxxxxxxxxxxxxx
[GROUP2]



[ IE6 ] には対処していません。
POPS-iBOX-3C 伸縮フエードタイプの「角丸陰影PNG画像」部分をCSS3で処理したものです。基本的にはほぼ同じです。


スクリプトの特徴


  1. 画像拡大フエード専用です。設定変更ができます。
  2. 透過PNG画像を使用せず、CSS3で処理しました。
  3. CSS3に対応したブラウザのみ完全に表示します。(Chromeでの閲覧推奨)
  4. サムネールが無くともOKです。
  5. 以前の iBox 拠り簡略化しています。構造もかえました。
  6. グループ化できます。自動表示(スライドショウ)機能をつけました。
  7. 画像切り替えをクロスフエードにしました。

対応ブラウザ(検証済みブラウザ) IE6には対処していません。


・対応ブラウザ、IE9 Safari Firefox Chrome Opera
(IE7.8は表示は可能ですが、CSS3部分の角丸陰影が未処理になります)


DOWNLOAD ZIP に含まれる内容


  1. jquery-1.6.4.min.js が内包されています。
  2. 該当の、pops-ibox などの JS CSS 一式。
  3. 該当の、サンプル画像 透過陰影画像など、一式。
  4. サンプルDEMO html。

【重要】、jQueryはそのまま、そのほか全てUTF-8(UTF-8N)のテキストですので、使用環境に応じて適切に書き換えてください。


設置方法


  1. jQuery1.4.2 以上であること(delayを使用している。この部分削除可能)。
  2. 専用 js css の読み込み。
  3. 画像サムネール aリンク要素に、クラスを設定 class="pops-ibox" を記入する。
  4. jsの変更(ダミー画像パス、center_img_url を設定する)。
  5. js css 共、他のjQueryのプラグインの設定と同様です。

以下、詳細を記します。


説明図


 

HTML

表示したい画像の「Aリンク」に pops-ibox クラスをあたえます。
title caption を書き込んだ場合はそれを表示します。サムネール画像の大きさは記載ください。


サムネール画像のある場合
<a href="表示する画像URL" class="pops-ibox" title="タイトル" caption="メモ"><img src="サムネール画像URL" width="100" height="50" /></a>

サムネール画像の無い場合1 (表示する画像を利用)
<a href="表示する画像URL" class="pops-ibox" title="タイトル" caption="メモ"><img src="表示する画像URL" width="100" height="50" /></a>

サムネール画像の無い場合2
<a href="表示する画像URL" class="pops-ibox" title="タイトル" caption="メモ">リンク名</a>

タイトルは上部に、メモは下部に表示されます。狭いので、画像の幅など考慮して文章を書いてください。

注意、htmlでの、サムネールの大きさは必ず記載ください。(width="100" height="50")


JS CSS

pops-ibox-3i.css pops-ibox-3i.js
JS の読み込み前に、CSS を先に読み込むようにしてください。JS は jquery の後に読み込みます。(標準)


<link rel="stylesheet" href="css/pops-ibox-3i.css" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery-1.6.4.min.js" /></script>
<script type="text/javascript" src="js/pops-ibox-3i.js" /></script>

注意。設置サイトに既にjqueryが読み込まれている場合は、多少古くても(jQuery-1.4.2以上が必要です)作動しますので、複数のjqueryは読み込まないでください。誤作動の原因にもなります。


JSの実行

HTML側より、$(document).pops_ibox();を実行してJSを立ち上げます。又は、JSの下部に書いておいても良い。


HTMLから実行する
<script type="text/javascript" />
$(function(){
	$(document).pops_ibox();
});
</script>

または JSの下部に書く
(function($){
  jQuery.fn.pops_ibox=function(o) {

JS内部は略す

  };
})(jQuery);

$(function(){
	$(document).pops_ibox();
});


プラグインの初期設定など

JSの始めをご覧ください。

JS側で、ダミー画像を使用していますので、その画像のURLを設定ください。白、黒、透明の3種類あります。
(画像をLOADできない場合ブラウザにより異なりますが、画像のマークがでて見栄えが悪くなるので使用しています)


//ダミー画像
var center_img_url=o.path+"center_white.png";
//var center_img_url=o.path+"center_black.png";
//var center_img_url="xxxx/images/center_white.png";

パネルの色を変更する場合は透明の center_alpha.png を使用したほうが良いでしょう


プラグインのHTML拠り変更できる変数

HTML拠り変更できる、JSの設定は、次のようになります。エフェクトの種類、画像拡大の速度と、ダミー画像のパスなどです。


	//option
	var o=$.extend({
		group_use:"none",	//use none
		pager_use:"use",	//use none group
		view_type:"move",	//move fade
		fade_mode:"fade",	//fade all move
		move_speed:600,		//move速度
		fade_speed:600,		//fade速度
		speed:1000,		//画像fade速度
		cross_speed:800,	//cross-fade速度
		easing:"swing",		//swing linear easeOutBounce easeOutBack
		start_position:"image",	//image center
		autoload_use:"use",	//use none
		auto_time:8000,		//6000-10000
		panel_color:"#FFFFFF",	//color
		path:'images/'
	},o || {});


group_use:use グループ化を有効にします。use でない場合は分類しません。

pager_use:group グループ化の部分のみpager設定。全部の場合は use にする。


view_type:move はmode は有りません。動きは1種のみです。
view_type:fade は fade_mode が fade all move の 3種 あります。
それだけの設定変更で当初始めることができます。詳細設定は、下段の説明を参照ください。


fade_mode/フェードモード。view_type が fade の時のみ。
1. fade CSSで簡単に拡大して、画像のみフエードします。
2. all 全体を拡大された大きさでフエードします。
3. move 伸縮とフエードを同時に行います。フエードと共にじょじょに大きくなります。


speed は各々のアニメ速度です。画像の大きさ、状態などにより自由に設定できます。


1. move_speed: view_type move の場合のパネル拡大移動速度です。
2. fade_speed: view_type fade の場合のパネル拡大移動フェード速度です。
3. speed: fade_mode fade の場合の画像フェード速度です。パネルはCSSで表示。
4. cross_speed: 画像自動ロード時に使用されるクロスフェードの速度です。


HTMLから条件を変えて実行する

次ぎのように実行すると、JSの初期設定が上書きされて、記載された条件で作動します。勿論JS側を書き換えても結構です。


<script type="text/javascript" />
$(function(){
	$(document).pops_ibox({
		view_type:'fade',
		fade_mode:'all',
		fade_speed:800
	});
});
</script>


レーヤーの色と透明度

CSSで自由に設定ください。JS側では表示、非表示を行っているだけです。


パネルの色を変更する場合

3a 3c の時のような画像変更などは必要ありません。panel_color を好みの色にかえてください。
タイトルなど読み難くなる時は、タイトルの色など使用者の好みでCSSを変更ください。


タイトルなどの色の変更

CSSの、#top-line #btm-line、の文字色指定を変更ください。サイズの変更もできます。


CSS3角丸陰影処理

AlphaImageLoaderフィルターは使用していません。CSS3角丸陰影処理を行っていますので、CSS3対応のブラウザのみ処理されます。


パネルの基礎部分に角丸陰影処理
#pops-ibox {
	z-index:7000;
	display:block;
	position:absolute;
	top:0;left:0;
	width:110px;/*初期の大きさ*/
	height:90px;
	text-align:left;
	background:none;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	box-shadow: 0 0 6px #555;
	-moz-box-shadow: 0 0 8px #555;
	-webkit-box-shadow: 0 0 8px #555;
}
必要であればボーダーの指定可能
-------------------------------------------

パネルの四隅部分の一例/角丸処理
#pops-ibox .tl {
	display:block;
	position:absolute;
	top:0;left:0;
	width:10px;
	height:10px;
	background-color:#FFFFFF;
	border-top-left-radius:5px;
	-moz-border-radius-topleft:5px;
	-webkit-border-top-left-radius:5px;
}

軽くなるよう少しだけ設定しています。使用者が変更可能です。


タイトルとメモの表示

HTML側に .pops-ibox クラス設定する際に title caption があればパネルに表示します。
記載の無き場合は、JS先頭設定の、top_title site_name、が代入されます。


<a href="xxxxx" class="pops-ibox" title="タイトル" caption="メモ"><img src="xxxxx" /></a>

タイトル、メモ、のない場合は書かないほうがベターです
<a href="xxxxx" class="pops-ibox"><img src="xxxxx" /></a>

注意、「ページャー」使用時は「タイトル」は表示されません。下部ボックスの使用設定がなされていなければ「メモ」は表示されません。


グループの指定

「.pops-ibox クラス」を設定したものを複数の「グループ」に分けることが可能です。同じ「グループ名」のものは他と分離されます。

1. グループ設定、 group_use を use にしますと有効になります。
2. 判定分類は画像をクリックした時に行います。押されたアイテムと、同じ「rel」名を持つものを「1グループ」とします。
(例では GROUP1 となっていますが名前は何でも良い)
3. ページャー、prev/nextボタンなども「グループ」のみの設定となります。「別グループ」のアイテムをクリックすればまた別の分類になります。
4.「グループ」のみにページャーを表示する場合は「ページャーの使用」設定を group にします。
5.「グループ」になっていないものは、従来と同じです。「シミュレーション3」で確認ください。


HTML側には、rel="グループ名" を記載します。以下のようになります。



<a class="pops-ibox" href="画像URL" title="タイトル" caption="メモ" rel="グループ名"><img src="サムネール画像URL" /></a>

必ず「グループ」にしなければならない理由がなければ、設定しない方が良いでしょう。


ページャーの設定とCSS変更

標準では「ページャー」のCSSは「番号付きページャー」の場合が記載されています。それ以外の場合は下記例のように書き換えてください。


「ページャー」使用時の注意など

1. 「ページャー」使用に関係なく「タイトル」は常時表示されます。HOVERタイトル機能削除。
2. 「ページャー」使用時少し「クリック」位置がずれると、終了処理に移行するのを防ぐため、TOPボックスエリアにダミーのアクションを設定していますので、TOPボックスエリアを押しても終了処理に進みません。
3. 「ページャー」使用時のみ、HOVERサムネール表示設定が可能です。
4. 「.pops-iboxクラス」設定が2個以上なければ「ページャー」関係のリンクは作成されません。無意味だからです。
5. 「ページャー」のデザインなどは少しCSSで変更は可能です。(切り替えで、画像ボタンの使用可能です)


「番号無しページャー」の作り方

ページャーデザインなどは使用者がCSSを変更します。該当部分のCSSを適当な大きさにする。小さければ沢山並ぶ。



認識しない場合は #pops-ibox を記入する

#pops-ibox #pager-wrap .ibox-pager {
	display:block;
	width:10px;
	height:10px;
	margin-left:2px;
	padding:0;
	background-color:#EEEEEE;
	cursor:pointer;
	float:left;
}


「画像ページャー」の作り方

通常は番号付きの html を出力しますので、「ページャー形式指定」で btn にしてください。番号なしの html を出力します。
CSSは使用者が書き換えます。下に一例を示します。パネルの変化があっても良いようにPNG32画像で作り、色はポジションをかえて変化させています。



swich_alpha.png使用の場合
-----------------------------------------------------
認識しない場合は #pops-ibox を記入する

#pops-ibox #pager-wrap .ibox-pager {
	display:block;
	width:8px;
	height:8px;
	margin-left:2px;
	padding:0;
	background:url("../images/swich_alpha.png") no-repeat;
	background-position:0 0;
	cursor:pointer;
	float:left;
	overflow:hidden;
}

#pops-ibox #pager-wrap .ibox-pager:hover {
	background-position:0 -10px;
}
#pops-ibox #pager-wrap .hit{
	background-position:0 -20px;
}

「ボタン」の大きさを小さくすれば沢山並ぶことになる。設定は自由です。


EM、テキストの表示

「.pops-ibox」クラス設定の「aリンク」の後に、<em></em> があればパネル内に表示します。構造上の理由でテキストの高さを取得出来ませんので、エリアの高さはJSで与えてください。余り長文にならないように、実際画像とのバランスを確認ください。


<a href="xxx" class="pops-ibox"><img src="xxx" /></a><em>表示する説明文</em>

CSSで
em{display:none;}
をお忘れなく

IE7の場合にフォントサイズ指定がバグのため機能しません。「!DOCTYPE」タイプ「Transitional」%指定で機能しますが「Strict」ではだめ。(div継承だからかな)
CSS先頭に、em display:none、の設定がありますので、都合が悪ければ修正ください。


delayを使用している部分を削除する

事情があり、jQuery1.4.2以前のバージョンで動作させたい場合の処置です。
パネルを表示後、少し遅延させて画像フエードをおこなっているのにdelayを使用しているが、削除は可能です。それによりjQuery1.4.2以前のバージョンでも使用できるようになります。



var view_fadeimage=function () {

	途中略す

	items_box.delay(delaytime).fadeIn(o.speed,function(){
		//
	});
}

のdelay部分を削除
items_box.fadeIn(o.speed,function(){
となる、表示に大きな変わりは無い


Easingの指定

easingを指定する場合は、easingの種類を正しく入力ください。swing linear easeOutBounce easeOutBack 以外の指定はできません。

重要、easingの「文字間違い」は「エラー」になりますので、変更の際は確認ください。


ローカルでのテスト

事前に記載方法などが間違いないかなどの確認のため、ローカルでのテストを推奨します。


シミュレーション

設定変更による変化などは、次の「シミュレーション」で実際に体感できます。

【シミュレーション3】当方のブログ記事: jQuery pops-ibox シミュレーション3

 

パネルレイアウト、その他の設定変更


説明図


このCSSでは、外周角丸の半径は最大10ピクセルです。陰影幅などは自由です。但し全て全体の大きさよりはみ出します。
外周余白を与えて余白をとると最大の大きさで表示する場合キレイになります。
図に示すように陰影画像を使用した場合と、大きさ計算、原点位置など若干違います。


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


項目 変数 初期値 変更 備考
1.外枠の要素幅 corner_W 10 10(自由) 未使用
2.外枠の要素高さ corner_H 10 10(自由) 初期の高さに使用
3.両サイドの間隔 side_space_W 2 2(自由) 1-10
4.上部エリア top_H 32 32(自由) 高さ 32以上
5.下部エリア bottom_H 20 20(自由) 高さ 20以上
6.サムネール幅 ST_image_W 100 100(自由) サムネールなし初期の大きさ
7.サムネール高さ ST_image_H 60 60(自由) 同上
8.外周余白 win_margin 5 (自由) ブラウザ余白
----- - - - -----

1.2. 実際の大きさではなく仮想の大きさになります。高さのみ使用。
3. 両サイドの間隔は自由設定です。初期値は2、陰影の大きさはCSSで設定する。
4. 上部テキストエリアは、画像の上の高さです、タイトル、ページャー、クローズボタンの配置に合わせた高さになっています。ボタンを変更した場合は適正に変更ください。
(タイトルを常時表示するよう変更しましたので高さが大きくなります。HOVERタイトルは削除)
6. サムネール幅、7.サムネール高さは、サムネール画像のない場合に利用される大きさです。必ず読み込む画像に合うとは限りません。
8. 外周余白は、CSSでの場合全体の大きさ以上に陰影部分が大きくなるので余白を与えます。

サムネールがない場合は初期の設定値で始め表示して、拡大します(違和感はありません)。終了時には適正な大きさにして終了します。


HTMLからでも制御できる機能

項目 変数 初期値 変更 備考
グループ group_use use use none グループを有効にする
ページャーの使用 pager_use use use none group クラス設定2以上
MOVE/FADE切替 view_type move move fade エフェクトの種類
FADEモード fade_mode fade fade all move FADEの場合のみ
MOVE速度 move_speed 600 自由 400-1000
FADE速度 fade_speed 600 自由 400-1000
画像FADE速度 speed 1000 自由 FADEモード fadeの場合
クロスFADE速度 cross_speed 800 自由 クロスfadeの場合
Easing easing swing swing linear easeOutBounce easeOutBack 内部機能
位置指定 start_position image image center 画像位置、中央
自動ロードボタン autoload_use use use none スライドショウ
自動ロード時間 auto_time 8000 6000-10000 時間間隔
パネルの色 panel_color #FFFFFF 自由 #を付けること
ダミー画像用パス path image/ - ダミー画像フォルダまでのパス
- - - -

FADEモードは「MOVE/FADE切替」で「FADE」に設定されている場合のみ有効です。pathは直接JSで記載したほうが楽。


JSで設定できる機能

項目 変数 初期値 変更 備考
スタート位置 start_position center center image 中央、サムネール位置
ページャーの使用 pager_use use use none group クラス設定2以上
ページャーサムネール thumbview_use use use none ページャーの使用で有効
表示位置基準点 thumb_posX
thumb_posY
100
15
自由 サムネール位置
内部コントロール control_use none use none 画像エリア内部
下部コントロール control2_use use use none 下部ボックス内
下部ボックス使用 bottombox_use ues use none メモ表示
EM-TEXT emview_use none use none em タグ記載説明文
EM-TEXTの高さ emview_H 100 自由 自動が効かない
拡大FULLSIZE false true false 自由 常時拡大
拡大率 scale_ratio 1.2 1.2 - 2.0 FULLSIZE 5
拡大ボタンの表示 scaleup_use use ues none 下部ボタン使用
画像読み込み後の遅延時間 timeout 500 100-1000
FADE調整用時間 delaytime 200 自由 モードfadeの遅延
overlay使用 overlay_use use use none 色はCSSで変更
代替サブテキスト top_subtitle SUBTITLE 自由 ページャーなき場合表示
パネルの色指定 panel_color #FFFFFF 自由 CSS3形式のみ
外周ボーダー指定 border_use none use none ie CSSでも設定可能
----- - - - -----

初期状態では、ページャーの使用、コントロールの使用、など設定 use になっていますので、好みのものを選定ください。複数の設定でもかまいません。自由です。

1. スタート位置を指定できますが、モードによっては余り効果がありません、MOVE(move)の場合有効。但しページャーなど使用した場合に元の場所に戻らないことがあります。(move 以外は処理簡略)
2. コントロールは「prev/next」ボタンの表示です。2種類ありますので原則1つ設定します。使用しない場合は none にします。
3. ページャーは上部に番号付きリンクを表示します。(クラス設定2個以上)、ページャーHOVERでサムネールを表示可能です。group は追加機能です。グループ設定の在るものにページャーを表示します。
4. 拡大率は大きくすれば画面いっぱいに表示拡大します。PNG JPG画像の場合2倍にしてもキレイです。但しブラウザの大きさに自動であわせますので環境により効果のないときもあります。5倍位にすれば常時画面いっぱいの大きさで表示されます。
5. 拡大ボタンは、使用者が押すごとに拡大する仕組みです。拡大ボタンがあれば、拡大設定は無くとも結構です。これらは自由です。
6. timeout、は以前、伸縮を省略して表示することが「マレ」にあったので防止のために設定しました。画像LOAD終了後、表示まで少し遅延します。(JSでの画像挿入処理より、jQueryが早く先に進んでしまうのが原因とおもいます。)
7. パネルの色指定はJSで指定したほうが簡単です。但し文字が読みにくい場合は、使用者がCSSで変更ください。
8. 外周ボーダー指定も可能ですが、幅広の場合、角丸部分が合わなくなることがあります。線幅が大きいとRの部分に隙間がでるので使用者がCSSの四隅(tr tl br blクラス)を調整ください。
(IE7.8のみボーダー指定も可能ですから、陰影無き部分をボーダーで表現することもできます)


追加機能の説明


この説明は上の「HTMLからでも制御できる機能」「JSで設定できる機能」説明と重複しています。
POPS-iBOX-3Aと比較して、次ぎの点などが追加されています。大きな違いは「グループ化」できることです。


グループ設定タイプ、POPS-iBOX-3Cでの追加機能に「パネルの色」変更を追加しました。基本的には「3Cタイプ」と同じです。
通常の場合、画像をすべて取り替えなければなりませんが、CSS3処理のほうが「パネルの色」変更は簡単になります。

項目 変数 初期値 変更 備考
グループ group_use use use none グループを有効にする
サブタイトル top_subtitle ----- 自由 バランス用
ページャー形式 pager_btn number number btn ページャー形式指定
自動LOAD autoload_use use use none 自動ボタンの表示
自動LOAD時間 auto_time 8000 6000-10000 間隔の時間設定
Easing easing swing swing linear easeOutBounce easeOutBack 内部機能
パネルの色 panel_color #FFFFFF 自由 #を付けること
外周ボーダー指定 border_use none use none ie CSSでも設定可能
----- - - - -----

1. グループ指定を有効にします。グループの分類などを行います。
2. サブタイトルはページャー表示のない場合に表示されます。単なるバランスのため利用しています。
3. ページャー形式は、番号、ボタン画像の指定をおこなえます。「ボタン画像」指定の場合は使用者がCSSを訂正ください。
4. 自動LOADは表示を順次自動で行うモードです。「AUTO」入り切りボタンを表示しますので、「クリック」することにより「現在表示画像」の「次ぎの画像」を表示してゆきます。最後になれば1番目に戻ります。停止には「AUTO」ボタンを再度「クリック」する。又は、何らかのほかのボタン操作で解除になります。
5. 自動LOAD時間は「AUTO」の表示時間間隔です。初期値は8000ですから8秒後に次ぎ画像を表示、その後同じ間隔で作動します。
6. Easingはアニメ時のイージングです。swing linear はjquery内臓のイージング、easeOutBounce easeOutBack はこのJSの内臓のイージング機能です。easing.jsの読み込みは不要です。但し、イージングが機能するのは、view_type=move の時に限定されます。
7. パネルの色、CSS3でのパネルの場合のみ色の変更ができます。
8. 外周ボーダー指定 use でJSから実行します。線幅 border_v、線色 border_color、を記入のこと。線幅が大きいとRの部分に隙間がでるので使用者がCSSの四隅(tr tl br blクラス)を調整ください。
(ie 指定の場合は、IE7.8のみボーダー処理します。)、CSSでも設定可能です。
9.他のタイプ(pops-ibox-3a)では「位置指定」の場合、「戻り」で画像に戻らない場合がありましたが、move 指定の場合全て元画像、または現在表示されている画像にもどります。
常時タイトル表示に変更したので、HOVERタイトルは削除しています。


その他の説明など


クローズボタン

8種類用意しました。幅高さをCSSで変更して使用できます。ポジションは一定です。(PNG32陰影付き) closeXX_alpha.png

大きさ名前 25W
close20
25W
close22
25W
close25
25W
close28
40W
close40
40W
close42
50W
close50
50W
close52
サンプル画像

パネル構造

使用する際には関係のないことですが、pops-ibox-3iの場合他のものと比較して若干構造に違いがあります。ボタン類などを「#parts-base 階層」にまとめています。3a 3c の場合はまとめずバラバラに配置しています。
3a 3c の場合「#parts-base 階層」を作ると、階層の背景が邪魔をして「EM-TEXT」の「hoverアクション」が機能しなくなるため違う構造になっています。(マトメテ配置すると終了処理での削除が楽、CSS3で作成したほうが効率的です)

3a 3c のCSSをそのまま使用すると「ページャー要素」などで認識が悪くなることがあります。


注意事項

 

JSの書き換えなどは自由ですが、PNG陰影画像を使用せず、CSS3で角丸陰影を構成していますのでパネル全体の大きさ計算などの部分で若干違いがあります。修正などは自己責任でお願いします。


1. CSSでボタン位置などを変更できますが、画像形式など変更の場合には IE でアルファフィルターのバグのため壊れる部分が発生する可能性があります。使用者の自己責任で行ってください。
2. 動作にはマシン環境とページの環境などに大きく影響されます。設置は使用者の判断で行ってください。
3. 特に陰影の幅を大きくしますと負荷が大きくなりますので注意ください。
4. テスト的に制作したものですから、レイアウトなど変更になる場合があります。



 

ライセンス (GPL)


  1. jQuery自体が、「GPLライセンス」ですので、それに順次ます。
  2. 掲載されたパネル、Scriptの応用、書き換え、再頒布などについては、当方の許可を得ることなく全て自由に行えます。
  3. Scriptの応用などによる発生する弊害、損害などは自己責任でお願いします。
  4. jQueryを応用した単なるパネルのシステムですので、問題になる箇所などはほとんどないとおもわれます。

 

iBoxページに戻る


画像引用: TOYOTA(株) 壁紙などより引用しました。TOYOTA(株)


企画制作:POPS WEB KOUBOU