iBoxページに戻る

 

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


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

 

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

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

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

http://jquery.com/

 

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


★ サムネール画像を CLICK して下さい、拡大します。画像その他を、押すことにより消去します。
(現在の設定は、view_type:fade、fade_mode:move、に設定されています。フエードしないようにもできます。)



jQuery 伸縮するパネル/4 角丸陰影画像を外周に配置した「伸縮するパネル」を利用して伸縮する「LightBox」の「シミュレーション」を行います。
画像1

画像2

画像3
POPS-iBOX-3A 伸縮フエードタイプです。「切り替え変更」が可能です
画像4
透過PNG画像を外周に配置したBOXがスムーツに伸縮します。
画像5
[サムネール無し画像]

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


スクリプトの特徴


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

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


<link rel="stylesheet" href="css/pops-ibox-3a.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-3a.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({
		view_type:'move',	//move fade
		fade_mode:'fade',	//fade all move
		move_speed:600,		//move速度
		fade_speed:600,		//fade速度
		speed:1000,		//画像fade速度
		path:'images/'
	},o || {});

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 伸縮とフエードを同時に行います。フエードと共にじょじょに大きくなります。


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-3a-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>

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


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

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


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の404行前後
items_box.delay(delaytime).fadeIn(o.speed,function(){

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


ローカルでのテスト

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


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

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

 

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


説明図


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からでも制御できる機能

項目 変数 初期値 変更 備考
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の場合
ダミー画像用パス path image/ - ダミー画像フォルダまでのパス
- - - -

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


JSで設定できる機能

項目 変数 初期値 変更 備考
スタート位置 start_position center center image 中央、サムネール位置
ページャーの使用 pager_use use use none クラス設定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でサムネールを表示可能です。
4. 拡大率は大きくすれば画面いっぱいに表示拡大します。PNG JPG画像の場合2倍にしてもキレイです。但しブラウザの大きさに自動であわせますので環境により効果のないときもあります。5倍位にすれば常時画面いっぱいの大きさで表示されます。
5. 拡大ボタンは、使用者が押すごとに拡大する仕組みです。拡大ボタンがあれば、拡大設定は無くとも結構です。これらは自由です。
6. timeout、は以前、伸縮を省略して表示することが「マレ」にあったので防止のために設定しました。画像LOAD終了後、表示まで少し遅延します。(JSでの画像挿入処理より、jQueryが早く先に進んでしまうのが原因とおもいます。)


注意事項

 

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