POPS WEB KOUBOU

POPS-SPLIT-PHOTO

前のページに戻る (index)

SPLIT-PHOTO 縦横自動可変分割タイプ、サンプル

---

[[ このスクリプトは jquery-1.4.2 を使用しています。(jquery-1.4.4 可動検証済み) ]]

SPLIT-PHOTO (POPS-SPLIT-PHOTO) DEMO (split-photo.js) / 800x200

 

[[ AUTO split8 ]] Split Free / CycleTime 6000 が設定されています。

下のような画像5枚が順次、AUTOで表示されます。最終画像に行きますと最初の画像に戻ります。

 

スクリプトの特徴

1. 使用目的として、TOPページ用途の大型画像エフェクト専用です。
2. 多彩なスライスエフェクトを実現します。
3. 簡単に画像の大きさ設定(CSS変更)が出来るようにしました。
4. スライス画像専用ですが、エフェクトは組み合わせ次第では、100種類以上あります。
5. 標準、2-8スライス画像エフェクト、または固定(2x2) 4分割画像の組み合わせ。(スライス数、増減可能)
6. 多少の設定速度の変更は可能です。
7. 横長画像に最適化されています。横長画像以外の比率のものには若干違和感があります。

対応ブラウザ(検証済みブラウザ)

・対応ブラウザ
IE6+ Safari(4.0.4)+ Firefox(3.5.5)+ Chrome(5.0.375.99)+ Opera(10.53)+

DOWNLOAD

POPS-TRANSITION シリーズ POPS-SPLIT-PHOTO (split-photo.js)

 

POPS-SPLIT-PHOTO DOWNLOAD....................
[ split-photo.zip ] ( HTML画像を含むサンプル一式 )
800x200画像 JS (split-photo.js) 13.5KB / ZIP 238KB

 

 

DOWNLOAD ZIP に含まれる内容

1. サンプルには、jquery-1.4.2.min.js が内包されています。
2. 該当の、TRANSITION などの JS CSS 一式。
3. 該当の、サンプル画像など、一式。
4. サンプルＤＥＭＯ html。
5. ＪＳに説明のはいったテキスト。参考にしてください。

jquery.com より最新の jquery を DOWNLOAD する。

http://jquery.com/

 

設置方法

[ 1 ] ＨＴＭＬ設定

jQuery共通のプラグインの設置方法ですから、ほとんど他と変わりません。

★次のように本体HTMLに、画像表示の基礎となるHTML構造を挿入して使用します。

画像を表示する場所に次のＨＴＭＬを挿入します。

1-1 ＨＴＭＬ構造を作る

ＤＥＭＯでの設定例 ( 標準分割数 8 )

標準のＨＴＭＬの使用例です。但し画像は全て先にきに読み出しておく操作がおこなわれます。一般に画像数が少ない場合です。
最初の画像のみ、ＨＴＭＬに埋め込み、大きさを設定します。

<div id="pops_transition">
	<div id="transition_box" class="photo_trans">
		<div id="transition_base"><div id="imgholder"><img src="images/photo_t01.jpg" width="800" height="200" /></div>
			<div id="slice_base">
			</div>
			<div id="count_data"></div><div id="loading"></div>
		</div>
	</div>
</div>

1-2 最初に表示する画像の設定

最初に表示する画像のURLなどを書き入れます。その他の画像はＪＳで一括プリロードします。
プリロード画像は、ＪＳの初期設定、またはＨＴＭＬからＪＳ実行時に、受け渡しのデータとして記入します。

★ img src="画像のURL" width="画像の幅" height="画像の高さ" 、重要です。

<div id="transition_base"><div id="imgholder"><img src="画像のURL" width="画像の幅" height="画像の高さ" /></div>


表示する画像情報をＨＴＭＬに記入します、継続する画像の幅高さは同じ大きさです。

 

[ 2 ] CSS 読み込み設定

★次のようににHTML head に記入して読み出す。

jQuery動作には、先にＣＳＳを読み込むことが前提となっています。

split-photo.css

<link rel="stylesheet" href="css/split-photo.css" type="text/css" media="all" />

 

