IIJmio(みおふぉん)
NURO光お得なキャッシュバック＆割引キャンペーン！

壁紙サンプラー・画像表示ポップウィンドウ [IE4,NN6 以上]

基本は背景画像のサンプル用ポップアップです。
縮小画像をポップアップウィンドウに実寸表示させたり、 素材配布などで壁紙などの実際のイメージをサンプルウィンドウで表示させるような時に使う物です。

ビジターの迷惑にならないようにポップアップウィンドウ等をどんどん複数作ってしまわず１つのウィンドウを再利用します。 また、元のページを移動した場合は、自動的にポップアップウィンドウもクローズさせます。

他のスクリプトと干渉しにくいように整理した為古いブラウザへの互換性がないと思います。 現在一般的に使われている、IE6以上、FireFox3、Netscape7、Safari3、Opera9では動作確認済みです。
(全てWindowsXP)

まずはサンプル

画像をクリックするとサンプルが開きます。
IEはポップアップウィンドウの幅250？、制限があるので、バータイプはリピートが見えてしますが・・・。 またサービス側でのポップアップの位置固定や何度も開閉する事の煩わしさを回避する為、 画像のサイズの違いをresizeTo()で実行していますが、ブラウザによってほんの少し画面の大きさの解釈が違ってしまいますが、 微調整はしていません。m(__)m

■例：壁紙素材



こちらは文字が邪魔にならないと思いますので、親切な「閉じる」ボタン付。

■例：サムネイル → 実寸表示

こちらは画像を拡大して写真などを見せる場合に文字を表示させずに、ウィンドウをクリックすると閉じるタイプ。

この画像サンプラーの場合は背景画像として表示させていますので、 画像の縦横サイズが違う物を表示する場合は、各画像からの呼び出しでそれぞれサイズ設定が必要です。 単に画像の実寸表示をしたい場合はスライドショー１で操作ボタンを非表示設定にして使う方が便利です。

コピーソース

■ [ HEAD内 JavaScript ]

■ [ 画像タグは普通に。必ずIDをつける IDに規則性は特に求めない ]
onclickイベントはJavaScript側のリスト記述で自動に付きますのでHTML内は画像タグだけでOK。 サムネイルなどの仮表示用画像でも、実際に使う画像を小さく表示させた物でも良い。

使い方

[ JavaScriptソース ]
HEAD内の一番最後のスクリプトとして貼り付けてください。

■表示画像の設定
/*
表示画像の設定用リスト
書式 BGSamp.sets('id','表示画像',幅,高,濃淡,ボタン); でリストアップする。
*/
この記述の下に、書式にのっとって画像IDやファイル名、サイズ等をリストします。

BGSamp.sets('id','ファイル(パス+名前)',幅,高さ,明暗,ボタン表示);

例：
BGSamp.sets('thumb1','./dblue15.jpg',150,300,1,1);
BGSamp.sets('thumb2','./dred20.jpg',200,300,1,1);
BGSamp.sets('thumb3','./ren03_s.jpg',200,300,1,1);
BGSamp.sets('thumb4','./artemis.jpg',250,250,1,0);
こんな感じで書式を守ってリストアップします。

■書式の詳細

ID
これはクリックされる画像タグにつけたIDです。
JavaScriptがそのIDのタグに自動でonclickイベントをつけます。
文字列なのでシングルクォートなどで囲んでください。

ファイル パス+ファイル名
これはポップアップ表示させる画像のURLです。
相対パスでもhttpからのURLでもOK。
クリックされる画像タグの画像と別の画像でも同じ画像でも必要な物を。
文字列なのでシングルクォートなどで囲んでください。

幅
これはウィンドウの幅(ピクセル)。半角数字。

高
これはウィンドウの高さ(ピクセル)。半角数字。

文字色
これは文字色を明暗どちらかにするかを半角数字で。
1が暗い画像用。0が明るい画像用。

