iBoxページに戻る

 

POPS-iBOX-LITE. LightBoxタイプ (pops-ibox-lite.js) サンプル/保存形式UTF-8


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

 

POPS-iBOX-LITE 簡易伸縮タイプ

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

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

http://jquery.com/

 

POPS-iBOX LITE 簡易伸縮タイプ、サンプル DEMO


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




画像1

画像2

画像3

画像4

画像5
[サムネール無し画像]


 

[ IE6 ] には対処していません。
POPS-iBOX-LITE 簡易伸縮タイプです。フエードには対処していません。
レーヤーを使用しない場合は、パネル拡大表示中でも他のサムネールをクリック可能です。


スクリプトの特徴


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


<link rel="stylesheet" href="css/pops-ibox-lite.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-lite.js" /></script>

注意。設置サイトに既にjqueryが読み込まれている場合は、多少古くても作動しますので、複数の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({
	move_speed:600,//速度
	path:'images/'
},o || {});


レーヤーの色と透明度

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


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

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


タイトルなどの色の変更

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


 

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


説明図


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.サムネール高さ、は、サムネール画像のない場合に利用される大きさです。必ず読み込む画像に合うとは限りません。


注意事項

 

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


 

ライセンス (GPL)


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

 

iBoxページに戻る


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


企画制作:POPS WEB KOUBOU