[ 3 ] CSS の変更設定

・初期段階では、800x200 画像の大きさになっていますので、使用する大きさ(wtdth height)に変更します。 ・split-photo.cssの画像サイズに該当する部分を、使用する画像サイズとあわせます。
・ＪＳの初期設定、画像サイズをともに変更ください。ＪＳ実行時の受け渡しデータに記入しても同じです。
・ＪＳでのCSS変更機能で、自動で画像サイズ部分変更が可能です。
・ＩＥ8以外ではz-indexが必要ではありませんが、ＩＥ8で要素の認識が出来ない部分があり、z-indexを設定しています。
★変更部分は画像サイズに該当する部分だけです。その他はサイズ以外変更しないでください。

※ 特に、HEAD部分に埋め込む場合は「z-index設定」に注意ください。旨く行かない場合があります。ＣＳＳ変更などは使用者の責任で行ってください。

用意する画像 など

項 目	1. 画像	2.	3.	備考
1. 使用する画像	JPG. PNG GIF画像	大きさは自由		横長画像推奨
2. LOADING画像	loading.gif	---	付属画像	取替え可能

 

[ 4 ] JS 読み込み設定

★jQuery-1.4.2以上が必要です。jQueryのdelay()を使用していますので、1.4.2以下では作動しません。
また、jQueryプラグイン動作には、先にjQueryを読み込むことが前提となっています。

jquery-1.4.2.min.js split-photo.js

<script type="text/javascript" src="js/jquery-1.4.2.min.js" /></script>
<script type="text/javascript" src="js/split-photo.js" /></script>

★注意、タイプ違いのＪＳでも、ＪＳ構造、ＣＳＳ設定がほとんど共通なため、1ページ当たり、1つのＪＳのみの使用になります。

 

[ 5 ] JS split_photo()の実行

HTML head 部、または、hooter 部以降で実行させます。

★通常の実行。
何も引数を渡しませんので、ＪＳの初期設定が実行されます。

<script type="text/javascript">
$(function(){
	$(document).split_photo();
});
</script>

---------------------------------------------------------
★初期値を一部変更して実行。
引数を渡しますので、記入したものは、ＪＳの初期設定に上書きされます。
通常はＪＳ側の初期設定を書き換えるのが通常です。引数を渡しで変更するのは途中変更がある場合です。
値は { } の中に書く形で受け渡します。

<script type="text/javascript">
$(function(){
	$(document).split_photo({
		imageWidth:600,
		imageHeight:300,
		preloaddata:'photo1.jpg,photo2.jpg,photo3.jpg,photo4.jpg,photo5.jpg',
		path:'http//:xxx.com/images/'
	});
});
</script>

---------------------------------------------------------
★初期値を全て変更して実行。

<script type="text/javascript">
$(function(){
	$(document).split_photo({
		imageWidth:600,
		imageHeight:300,
		split:5,
		speed:800,
		cycle_time:8000,
		loading_use:'',
		auto_edit_use:'',
		effect_type:'random',
		preload_use:'',
		preloaddata:'photo_t11.jpg,photo_t12.jpg,photo_t13.jpg,photo_t14.jpg,photo_t15.jpg',
		path:'home/images/'
	});
});
</script>

effect_typeは使用していません

---------------------------------------------------------
★ path を設定しないで、パス付きの preloaddata を縦に書く。
見やすいので、書き間違いを防げる

<script type="text/javascript">
$(function(){
	$(document).split_photo({
		imageWidth:600,
		imageHeight:300,
		preload_use:'use',
		preloaddata:'
			http://www.xxx.com/images/photo_t11.jpg,
			http://www.xxx.com/images/photo_t12.jpg,
			http://www.xxx.com/images/photo_t13.jpg,
			http://www.xxx.com/images/photo_t14.jpg,
			http://www.xxx.com/images/photo_t15.jpg',
		path:''
	});
});
</script>

上の例では path:'' にして、画像全てに http://www.xxx.com/images/ をつけた
[ , ]の付ける場所に注意