ボタンタイプ
ボタンを表示させるか、ウィンドウクリックで閉じるか？です。
0がボタンなし。1がボタンありです。


■ 実際の文字色
スクリプト内にこの記述があります。
L:"#ffffff", D:"#000000",
これが 暗い背景用、明るい背景用のカラーです。
HTML用のカラー指定ですので自由に変更してください。

■ オンロード・オンアンロードに関して
BODY内に一切余計な記述をしないで済むように、 サムネイルの onclickイベントもスクリプトからメソッドで付ける様になっています。

従って他のスクリプトと同一オブジェクトの同一イベントと重なっても干渉せず、干渉されず動きます。 (この為に下位互換を切り捨てました)

■ グローバル変数
この配布スクリプトではBGSampと言う名前のグローバル変数を1個だけ使用しています。 この名前が他のスクリプトの変数名、関数名と干渉しないように注意してください。
BGSampが干渉する場合は、スクリプト内の全てのBGSampを干渉しあわない名前に変更して使用するか、 グローバル変数無しの方法に切り替えてください。

画像タグを収集してアルバム、スライドショー表示するような、同じ画像処理を行うスクリプトなどとは干渉して共存できない可能性があります。

■ グローバル変数なしの方法
このスクリプトの一番最初の行として
;(function(){
を付け足してください。
このスクリプトの一番最後の行として
})();
を付け足してください。

;(function(){
このスクリプト
})();

と言う状態になればグローバル変数を一切使用しない方法になります。
この記述方法が古いブラウザで理解できないだけなら良いのですが、 エラー表記と判断されるかどうかについては不明です。
現在の一般的なPCブラウザでは全く問題ありません。

■複数ページに使う場合
全部のページにスクリプトを直接書き込んでしまうのがが考えずに済む方法ですが、 どうせなら外部ファイルを併用した方がスマートです。

外部ファイルとして利用するには共通部分と、ページ別部分を分ける必要があります。 (画像が全てのページで同じものなら必要ありませんが、そんな使い方はないと思います）
またこの方法の場合はグローバル変数を使わない方法は使えませんので、 BGSampというグローバル変数を１個各ページで使用する事になります。

外部ソースファイルとして実行より先に読ませるスクリプト
例：bgs.js と言う名前にする。
/* 画像サンプラーオブジェクト */
var BGSamp = {

・・・・・・・・・・・

};
/* ページの onunload でPOPアップを閉じる */
BGSamp.addEvent(window,'unload', function(){ if(BGSamp.win && !BGSamp.win.closed){ BGSamp.win.close(); }});
この部分だけを外部ファイル化します。
インデントとコメントをつけてあるのでこの区間はわかると思います。

各ページに書き込むスクリプトは
<script type="text/javascript" src="./bgs.js"></script>
<script type="text/javascript">
/* 画像への onclickイベントの付加 */
BGSamp.addEvent(window,'load',function(){ if(document.getElementById){
/*
表示画像の設定用リスト
書式 BGSamp.sets('id','表示画像',幅,高,濃淡,ボタン); でリストアップする
*/
/*ここに各ページで使う画像のセットリスト*/

}});
</script>
ま、たいして短くなりませんが。。。
専用ページから申し込むと
So-netより高い３万円CB

案ずるより産むが易し
使ってみれば疑問も解決

XREA+ (plus) 206円/月
( お試し7日間 )

CORE SERVER 428円/月
( お試し15日間 )

ロリポップ 270円/月
( お試し期間10日間 )

ヘテムル 1620円/月
( お試し期間15日間 )

さくら 129円/月
( お試し期間2週間 )
無駄な高額ドメイン管理料金払ってませんか？

バリュードメイン
ムームードメイン

オートレース 競輪 toto 地方競馬 競艇 ＪＲＡ・即ＰＡＴイーバンクサービス ネットショッピングに！イーバンク銀行