iBoxページに戻る

 

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


このスクリプトは 新しい形式のパネルを用いたライトボックスです。(3年以上前から原型はあったがIE6に対応できなかった)
[IE6]には対処しないことにより、簡単なパネル構造を作れますので以前より簡単になります。IE7で多少問題はでますが、時期的に[IE6.7]を対象外にしてもよろしいかと思います。
尚、このJSは IE7 に対応しています。

 

POPS-iBOX-3C 伸縮フエードタイプ

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

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

http://jquery.com/

 

POPS-iBOX-3C 伸縮タイプ、グループ化サンプル DEMO


★ サムネール画像を CLICK して下さい、拡大します。画像その他を、押すことにより消去します。
(現在の設定は、view_type:"move"、group_use:"use"、pager_use:"group"、に設定されています。グループ解除、フエードするようにもできます。)



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


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

[サムネール無1]

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


[ IE6 ] には対処していません。
POPS-iBOX-3C 伸縮フエードタイプです。「切り替え変更」が可能です。POPS-iBOX-3Aをベースに機能を強化しました。
レーヤーを使用しない場合は、パネル拡大表示中でも他のサムネールをクリック可能です。
外観も何ら前のiBoxと変わりはありませんが、単純化して機能を少しだけ追加しました。
POPS-iBOX-3Aとの違いは、グループ化、自動表示(スライドショウ)機能をつけたのが大きな違いです。その外多少違いあり。


スクリプトの特徴


  1. 画像拡大フエード専用です。設定変更ができます。
  2. 透過PNG画像を外周に配置したBOXがスムーツに伸縮します。
  3. 環境の良くない場所、スペックの良くないマシンでもスムーツに伸縮します。
    (Chromeでの閲覧推奨)
  4. サムネールが無くともOKです。
  5. 以前の iBox 拠り簡略化しています。構造もかえました。
  6. グループ化できます。自動表示(スライドショウ)機能をつけました。
  7. 画像切り替えをクロスフエードにしました。

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


・対応ブラウザ、IE7.8 Safari Firefox Chrome Opera (IE9未確認)


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


<link rel="stylesheet" href="css/pops-ibox-3c.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-3c.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を設定ください。


//ダミー画像
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";


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

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


	//option
	var o=$.extend({
		group_use:"use",	//use none
		pager_use:"group",	//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
		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 は各々のアニメ速度です。画像の大きさ、状態などにより自由に設定できます。


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

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


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


レーヤーの色と透明度

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


パネルの色を「黒」にしたい場合

部材を「黒」用のものも内包しましたので、CSS、pops-ibox-3c-bk.css を読み込んでください。
JS側読み込み、ダミー画像も黒色の center_black.png に変更ください。


タイトルなどの色の変更

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


AlphaImageLoaderフィルターの設定 (参考)

原則、FADE処理しなければフィルターは必要としませんが、色々な表示モードがありますので、最初からフィルター処理を行っています。

背景画像での標準的な「AlphaImageLoaderフィルター」処理記述例

background と filter でのURLの記述が違う。判らない場合は「絶対パス」を記述する。その後背景画像を削除する。


.xxxxxx {
	background: transparent url("../images/xxx.png") repeat-x;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/xxx.png',sizingMethod='scale');
	background-image:none;
}

但し、このJSでは、背景画像の削除をJS側でおこなっています。


タイトルとメモの表示

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.「グループ」になっていないものは、従来と同じです。「シミュレーション2」で確認ください。


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



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


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

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


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

通常は番号付きの html を出力しますので、「ページャー形式指定」で btn にしてください。番号なしの html を出力します。
CSSは使用者が書き換えます。下に一例を示します。色は背景色をかえて変化させています。



/* 画像ボタン */
#pops-ibox #pager-wrap .ibox-pager {
	display:block;
	width:10px;
	height:10px;
	margin-left:2px;
	padding:0;
	background:url("../images/imgbtn_w.gif") no-repeat;
	float:left;
	cursor:pointer;
}

float:left;に注意のこと
黒用は、imgbtn_bk.gif

画像無でも使用可能。「ボタン」の大きさを小さくすれば沢山並ぶことになる。設定は自由です。


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以前のバージョンでも使用できるようになります。


JSの526行前後
items_box.delay(delaytime).fadeIn(o.speed,function(){

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


Easingの指定

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

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


ローカルでのテスト

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


シミュレーション

設定変更による変化などは、次の「シミュレーション」で実際に体感できます。
「シミュレーション2」はPOPS-iBOX-3C用。「シミュレーション」はPOPS-iBOX-3A用になります。

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

 

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


説明図


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


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

4.上部テキストエリアは、画像上の高さです、クロースボタンの配置に合わせた高さになっています。ボタンを変更した場合は適正に変更ください。
6.サムネール幅、7.サムネール高さは、サムネール画像のない場合に利用される大きさです。必ず読み込む画像に合うとは限りません。

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


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 内部機能
ダミー画像用パス 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で変更
----- - - - -----

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

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


追加機能の説明


POPS-iBOX-3Aと比較して、次ぎの点などが追加されています。大きな違いは「グループ化」できることです。


説明図


グループ設定タイプ、3cでの追加機能

項目 変数 初期値 変更 備考
グループ group_use use use none グループを有効にする
HOVERタイトル hovertitle_use use use none HOVERタイトルを有効にする
ページャー形式 pager_btn number number btn ページャー形式指定
自動LOAD autoload_use use use none 自動ボタンの表示
自動LOAD時間 auto_time 8000 6000-10000 間隔の時間設定
Easing easing swing swing linear easeOutBounce easeOutBack 内部機能
----- - - - -----

1.グループ指定を有効にします。グループの分類などを行います。
2.HOVERタイトルは通常ページャー表示の場合表示しませんので。トップエリアHOVER時にタイトルを表示します。
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.他のタイプ(pops-ibox-3a)では「位置指定」の場合、「戻り」で画像に戻らない場合がありましたが、move 指定の場合全て元画像、または現在表示されている画像にもどります。


注意事項

 

JSの書き換えなどは自由ですが、このパネルは原則 IE で、透過(フエード)には対処できません。IE7 8で陰影部が黒くなります。またIE7では画像を表示できない状態になります。そのために、フエードに対処できるように工夫しています。
詳細は、当方の「ブログ記事」を参照ください。


【参考】当方のブログ記事: jQuery pops-ibox用パネルの特性とフエードの対処


CSSでボタン位置などを変更できますが、画像形式など変更の場合には IE でフィルターのバグのため壊れる部分が発生する可能性があります。使用者の自己責任で行ってください。



 

ライセンス (GPL)


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

 

iBoxページに戻る



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


企画制作:POPS WEB KOUBOU