---------------------------------------------------------
★引数渡しの書式
{プロパテイ1:値1,プロパテイ2:値2,プロパテイ3:値3}

のように変更をすることができます。複数の「引数を渡し」は , で区切ります。
但し最後に「 , 」をつけませんので注意ください。

★画像パスの変更
path:'images/'
path:'http//:xxx.com/images/'
等と、実行するＨＴＭＬを基点としてのパスを記入します。判らない場合はhttp//:での絶対パスを記入ください。

 

[ 6 ] JSでの初期値の書き換え変更

初期値は次のようになっています、下記の説明表などを参考にして書き換えが可能です。

---前後略す---
var o = $.extend({
	imageWidth:800,
	imageHeight:200,
	split:8,
	speed:600,
	cycle_time:6000,
	loading_use:'use',
	auto_edit_use:'use',
	effect_type:'random',
	preload_use:'use',
	preloaddata:'photo_t01.jpg,photo_t02.jpg,photo_t03.jpg,photo_t04.jpg,photo_t05.jpg',
	path:'images/'
}, o || {});


---前後略す---

JS側の初期設定値を書き換えたほうが便利です。

★JS側の初期設定値を書いているので実行の場合はＨＴＭＬを

<script type="text/javascript">
$(function(){
	$(document).split_photo();
});
</script>

だけでよいことになる。

---------------------------------------------------------
★設定の基準
use の場合は use を記入、反対の場合は適当な文字 no 、または入れない ''。

1. 数値型 そのまま記入
2. 文字型 '' または "" でくくる
3. 複数型 preloaddataのように データを , で区切る

★ imageWidth、imageHeight、重要です。

	imageWidth:800,
	imageHeight:200,

 

[ 7 ] 以上をまとめて書けば

次のようになる。（Shift_JIS）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>SPLIT-PHOTO</title>
<link rel="stylesheet" href="css/xxxx.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/split-photo.css" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js" /></script>
<script type="text/javascript" src="js/split-photo.js" /></script>
<script type="text/javascript">
	$(function(){
		$(document).split_photo();
	});
</script>
<head>
<body>

<main>
<div id="pops_transition">
	<div id="transition_box" class="photo_trans">
		<div id="transition_base"><div id="imgholder"><img src="images/photo_t01.jpg" width="800" height="200" /></div>
			<div id="slice_base">
			</div>
			<div id="count_data"></div><div id="loading"></div>
		</div>
	</div>
</div>

</main>
</body>
</html>

