POPS WEB KOUBOU

POPS-TRANSIT-PHOTO

前のページに戻る (index)

TRANSIT-PHOTO サンプル

---

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

TRANSIT-PHOTO (POPS-TRANSIT-PHOTO) DEMO (transit-photo.js) / 800x200

 

 

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

このスクリプトは jQuery のプラグインです。動作には jQuery バージョン 1.3.2 以上が必要です。

 

DOWNLOAD

POPS-TRANSITION シリーズ POPS-TRANSIT-PHOTO (transit-photo.js)

 

POPS-TRANSIT-PHOTO DOWNLOAD....................
[ transit-photo.zip ] ( HTML画像を含むサンプル一式 )
800x200画像 JS (transit-photo.js) 12KB / ZIP 241KB

 

スクリプトの特徴

1. 使用目的として、TOPページ用途の大型画像エフェクト専用です。
2. 多彩なスライドエフェクトなどを実現します。
3. 簡単に画像の大きさ設定(CSS変更)が出来るようにしました。
4. 画像専用ですが、エフェクトは組み合わせ次第では、50種類以上あります。
5. 多少の設定速度の変更は可能です。

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

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

 

DOWNLOAD ZIP に含まれる内容

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

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

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

http://jquery.com/

 

設置方法

[ 1 ] ＨＴＭＬ設定

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

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

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

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

ＤＥＭＯでの設定例

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

<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="trans_base_mid"><img class="img1" /><img class="img2" /></div><span class="clear" />
			<div id="trans_base_top"><img /></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動作には、先にＣＳＳを読み込むことが前提となっています。

transit-photo.css

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

 

[ 3 ] JS CSS の変更設定

・初期段階では、800x200 画像の大きさになっていますので、使用する大きさ(wtdth height)に変更します。

1. ＣＳＳ，transit-photo.css の画像サイズに該当する部分を、使用する画像サイズとあわせます。
2. ＪＳでの、CSS変更機能で、自動で画像サイズ部分変更が可能です。( auto_edit_use:'use' )。
3. ＩＥ8以外では z-index が必要ではありませんが、ＩＥ8で要素の認識が出来ない部分があり、z-index を設定しています。

★変更部分は画像サイズに該当する部分だけです。その他はサイズ以外変更しないでください。

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

用意する画像 など

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

 

[ 4 ] JS 読み込み設定

★jQuery-1.3.2以上が必要です。( 注意、タイプにより、1.4.2以上の場合あり )
また、jQueryプラグイン動作には、先にjQueryを読み込むことが前提となっています。

jquery-1.4.2.min.js transit-photo.js

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

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

 

[ 5 ] JS transit_photo()の実行

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

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

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

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

<script type="text/javascript">
$(function(){
	$(document).transit_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).transit_photo({
		imageWidth:600,
		imageHeight:300,
		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>

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

<script type="text/javascript">
$(function(){
	$(document).transit_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,
	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).transit_photo();
});
</script>

だけでよいことになる。

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

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

★ imageWidth、imageHeight、重要です。必ず記入ください。

	imageWidth:800,
	imageHeight:200,

※ 使用する画像の大きさは全て同じ寸法です。縦横比率の違い、大きさにはあまり左右されません。
※ ここでは横長の 800x200 画像を使用しました。

 

[ 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>TRANSIT-PHOTO</title>
<link rel="stylesheet" href="css/xxxx.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/transit-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/transit-photo.js" /></script>
<script type="text/javascript">
	$(function(){
		$(document).transit_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="trans_base_mid"><img class="img1" /><img class="img2" /></div><span class="clear" />
			<div id="trans_base_top"><img /></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 transit_photo() 実行時に初期設定を変更する。(上の [ 5 ] JS transit_photo()の実行参照)
3. 単純な使用目的のため、初期設定など最小限にしました。

初期設定資料

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

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

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

 

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

1. imageWidth: 画像サイズ、横幅、または表示サイズ。
2. imageHeight: 画像サイズ、高さ、または表示サイズ。参考、[ 9 ] 画像サイズをかえないで表示サイズだけ変更したい
3. speed: 標準 600 です。400-800 位が最適です。
4. cycle_time: 標準 6000 です。注意、5000 以下には出来ません。
5. loading_use: Loading 画像は無くとも、使用に差し支えありませんので、非表示にすることも可能です。
   ( Loading 画像は好みのものと取替えられます。ＣＳＳはそのままで中央表示になります )
6. auto_edit_use: 編集機能 auto_edit_use は画面の大きさなど簡単な部分を自動で修正します。(主に幅、高さのみ変更)、設定なしの場合はＣＳＳで直接書き換えます。詳細は下の説明参照。
   ＣＳＳの変更は基本的には、幅と高さだけの変更ですから、簡単ですが、、。
7. effect_type: は random を記入ください。(実際には使用していません。拡張用途)
8. preload_use: プリロードを使用するは、原則 use 設定です。
9. preloaddata: は表示する画像を書き込んでください。画像の大きさは自由ですが、全て同じ大きさです。
10. 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以外、全てJISのテキストですので、使用環境に応じて適切に書き換えてください。

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

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

 

---

 

 

 

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

---

動作図と説明

 

TransitionEffect

 

[ 1 ] ランダム表示

★ 標準で move slide fade エフェクトがランダムに選定され画像を切り替えて表示します。
★ move slide fade エフェクトの出現比率を変えたりの変更は可能です。
★ 設置するＨＴＭＬのＣＳＳの量、ブラウザまたはマシン環境により、画像がぐらついたり動作が重かったりする場合もありますので、ご了承ください。

この Transition スクリプトは jQuery バージョン1.3.2以上で作動します。
注意、なかには、Transition スクリプトの種類により、jQuery バージョン1.4.2以上でなければ作動しないものもありますので、確認ください。

 

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

ＩＮとＯＵＴの指定はできません。ＯＵＴにも出来る種類のエフェクトをランダム表示するだけです。

 

配置状況と変更の方法

[ 1 ] 画像の大きさ、縦横の比率

スライスなどは無く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,#trans_base_mid,#trans_base_top,#imgholder,#imgholder img').css({'width':bs_W,'height':bs_H});
	}

		---前後略す---
}

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

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

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

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

 

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

 

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

4-1 プリロード省略

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

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

 

 

[ 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,
	indez/image/photo_t05.jpg,
',

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

 

[ 6 ] 出現率の変更

6-1 エフェクトの 出現率の変更

★現在の設定
var random_nm = ['fade','move','move','move','fade','slide','move','move','move','move'];

★変更後の設定
var random_nm = ['fade','slide','move','move','fade','slide','move','move'];

増減させれば確率が変わる、なければそのエフェクトは無くなる

★例外的な設定
var random_nm = ['fade','fade'];

fadeだけになる、このような使用はあまり考えられませんが、、、

 

[ 7 ] エフェクトタイプの指定

 

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

 

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

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

★画像ですから縦横の比率を同じにして計算します、最初の画像 800x200 を 700 幅に修正する例
高さの計算 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