・以上で通常動作しますが、旨く行かない場合は、JS CSS 画像パス など確認ください。
・DOCTYPE が変わってもほとんどＣＳＳは position:absolute で書かれていますので大丈夫とおもいます。狂う場合は使用者がＣＳＳを変更ください。(#pops_transition のＣＳＳを変更すれば直るはず)
・ＩＥ8のため、z-index は 1000 から始まっています。都合の悪い場合は数値を変更ください。

 

[ 8 ] 設置環境に合わせて、JS CSSテキストの保存文字型変更が必要な場合があります

【重要】、jQuery以外、全てJISのテキストですので、使用環境に応じて適切に書き換えてください。

エンコードなどを行っても構いません。

1. 資料の HTML JS CSS は全て「Shift_JIS」文字コード。
2. jQueryは本家よりダウンロードしたときのままです。

テキストの書き換えには、TeraPad が便利です（フリーウエア）。
TeraPad FREEテキストエディタ

 

 

スクリプトの設定資料

標準設定参考図（ＰＡＧＥＲのないタイプ）

★ 初期 CSS 設定では、ＢＯＸ各部にボーダー設定はありません。必要な場合は、使用者がＣＳＳの変更をしてください。

JSの初期設定です。使用条件などを考慮して各自変更してください。2種の方法があります。
1. JS の初期設定を直接書き換える。(上の [ 6 ] JSでの初期値の書き換え変更参照)
2. JS split_photo() 実行時に初期設定を変更する。(上の [ 5 ] JS split_photo()の実行参照)
3. 単純な使用目的のため、初期設定など最小限にしました。

初期設定資料

資料、[ 設定のまとめ表 ]

項目	1. 変数名	2. 初期値	3. 設定	備考
1.画像の大きさ(W)	imageWidth	800	寸法は自由	重要、必ず記入ください
2.画像の大きさ(H)	imageHeight	200	寸法は自由	重要、必ず記入ください
3.分割数	split	8	自由	5-12位
4.アニメ速度	speed	600	自由	400-800
5.サイクルタイム	cycle_time	6000	自由	5000以上
6.loading画像を使用する	loading_use	use	自由	場合により使用しない
7.自動でＣＳＳを修正	auto_edit_use	use	自由	必要部分のW Hを修正
8.Effectのタイプ選定	effect_type	random	random	変更できません
9.プリロードを実行する	preload_use	use	(use)	画像プリロードする場合
10.プリロード画像	preloaddata	photo_t01.jpg,.......	使用画像を	必ず設定ください
11.画像までのパス	path	images/	フォルダまでのパス	必ず設定ください
--------	-	-	-	-

use 設定部分は使用するなら use 、使用しないなら use 以外の文字、または何も書かない。例 an-use no none tukawanai ''

 

下記の説明表などを参考にして書き換えが可能です。

1. imageWidth: 画像サイズ、横幅、または表示サイズ。
2. imageHeight: 画像サイズ、高さ、または表示サイズ。参考、[ 9 ] 画像サイズをかえないで表示サイズだけ変更したい
3. split: 分割数 (最大分割数)、標準8。5-12位の値を設定する。分割数を増やしても効果が出ない場合もあります。
4. speed: 標準 600 です。400-800 位が最適です。
5. cycle_time: 標準 6000 です。注意、スライスを動かしているため 5000 以下には出来ません。アニメ speed を長くした場合、またはスライス要素を 8 以上の場合などには、修正する必要があります。
6. loading_use: Loading 画像は無くとも、使用に差し支えありませんので、非表示にすることも可能です。
   ( Loading 画像は好みのものと取替えられます。ＣＳＳはそのままで中央表示になります )
7. auto_edit_use: 編集機能 auto_edit_use は画面の大きさなど簡単な部分を自動で修正します。(主に幅、高さのみ変更)、設定なしの場合はＣＳＳで直接書き換えます。詳細は下の説明参照。
   ＣＳＳの変更は基本的には、幅と高さだけの変更ですから、簡単ですが、、。
8. effect_type: はスライス画像専用ですので、エフェクトは 1 種類だけですので、random を記入ください。
9. preload_use: プリロードを使用するは、通常 use ですが、PAGER 設計上またはＪＳに直接記入している場合など状況によっては設定しません。自動で解除なる場合もあります。
10. preloaddata: は表示する画像を書き込んでください。画像の大きさは一定です。(ＪＳに直接記入も可能)
11. path: プリロード画像へのパスを記入します。判らない場合は http:// で始まる絶対パスを記入ください。

 

編集機能 auto_edit_use を使用して画像の大きさを変更する

auto_edit_use を有効 (use) にしてＣＳＳを書き換えないで画像の大きさを変更できます。画像の幅高さだけですが、、、

1. JS設定の 幅 imageWidth 高さ imageHeight の大きさに変更されます。
2. 使用する画像サイズと違う、幅 imageWidth 高さ imageHeight の大きさに設定した場合は「設定値」で表示動作します。
3. 全てのＣＳＳを自分で変更する場合は auto_edit_use を無効にしてください。(標準では有効になっています)
4. スクリプトのタイプにより変更される部分が違うことがあります。

 

[ 7 ] 設置環境に合わせて、JS CSSテキストの保存文字型変更が必要な場合があります

【重要】、jQuery以外、HTML JS CSS は全て日本語文字コードでかいてあります。動作環境により書き換えが必要な場合があります。
エンコードなどを行っても、おなじです。

1. 資料の HTML JS CSS は全て「Shift_JIS」文字コード。
2. jQueryは本家よりダウンロードしたときのままです。

テキストの書き換えには、TeraPadが便利です（フリーウエア）。
TeraPad FREEテキストエディタ

 

---

 

 

 

スライス動作図と説明、その他スクリプトの設定資料

---

スライス動作図と説明

[ 1 ] 分割状況 ( 標準2-8分割 ランダム表示)

 

[ 2 ] スライドの状況 (ランダム表示)

 

[ 3 ] 2x2 (4) 分割の状況

 

[ 4 ] 画像変化のＩＮとＯＵＴ (ランダム表示)

 

[ 5 ] 分割された部品の表示時間差 (ランダム表示)

 

以上簡単にスライス要素の動きなどを説明しました。実際には 10-20 分間作動させて確認ください。

タイプによっては、スライス要素の動きに若干差をつけたものもあります。基本的には同じようなものです。

注意、jQuery delay() を使用して時間差を制御していますので、バージョン1.4.2以上を使用ください。

 

 

配置状況と変更の方法

[ 1 ] スライス要素の増減

標準では最大8スライス要素ですが、増減が可能です。(増しても10-12要素くらい、増やしても変化はあまりない)
JSの設置を変更すればスライス要素を増減できます。下記の初期設定値を書き換えてください。

★ 5-12 位の範囲で使用ください。

JS初期設定に分割数設定があります

//★分割数 標準8
split: 8,

画像の大きさ、要素数によってはアニメ速度( speed ) 、
サイクルタイム( cycle_time )を変更したほうが良い場合があります

2x2分割があるので実際には、最低4分割されますが、使用に際しては設定分割数の範囲で表示されます
1分割は通常実行されません。他の分割に修正されます

注意、このタイプではＪＳの設定を変更しますが、スライス要素の増減を直接ＨＴＭＬに記述する形式もあります。

[ 2 ] 外側ＢＯＸの機能

外側ＢＯＸである、#pops_transition は通常PAGER収納などに使用されますが、このタイプはPAGERがありません。よって削除しての使用も可能ですが、そのまま使用ください。

基本ページのＣＳＳの設定次第では表示が崩れる場合がありますが、#transition_boxのＣＳＳは変更できませんので、外側ＢＯＸ、#pops_transition で吸収訂正することができます。

#pops_transition #transition_box CSS

中央表示になるように次のようになっている

#pops_transition {
	text-align:center;
}
#transition_box {
	margin:0 auto;
	text-align:left;
}

★本来のページＨＴＭＬ構造などに合わせるため、ＣＳＳを変更する必要がある場合は修正ください。

外側ＢＯＸだけ編集機能で寸法設定をしないようにする。

レイアウトなどの都合で外側ＢＯＸの幅高さを編集機能で変更させたくなく、使用者がＣＳＳで設定したい場合があるかとおもいます。
下のように処理している部分を変更すればよい。

---前後略す---

//init初期実行
var init = function () {

	//大きさ変更の場合関連寸法を自動修正する、useの場合のみ
	if (o.auto_edit_use == 'use') {
		//外枠
		$('#pops_transition').css({'width':bs_W,'height':bs_H});
		//transition_box
		$('#transition_box,#transition_base,#slice_base,#imgholder,#imgholder img').css({'width':bs_W,'height':bs_H});
		loading.css({'width':bs_W,'height':bs_H});//loading
	}

	---前後略す---
}

★外枠だけ編集機能から除外する方法

//外枠
//$('#pops_transition').css({'width':bs_W,'height':bs_H});

//をつけて実行しないようにする

スクリプトなどの変更書き換えは自由です。自己責任で行ってください。

 

[ 3 ] ＬＯＡＤＩＮＧ表示画像の使用について

 

[ 4 ] 画像の「一括プリロード」などを簡単にする

4-1 プリロード省略

画像処理の関係でサイクルタイムが 5000 以上と長いのが特徴です。そのためプリロードをオフにする。JSの設定をかえます。
1. 初期設定の preload_use:'use' 設定をプリロードしないように '' にします。
2. 画像データは普通に書き込みます。プリロードは機能しませんが、画像データは配列にセットされます。
3. path が設定なっているのを確認します。

★注意、プリロードしないので最初、画像ＬＯＡＤに時間がかかる場合があります、あまり遅いとタイマーにより、次の画像読み込みにスキップします。

 

4-2 直接画像データをＪＳに書き込む方法

直接画像データをＪＳに書き込む方法があります。
1. 直接書いているので、画像データは変更できません。
2. preload_use:'use' 設定は可能です。
3. 初期設定、preloaddata:'' でよい。
4. JS内部に画像データを直接書き込む。
var preloaddata = ['画像名を書く', ....................]; 先頭の // を削除して有効にする。

画像の名前だけの設定ですが、直接画像指定で表示しているのではなく、★imgPreloaderオブジェクトを利用していますので、読み込み可能です。その都度1枚ずつ処理していることになりますが、、、
画像表示を一巡しますと、結果的にはプリロードしたと同じ理屈です。

★変更前

---前後略す---

	//preload
	var preloaddata=[];
	//画像URLを配列に格納
	preloaddata = o.preloaddata.split(",");

---前後略す---

★変更後
	//preload
	var preloaddata=[];
	//画像URLを配列に格納
	//preloaddata = o.preloaddata.split(",");
	preloaddata = ['photo_t01.jpg','photo_t02.jpg','photo_t03.jpg','photo_t04.jpg','photo_t05.jpg'];

文字列である o.preloaddata を配列 preloaddata に格納している処理を、直接配列に画像(ＵＲＬ)情報をかいているだけ

 

[ 5 ] 違う階層(違うURL)の画像をプリロードする

通常は同じ path 階層から画像をＬＯＡＤします。つまり同一階層からしかＬＯＡＤできないことになります。
これでは不都合な場合、全ての画像データに path を書き込めばよい。
1. ＪＳの path を解除して、設定しない。path:''
(中身を書かない。スペースもあれば機能しないので注意のこと。)
2. preloaddata に画像までのパスを加える。preloaddata:'画像までのパス/photo_t01.jpg,画像までのパス/photo_t02.jpg,------------',
3. 横に書くと間違いやすいので、縦に書くと簡単だ。

JSの初期値に書いた例

preloaddata:'
	http://www.xxx.com/photo_t01.jpg,
	http://www.xxx.com/images/photo_t02.jpg,
	http://www.yyy.com/img/photo_t03.jpg,
	images2/photo_t04.jpg,
	index/image/photo_t05.jpg,
',

★パスがわからない場合は、http:// で始まる絶対パスで書けば良い

 

[ 6 ] 出現率の変更

6-1 通常分割要素(slise)と、2x2要素(slise4)の 出現率の変更

---前後略す---

//slice4の出現率 1/10
var random_nm = ['slice4','slice','slice','slice','slice','slice','slice','slice','slice','slice'];
---前後略す---

★slice4を増やせば、2x2要素の出現率がＵＰする
例 var random_nm = ['slice4','slice4','slice4','slice','slice','slice','slice','slice','slice','slice'];
例 var random_nm = ['slice4','slice','slice','slice','slice','slice','slice'];

6-2 IN OUTの 出現率の変更

★2箇所あります、現在、出現率は 50％、50％ です

//slice_image 2-8分割
function slice_image() {
	---前後略す---
	var in_type_nm = ['in','out'];
	---前後略す---
}

例 var in_type_nm = ['in','out','in']; 
例 var in_type_nm = ['in','out','in','in','in'];

//slice_image4 2x2分割
function slice_image4() {
	---前後略す---
	var in_type_nm = ['in','out'];
	---前後略す---
}

例 var in_type_nm = ['in','out','in']; 
例 var in_type_nm = ['in','out','in','in','in'];

★in out を変更、または増やせば出現率が変わる

 

[ 7 ] 1分割を使用したい (そのままの大きさの画像)

	//slice_image 2-8分割
	function slice_image() {

		//2-8分割/1でもＯＫ
		var box_len_v = Math.floor(1 + Math.random() * box_len) || 0;
		//1分割なら中間値にする/増減を考慮
		if (box_len_v < 2) {
			//box_len_v = 5;
			box_len_v = Math.floor(box_len/2) + 1;
		}
		box_len2 = box_len_v;

		//分割数の文字を表示
		//text_set(box_len2);

		---前後略す---

	}

	本来は1が出るようにしているが、標準では補正している
	★次のように処理しないように//を入れる

		//if (box_len_v < 2) {
			//box_len_v = 5;
			//box_len_v = Math.floor(box_len/2) + 1;
		//}

------------------------------------------
5分割に補正、標準の場合使用している
box_len_v = 5;
ほぼ中間値に補正、分割数を変更した場合使用している
box_len_v = Math.floor(box_len/2) + 1;

テストで、分割数の文字を表示、デバックなどに使用可能です/実際使用する場合は無効にする
text_set(box_len2);

 

[ 8 ] imgPreloaderオブジェクトを生成して画像をLOADしています

 

[ 9 ] 画像サイズをかえないで表示サイズだけ変更したい

表示させるページの幅とあわない。場所を移動したら幅とあわない。画像の大きさはそのままで、、、寸法を合わせられないか

画像ですから縦横の比率を同じにして計算します
高さの計算 700/800*200=175

<div id="transition_base"><div id="imgholder"><img src="images/photo_t01.jpg" width="800" height="200" /></div>
HTMLを変更
<div id="transition_base"><div id="imgholder"><img src="images/photo_t01.jpg" width="700" height="175" /></div>

ＪＳ設定を変更
imageWidth:700
imageHeight:175

これで画像だけ縮小(拡大)して表示できます、但しブラウザにより負荷がかりますし、ＩＥでは画像にギザギザが出る場合があります。
出来るなら新しい画像サイズのものをＵＰすればよいのですが、修正表示は可能です。

画像サイズをＢＯＸの状況しだいであわせられない場ああがあるので、下の方法を使った。
秘密はLOAD完了処理後、画像サイズをかえていることです。★imgPreloaderオブジェクトの場合可能。

//★imgPreloaderオブジェクト画像LOAD
var imgload = function() {

	---前後略す---

	//画像はimgPreloader生成
	imgPreloader = new Image();
	//LOAD完了処理
	imgPreloader.onload = function() {

		---前後略す---

		//★Load画像サイズを表示画面サイズにあわせる
		if (imagesizu_fit == 'fit') {
			imgPreloader.width = bs_W;
			imgPreloader.height = bs_H;
		}

	---前後略す---

	}
	---前後略す---
}

参考まで記述しました。

 

[ 10 ] 文字を表示できないか。

現在、文字表示には対応していません。
但し、簡単な文字を表示する領域は構造の中にあります

ＪＳのなかで、次を実行します。画像ＬＯＡＤで中身はクリアされます

text_set("表示したい文字");
あるいは
text_set(表示したい変数名);

利用しての改造は自由です。主にデバックに使用しています。

 

---

 

以上、変更などについて解説しました。ローカル環境でテストしてからＵＰすれば確実とおもいます。
説明以上のＪＳの変更を行うには、自己責任で行ってください。
なお、ダウンロードには、ＪＳに説明の入ったＴＥＸＴが内包されています。参考にしてください。

 

---

 

 

ライセンス (GPL)

Scriptの応用、再頒布などについて

1. jQuery自体が、「ＧＰＬライセンス」ですので、それに順次ます。
2. 掲載されたScriptの応用、書き換え、再頒布などについては、当方の許可を得ることなく全て自由に行えます。
3. Scriptの応用などによる発生する弊害、損害などは自己責任でお願いします。
4. jQueryを応用した単なる画像エフェクトシステムですので、問題になる箇所などはほとんどないとおもわれます。
5. より良きものにして頂くため、改良、ＣＳＳ箇所の発展改良、エフェクト画像の改良などして頂き、発表される事を強く望みます。

 

画像引用: TOYOTA(株) ギャラリー、アーカイブギャラリー、より引用しました。http://ms.toyota.co.jp/jp/F1archive/

前のページに戻る

---------------------------------------------------------
Copyright © 1999-2010 POPS WEB KOUBOU