TOPページ / 特集記事slideBoxページ

 

SLIDE-PHOTO-09S 縦横可変分割タイプ スライド追加形式 (新規-PAGER)


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

SLIDE-PHOTO-09S 縦横可変分割タイプ DEMO 800x400 (slide-photo09s.js)

 

 


[[ AUTO 8x6 8x4 ]] Split Free / 画像BACKGROUND / setTimeout形式

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


 


 

スクリプトの特徴


  1. スライド系、スライス系エフェクトを組み合わせました。
    ( BAR 2DOOR 4DOOR 分割変更SLIDE FADEと多彩な変化をします。)
  2. スライスは縦横、自由に分割できます。
  3. 使用目的として、比較的大型画像エフェクト専用です。画像が小さい場合はあまり効果はありません。
  4. 多彩なスライスエフェクトを実現します。エフェクトは組み合わせ次第では、100種類以上あります。
  5. 簡単に画像の大きさ設定(CSS変更)が出来るようにしました。
  6. 時間制御を2種類(setTimeout)設定して、より使いやすくしました。
  7. 多少のアニメ設定速度の変更は可能です。
  8. ボタン風、番号付きまたはサムネール付きのページャー設定可能です。

  1. 以前のslice-photoなどを見直し、より効率的にしています。
  2. 欠点、短時間で多くのアニメ処理を行うため、動作がマシンの性能に大きく左右される。
    マシン環境の悪い場合は、Google Chrome での閲覧推奨します。快適です。
    一部パターンを使用していますが、マシン環境により処理しきれないため、古い計算を使用しています。パターン中心がずれたりしますことご了承ください。
  3. 使用の際にはFLASHなどの影響の無い場所に設置するのがのぞましい。
  4. 画像を背景画像に変更、タイマーの形式(setTimeout)に変更。(一般的なものです)
  5. テキスト保存形式を UTF-8(UTF-8N) にしましたので注意ください。

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


・対応ブラウザ IE6+ Safari(4.以上)+ Firefox(3.5以上)+ Chrome(5.以上)+ Opera(10.以上)+


 

DOWNLOAD ZIP に含まれる内容


  1. サンプルには、jquery-1.6.4.min.js が内包されています。
  2. 該当の、JS CSS 一式。
  3. 該当の、サンプル画像など、一式。
  4. サンプルDEMO html。

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


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

http://jquery.com/

 


 

設置方法資料解説


JS.CSS.HTML記述概略



基本読み込みとJSの実行(JS.CSS)
<link rel="stylesheet" href="css/slide-photo09s.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/slide-photo09s.js" /></script>
<script type="text/javascript">
	$(function(){
		$(document).slide_photo();
	});
</script>
 
画像収容部分(HTML)
<div id="pops_slide_photo">
	<div id="slide_box">
		<div id="photo_slide_base"><div id="slide_imgholder"><img src="images/photo_t131.jpg" width="800" height="400" /></div>
			<div id="slide_base">
			</div>
			<div id="slide_count_data"></div><div id="slide_loading"></div>
		</div>
	</div>
</div>

ページャー部分(HTML)
<div id="thumb_box_wrap">
	<div id="thumb_box">
		<div id="start_btn" class="start_bttn" title="AUTO ON/OFF"></div>
		<ul>
		</ul><span class="clear" />
	</div>
</div>

----------------------------------------------

事前にJSに画像のデータおよび画像までのパスを記載しておく
preloaddata:'photo_t91.jpg,photo_t92.jpg,photo_t93.jpg,photo_t94.jpg,photo_t95.jpg'
path:'images/'

またはJS実行時に送り込んでも良い
<script type="text/javascript">
	$(function(){
		$(document).slide_photo({
			preloaddata:'photo_t91.jpg,photo_t92.jpg,photo_t93.jpg,photo_t94.jpg,photo_t95.jpg',
			path:'images/'
		});
	});
</script>



上記のとうり設置方法は、標準のjQueryプラグインの設定であるので経験済みの方なら簡単である。
最初の画像、1枚のみHTMLで表示し、画像はJSに画像データとして登録します。

1ページ当たり、1設定の使用になります。複数個は設定できません。表示するページが違えば設定を変更して使用できます。


以上、簡略説明でした。
詳細の説明が知りたい場合は、ご面倒でも下の説明などをお読みください。


 

設置方法


[ 1 ] HTML設定


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

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

画像を表示する場所に次のHTMLを挿入します。


1-1 HTML構造を作る


DEMOでの設定例 ( 800x400画像、標準分割数 8x4 32分割)

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

画像の大きさと分割数などの目安は、下の付属資料をご覧ください。(性能の良くないマシン向けにあわせます)



[ 自動でPAGER部分を作る場合のHTML記載例 ]

<div id="pops_slide_photo">
	<div id="slide_box">
		<div id="photo_slide_base"><div id="slide_imgholder"><img src="images/photo_t131.jpg" width="800" height="400" /></div>
			<div id="slide_base">
			</div>
			<div id="slide_count_data"></div><div id="slide_loading"></div>
		</div>
	</div>
</div>
<div id="thumb_box_wrap">
<div id="thumb_box">
<div id="start_btn" title="AUTO ON/OFF"></div>
<ul>
</ul><span class="clear" />
</div>
</div>

設定登録された画像の数だけ「li要素」を自動作成します

------------------------------------
1.自動でPAGER部分を作る場合
部を省略する
設定、pager_li_make:'make' にすると自動でつくります
初期設定では作る方式にしています

<div id="thumb_box_wrap">
<div id="thumb_box">
<div id="start_btn" title="AUTO ON/OFF"></div>
<ul>

(li要素を省略している)

</ul><span class="clear" />
</div>
</div>

------------------------------------
2.使用者がPAGER部分を書き込む場合
全てを書き込む
設定、pager_li_make:'' にすると自動で作りません

<div id="thumb_box_wrap">
<div id="thumb_box">
<div id="start_btn" title="AUTO ON/OFF"></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul><span class="clear" />
</div>
</div>

使用者がPAGER部分を書き込む形式ですのでサムネールなどを入れたりが可能
これらは、別途解説「PAGER改造などの資料」を参照ください

------------------------------------
3.PAGERを利用しない
全てを省略してthumb_box_wrap部分以降を作らない
または不要な部分を削除する
設定、で使用しない部分の use 設定を解除する

------------------------------------
4.PAGER部分を別途設計する場合
これらは、別途解説「PAGER改造などの資料」を参照ください


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

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


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




<div id="photo_slide_base"><div id="slide_imgholder"><img src="画像のURLまたはパス" width="画像の幅" height="画像の高さ" /></div>


表示する画像情報をHTMLに記入します、継続する画像の幅高さは同じ大きさです。
使用する画像と同じ幅と高さを記入ください。違う寸法は記入できません。


 

[ 2 ] CSS 読み込み設定


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

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


slide-photo09s.css



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


 

[ 3 ] JS CSS の変更設定


サイズ変更など

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

  1. slide-photo09s.css の「画像サイズ」に該当する部分を、使用する画像サイズとあわせます。
  2. PAGERが必要な場合は、PAGERのHTMLを追加します。(li 部分自動作成可能)
  3. JSの初期設定、画像サイズをともに変更ください。JS実行時の受け渡しデータに記入しても同じです。

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


.clearクラスについて

PAGERの設計に float を使用しますのでそのあとクリアしなければなりません。付属CSSの最後に


CSS
.clear {clear:both;}
があります、不都合な場合は書き換えるか削除ください

またはPAGER最後のHTML部分
<span class="clear" />

を次のようにしてもよいわけです
<span style="clear:both;" />

問題があるなら
<div class="clear"></div>
をどこかに挿入、または使用者が個別に対応する
これらは使用者の判断にゆだねます


用意する画像 など

項 目 1. 画像 2. 3. 備考
1. 使用する画像 JPG. PNG 画像 大きさは自由
全て同じ大きさの事
- 画像JPG推奨。
2. サムネール画像 GIF. JPG. PNG 画像 大きさは自由 - 必要に応じて用意する
3. LOADING画像 loading.gif (31x31) 付属画像 取替え可能
4. PAGER背景画像 swich_btn4.gif (14x14) 付属画像 自作取替え可能
5. スタートボタン背景画像 start_btn_back.gif (32x16) 付属画像 自作取替え可能

背景画像などは自作取替え可能ですから好みによりデザインください。CSSは使用者が変更ください。

 

[ 4 ] JS 読み込み設定


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


jquery-1.6.4.min.js slide-photo09s.js



<script type="text/javascript" src="js/jquery-1.6.4.min.js" /></script>
<script type="text/javascript" src="js/slide-photo09s.js" /></script>


 

[ 5 ] JS slide_photo()の実行


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


  1. slide_photo()の実行は必ず必要です。
  2. slide_photo({引数プロパテイ値})を引き渡せます。
  3. ページ毎に変更値を渡し、別仕様で実行できます。
  4. 1つのCSSを利用して、ページ毎にCSSをも自動で変更可能です。(auto_edit_use:'use' 設定時)
  5. 1ページ当たり、1つのJS実行です、複数は利用できません。



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

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


---------------------------------------------------------
★CSSの自動変更機能
auto_edit_use:'use' を設定して
HTML側より「変更値」を引き渡せば、CSSの書き換えなしに実行できます

CSSにはページで使用する「大体の幅高さ」を書いておきます
引き渡し設定値に応じCSSの幅高さを自動変更します

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

		変更を記入
		同じ値の部分は引き渡さなくとも良い、省略可能

		auto_edit_use:'use',

		変更を記入

		preload_use:'use',
		preloaddata:'photo_t11.jpg,photo_t12.jpg,photo_t13.jpg,photo_t14.jpg,photo_t15.jpg',
		path:'home/images/'
	});
});
</script>

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

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

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


 

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


JS 初期値は次のようになっています、下記の説明資料、[ 設定のまとめ表 1 ] などを参考にして書き換えが可能です。




★DOWNLOADしたJSの初期設定例

---前後略す---

//option
var o = $.extend({
	imageWidth:800,
	imageHeight:400,
	split_horizontal:8,
	split_vertical:4,
	split_h_max:11,
	split_v_max:8,
	speed:800,
	delay_speed:80,
	random_split_use:'use',//use
	fade_use:'use',//use all-fade
	cycle_time:6000,//6000-8000
	first_time:10000,//6000-10000
	auto_edit_use:'use',
	loading_use:'use',
	auto_use:'use',//use stop
	autobtn_use:'use',//use image
	pager_box_use:'use',//use all-none
	pager_li_make:'make',//make
	pager_center:'center',//center left right
	pager_number:'',//number.thumbnail.text
	btn_text_use:'use',//use
	thumb_show_use:'use',
	hoverbox_sp:30,//20-40
	preload_use:'use',
	preloaddata:'photo_t131.jpg,photo_t132.jpg,photo_t133.jpg,photo_t134.jpg,photo_t135.jpg',
	preloadthumbdata:'photo_t131s.jpg,photo_t132s.jpg,photo_t133s.jpg,photo_t134s.jpg,photo_t135s.jpg',
	path:'images/'
}, o || {});

---前後略す---

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

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

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

だけでよいことになる。
---------------------------------------------------------

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

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


ここでの preloadthumbdata は HOVER-BOX 用の画像ですから間違わないようにしてください。


★ imageWidth、imageHeight、重要です。



	imageWidth:800,
	imageHeight:400,


使用する画像と同じ幅と高さを記入ください


★ サイクルタイム(cycle_time)は、原則 6000-8000 位の値を記入ねがいます。
★ スタートタイム(first_time)は、原則 8000-10000 位の値が良いとおもいます。あくまでも使用者の判断です。
(スタートタイム(first_time)は2枚目の画像に移行するまでの時間設定です。最初にページを表示する場合、サイクルタイム(cycle_time)と同じでは初期HTMLページ処理などの関係で、1枚目画像がほとんど見えないままに2枚目に移動する傾向が多いため設定しているものです。)
ご注意、slice-photo01s 02s 設定の first_time とは若干ちがいますので間違わないようにしてください。


サイクルタイム関係図


 

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


次のようになる。(UTF-8)



<!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=UTF-8" />
<title>SLIDE-PHOTO-09S</title>
<link rel="stylesheet" href="css/xxxx.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/slide-photo09s.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/slide-photo09s.js" /></script>
<script type="text/javascript">
	$(function(){
		$(document).slide_photo();
	});
</script>
<head>
<body>

<main>

<div id="pops_slide_photo">
	<div id="slide_box">
		<div id="photo_slide_base"><div id="slide_imgholder"><img src="images/photo_t131.jpg" width="800" height="400" /></div>
			<div id="slide_base">
			</div>
			<div id="slide_count_data"></div><div id="slide_loading"></div>
		</div>
	</div>
</div>
<div id="thumb_box_wrap">
<div id="thumb_box">
<div id="start_btn" title="AUTO ON/OFF"></div>
<ul>
必要ならli部分を手書きする
</ul><span class="clear" />
</div>
</div>

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


・以上で通常動作しますが、旨く行かない場合は、JS CSS 画像パス など確認ください。
・DOCTYPE が変わってもほとんどCSSは position:absolute で書かれていますので大丈夫とおもいます。狂う場合は使用者がCSSを変更ください。(#slide_photo_box のCSSを変更すれば直るはず)
・position:absoluteの影響で他のサイド部分などが「カラム落ち」するなどの影響がでる場合は #pops_slide_photo 全体を空の <div></div> の中に入れると正常になる場合が多いです。

 

JS実行命令を、JSと同じファイルに書く

★HTMLにJS実行命令を書けない場合は、JSの最後部分に上書きし、1つにまとめても良い。


$(document).slide_photo();を書けない場合、下のようにする。
slide-photo09s JSの部分
 
(function($){
	jQuery.fn.slide_photo = function(o) {
 
		内部スクリプトは略する
 
	};
})(jQuery);
 
この後にJS実行命令を書き、JSを上書き保存する
 
$(function(){
	$(document).slide_photo();
});
 

★HTMLの HEAD にJS読み込みまたは、実行命令を書けない場合は、文法違反ではありますが BODY または任意の場所に書いても機能します。 どの部分に記述するかなどは、テスト確認してからにしてください。

 

スクリプトの改造など

使用者に不都合があれば、これらの改造などは自由です。JS、CSS名を変えたりは簡単ですが、
但し、スライスエフェクト表示部分などは良く解析しないと、旨く表示しなくなる恐れがあります。ページャー、入り切りボタンなどの改造は、比較的簡単とおもわれますが、これら全て、使用者の責任で行ってください。

どのように改造したいかなどご要望を、ご連絡いただければ、改造例などサイトUPします。

 

slice-photo01s(02s)との相違点について

実際には slide-photo の名称にしているだけで、エフェクトが多いだけで、構造はスライスタイプとほとんど変わりません。但しこちらはページャーを使用するのを原則としているだけです。
そのため slice-photo01s などの設定方法、解説とほぼ代わりはありません。

 

ローカルでのテスト

ページャー周りなど複雑な部分もありますので、サイトアップ前に必ずテストしてからにしてください。 DOWNLOADしたものの設定変更などして見ても良いです。標準のまま使用するのが一番簡単ですが、、

 

スクリプトの設定資料


標準設定参考図(PAGERのあるタイプ)

基本説明図

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


JSの初期設定です。使用条件などを考慮して各自変更してください。2種の方法があります。
1. JS の初期設定を直接書き換える。(上の [ 6 ] JSでの初期値の書き換え変更参照)
2. JS slide_photo() 実行時に初期設定を変更する。(上の [ 5 ] JS slide_photo()の実行参照)
3. 主に、PAGERデザインの変更の出来る、使用目的に応じて部材の表示変更可能な設定にしました。


基本分割の状況

画像の分割スライスの基本説明です。上の図参照。
1. 基本squaresスライス、画像を升目状に分割します。(正方形が理想、合計分割数50-60くらい)
画像の大きさで正方形にならない場合は近い形にしたほうがキレイです。但し分割は使用者の自由ですから正方形とは限りません。
2. バー状の分割、画像をBAR状に分割します。升目状の幅高さにあわせる分割とランダムに分割するタイプの2種類の設定が出来ます。
A 分割固定:升目状の片方を基準としたBAR状分割がおこなわれます。
B 分割可変:2分割から、設定最大分割数の間でランダムにBAR状分割がおこなわれます。

3. そのほか追加されるもの、その他3種類の分割方式の画像が加えられます。(分割なしの1枚画像、2ドアスライド分割、4ドアスライド分割がランダムに設定される)
以上のものがランダムにに選定されて表示されます。


PAGER説明図1

標準初期設定では、標準PAGERを使用しての中央表示に設定されています。

スタートボタンを一体化して分離しての標準形式の例です。PAGER背景画像は3色(白黒灰)用意しました。番号入りのものもできます。


PAGER説明図2

図は標準の場合の例です。中央、左右の指定が出来ます。


サムネール画像を用意して、画像挿入形のPAGERを使用することも可能です。

図はスタートボタンを分離してサムネール画像を挿入した場合の例です。


PAGERなどの操作と振る舞い

※ 標準では、白色PAGER、スタートボタン(AUTO-ON.OFFボタン)、は使用するよredうに設定されています。
※ 「PAGER」を押すと必ず、オート表示は解除(AUTO-OFF)されます。復活するには、スタートボタン(AUTO-ON.OFFボタン)、が必要です
※ 復活させる(AUTO-ON)と、必ず表示まで「サイクルタイム(cycle_time)」を実行してから、次の画像をアニメ表示します。
※ 画像のアニメ表示中は「PAGER」を押してもすぐには表示しません。現在のアニメを終了してから実行します。


  1. 「オート表示」設定をすることにより、順次画像を表示してゆきます。
    (「オート表示」解除の場合は「スタートボタン」がなければ「オート」にはなりません)
  2. 基本画像は preload しなくとも表示できます。
    (沢山画像がある場合に全て読みこんでは困ることもあるでしょう)
  3. PAGERだけでも使用できます。「PAGER」を押せば「オート表示」は解除されます。
    (「スタートボタン」がなければ、全てマニュアル操作です)
  4. 現在表示されている画像の、PAGERを押しても、再度アニメはしません。(反応しないようにできています)
  5. PAGERだけで使用している場合は、サイクルタイム(cycle_time)を取らないで直ぐに表示実行します。
  6. 長いアニメ時間中、複数の「PAGERボタン」を選定した場合、最後に押された画像が表示されます。
  7. サーバーが画像を取得できない場合は、スキップして「次ぎの画像」が表示されます。
  8. 重いFLASHと同一画面に表示した場合、FLASHにパワーを奪われ、反応が鈍くなったりアニメがスキップしたりの異常が発生し易くなります。FLASHから離すか併用しないでください。
  9. 「スタートボタン」「PAGER」は個別に表示できますので、使用目的によって設計できます。
    (全て非表示にもできます)
  10. 画像表示部全体に「スタートボタン機能」を付加してボタンをなくすことも可能ですが、判りにくい面があります。基本的にはボタンを使用ください。

標準のレイアウト

標準のレイアウトをする場合の簡易説明です。
1. 大きな外枠(#pops_slide_photo)の中に基本画像挿入した状態でのレイアウトです。
2. PAGER細部について大きさなどは自由です。大きな外枠の下に配置されています。
3. 自動編集 auto_edit_use:'use'を設定することにより、大きな外枠、基本画像が同じ寸法になります。
4. PAGER細部 CSS などは使用者の自由です。


その他のレイアウト

その他のレイアウトをする場合の簡易説明です。
1. 大きな外枠の中に挿入した状態でのレイアウトです。細部について大きさなどは自由です。
2. 画像の上にレイアウトをする場合。
3. その他のレイアウトをする場合。
4. 自動編集 auto_edit_use 設定は基本的に解除してレイアウトします。

これらは使用者が自由に書き換えてください。但し影響ある設定は解除する必要があります。
ボタン画像など、自作、CSS変更がある場合は自己責任でお願いします。特に「ページャー」を「表示画像」の上に重ねるときなどはCSSの知識が必要ですし、他の部分に影響するときもあります。


初期設定資料 1

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

No. A 項目 B 変数名 C 初期値 D 設定 E 備考
1 基本画像幅 imageWidth 800 自由 800x400
画像サイズ、横幅
2 基本画像高さ imageHeight 400 自由 -
画像サイズ、高さ
3 横方向基本分割数 split_horizontal 8 自由 合計分割50-60
横分割数、(横X縦の合計分割50-60位にして下さい)
4 縦方向基本分割数 split_vertical 4 自由 -
縦分割数
5 横方向BAR最大分割数 split_h_max 11 自由 -
最大横分割数、横分割数の2倍まで有効。random_split_use を設定時にBAR状に2分割から可変で毎回変更します。
分割数を増やしても似通ってしまいますので、分割数より少し多い程度が良いようです。
6 縦方向BAR最大分割数 split_v_max 8 自由 -
最大縦分割数、縦分割数2倍まで有効。random_split_use を設定時にBAR状に2分割から可変で毎回変更します。
分割可変 random_split_use を解除した場合は、split_horizontal.split_vertical分割数で固定分割されます。
7 アニメ速度 speed 600 自由(400-800) -
スライス(スライド)要素の移動アニメ速度です。verticalの場合は移動距離が長いため少し早く感じられます。
8 分割要素遅延時間 delay_speed 80 自由(50-100) -
表示遅延時間ですが、スライス(スライド)要素の出現間隔になります。80-100位、(50 設定可能、50 以下は 50 に修正されます)
9 BARのランダム分割 random_split_use use 自由 -
バー状のスライド要素を可変分割します。毎回分割数が違うことになります。場合によりジッパー形に分割されることもあります。
10 フエードの使用 fade_use use 自由 -
フエードを実行します。但し確率50%になっています。解除した場合はフエードしません。全てフエードさせる場合は all-fade を設定ください。性能の悪いマシンの場合フエード処理は大変負荷がかかるための処置です。
(全てのスライドエフェクトがフエードに合うわけではありません。効果の薄い場合もあります。)
11 サイクルタイム cycle_time 6000 自由(3000-8000) -
このタイプでは cycle_time は現在の画像表示と次画像表示(LOAD)までの間隔(時間)となります。つまり完全なサイクルタイムではなく、エフェクトの時間により変化しています。
12 始動時間待ち first_time 100000 自由(3000-10000) -
2番目の画像表示までの時間です。ページを開いたら2番目の画像に移動して、1番目の画像を見れないことがあるので回避策です。
13 自動でCSSを修正 auto_edit_use use 自由 -
重要な部分だけの寸法を設定します。解除した場合は全てCSSの寸法を修正しなければなりません。(幅と高さのみ自動設定します)
PAGERのHTML記述を変更、移動する場合は注意ください。
14 Loading画像を使用する loading_use use 自由 -
Loading画像は無くとも、使用に差し支えありませんので、非表示にすることも可能です。
15 オート表示使用 auto_use use (use stop)自由 -
画像表示を自動で進めます。標準的には自動のほうが良いと思います。PAGERを選定(クリック)すると自動停止になります。「自動オンオフボタン」がなければ自動には戻りません。

1. use : 画像表示を自動で進めます。表示時間は cycle_time です。
2. stop : 初期状態で「自動表示」を停止状態にします。「スタートボタン」を押せば「自動表示」状態になります。
16 オート切替ボタン autobtn_use use (use image)自由 -
通常は use を設定する。「自動オンオフボタン」を表示使用するかの設定です。
image を設定するとボタンではなく、基本画像構造(画像表示部全体)に「自動オンオフ機能」を付加します。

1. use :「自動オンオフボタン」に「自動オンオフ機能」を付加します。
2. image : 基本画像全体に「自動オンオフ機能」を付加します。ボタンはなくとも機能する状態になります。
17 PAGERの使用 pager_box_use use 自由 -
PAGERを表示使用するかの設定です。
PAGERを含む全体 #thumb_box_wrap が対象です。標準のレイアウトのように、中にボタンがあればこれも非表示になります。
18 PAGER要素の自動作成 pager_li_make make 自由 -
PAGER要素の中の「li 要素」を自動生成します。番号つきの要素を作ることも可能です。(pager_number='number'にします)
解除して使用者が「PAGER要素」をかきこめば自由に設計できることになります。
19 PAGER位置指定 pager_center center 自由 center.left.right
初期使用のPAGERブロック全体の表示位置です。center left rightを設定できます。使用者のCSSなどで構成する場合は解除します。
20 PAGER番号の自動作成 pager_number 自由 number thumbnail text
PAGER要素に番号またはサムネール画像(number thumbnail text)をいれます。使用の際にはCSSを番号用またはサムネール画像用に書き換えます。サムネール画像用で使用するには、幅高さ指定と、設定preloadthumbdataに画像を登録しておくことが前提です。
TEXTを挿入する場合は #thumb_box要素に rel 情報として記入しておきます。


1. 設定なし : 背景画像を使用するPAGERの場合。
2. number : 1番から番号を生成します。
3. thumbnail : サムネール画像を挿入します。事前にpreloadthumbdataに画像を登録しておくことが前提です。
4. text : 文字を挿入します。事前に #thumb_box に rel として "文字1,文字2,......" などと、文字を登録しておくことが前提です。
21 ボタン文字の挿入 btn_text_use use 背景画像以外
ボタンにテキスト文字( || >> )を挿入します。背景画像を使用する場合は必要ありません。
22 HOVER画像使用 thumb_show_use use 自由 -
PAGER要素のHOVERでサムネール画像を表示する機能です。使用の場合は「サムネール画像」を別途登録します。
23 HOVER画像の位置 hoverbox_sp 30 (20-40)自由 -
サムネールHOVERによる表示の場合の位置の調整用です。
24 プリロードを実行する preload_use use 自由 -
使用する画像をプリロードします。全ての画像が事前に読み込まれますので、不都合の場合は解除してもかまいません。この場合cycle_timeを少し伸ばしたほうが良いかも知れません。
25 プリロード画像 preloaddata photo_t131.jpg..... 自由 -
基本画像データを登録します。大きさは全て同じにそろえてください。
26 サムネール画像 preloadthumbdata photo_t131s.jpg..... 自由 -
HOVERでサムネール画像を表示するときの、サムネール画像データを登録します。
27 画像のパス path images/ 設定必須
画像データまでのパスです。判らない場合はhttp://で始まる絶対パスを設定ください。
28 A -------------- C D -
説明

※ 初期設定は「AUTO表示」になっています。画像が切り替わらない場合は、画像データの名前、パスを確認ください。
※ 画像 preload により、表示するしないにしろ、標準では「AUTO表示」のため、常に画像が読み込まれますので、画像数は 3-10 位を想定しています。
※ 画像数はいくらでも増やせますが、画像数が多ければ、サーバー転送量が増えます。その辺は使用者が判断ください。
画像の preload をしなくともその時点で「LOAD」して表示しますが、LOADに問題がある場合は「LOADING画像」だけが回転して、画像の表示に進みません。画像のパスなどを確認ください。
※ 原則、画像の preload を設定するのが間違いのない方法です。


JS に問題がある場合は、HTML に書き込んだ画像だけを表示して、JSは停止します。
設定に問題がある場合は、正常に表示されません。


PAGER周りの構造と部材の表示、非表示



※ PAGERは #thumb_box_wrap #thumb_box #start_btn で構成されています、スタートボタンは他に移動可能です。 現在、見た目を良くするためスタートボタンをthumb_box の中に入れています。(CSS的には中央あわせが面倒)


  1. #thumb_box_wrap #thumb_box #start_btn を個別に表示の切り替えができます。
  2. #thumb_box_wrap を消せば、標準ではPAGER部分全てを消すことができます。
    (または、HTMLでPAGER部分を作らなければ良い。)
  3. 目的にあわせて、部材を表示、非教示にして使い易いようにします。
  4. スライドショウ的な使用には、PAGER部分を省いても良いでしょう。
  5. アルバム的な使用には、画像が多いことも予想されますので、PAGERがあったほうが良いでしょう。
  6. スタートボタンは別途に背景画像など入れられるように div で作っています、どこにあっても認識します。
  7. PAGER部分は ul li 構造であれば、使用者が設計しても認識します。(但しCSSは使用者が変更ください)

slice-photo 01s 02sとは「ID名」が同じ部分がありますので、同一ページ内では共存できません。共存させるときは、JS、CSSの「ID名」を変更しなければなりません。ここではその解説はしません。


PAGER設定一覧表


項目 PAGER全体 ボタン ボタンの文字 PAGER PAGERの種類 備考
設定変数名 pager_box_use autobtn_use btn_text_use pager_li_make pager_number -
- - - - - - -
PAGERなし 1 (何もなし) all-none 表示しない
PAGERなし 2 use use ボタンのみ表示
PAGERなし 3 (ボタン機能付加) image 画像ボタン機能
標準PAGER use use use make 標準形
番号PAGER use use use make number 番号形
サムネールPAGER use use use make thumbnail サムネール形
文字PAGER use use use make text 文字形
PAGERのみ表示 use make ボタンなし

※ PAGERなしはアルバム以外の場合に最適です、アルバムとして使用の場合はPAGERがあったほうが便利です。
※ ボタン(スタートストップボタン)の使用は使用者の自由です。基本画像に付加することも可能です。
※ 上記の例では、ボタン(スタートストップボタン)にテキスト文字を入れる設定になっています。設定を解除すれば背景画像のボタンを使用できます。
※ 上記の例では、PAGERの部分を自動で生成する設定になっています。
※ 最後の、PAGERのみ表示する設定の場合は、ボタン(スタートストップボタン)がないので再スタートは出来ません。アルバム専用になります。PAGERの形式は自由です。


PAGERを文字で作る

PAGERを文字で作ることも可能です。

1. PAGERの li 要素の中に使用者が文字をいれて作成します。CSSは自由に訂正ください。

2. 自動で作る場合は。PAGERの要素の中に使用者が文字をいれて作成します。CSSは自由に訂正ください。



PAGERの li 要素の中に使用者がHTMLで文字をいれて作成するときは
#thumb_box ul liには、初期ボタン画像があるのでCSSを書き換える

<li>[名前1]</li>
<li>[名前2]</li>
<li>[名前3]</li>
<li>[名前4]</li>
<li>[名前5]</li>

PAGER番号自動作成 pager_li_make:'' 設定を解除する。



自動で作る場合は
<div id="thumb_box" rel="名前1,名前2,名前3,名前4,名前5">

#thumb_box に rel 要素として文字データを登録します

PAGER番号の自動作成 pager_number に text を設定する。


PAGERとボタンとオート表示の関係

※ オート表示設定(auto_use="use")にした場合、ボタン(スタートストップボタン)で「停止」「再スタート」をします。
※ PAGER (番号ボタン)を押せば「オート表示」は解除されます。
※ オート表示設定(auto_use="stop")にした場合、最初から「停止」状態になります。
ボタン(スタートストップボタン)がない場合は「再スタート」は出来ません。
※ オート表示設定がない場合(auto_use="")に、ボタン(スタートストップボタン)があれば、オート表示に設定されて「オート表示」になります。
※ PAGERのみでオート表示に設定にしている場合、最初は「オート表示」になります。オート表示に設定していない場合(auto_use="")は、最初から「停止」状態であり、PAGERを押した対象画像のみ表示します。

以上の関連を考慮しながら、PAGERを設計ください。


PAGERとサイクルタイムの関係

※ 「オート表示」の場合、画像表示との間に「サイクルタイム」が設定されています。
※ 「オート表示」の途中にPAGER(または停止ボタン)を押した場合、画像が表示途中であれば、現在の画像を表示し終わってから、目的の画像を表示します。
※ PAGERを連続して使用する場合は、「サイクルタイム」を実行しないで、直ぐに画像を表示します。
※ 「再スタート」の場合、「サイクルタイム」を実行してから、次ぎの画像を表示しますので時間がかかります。


HOVER画像の表示

※ PAGERを使用する場合にHOVER画像(サムネール画像)を表示することが可能です。
※ この場合事前にサムネール画像を作り、preloadthumbdata に画像名を登録ください。
※ 基本画像と同じフォルダに収容します。画像のパスは基本画像と同じパスが使用されます。


その他

JSスクリプトの最初の部分にあります、必要な場合は設定ください。


  1. show_text_use: 現在実行されている、アクションの設定を見ることができます。実際サイトUPでは使用しません。
  2. swich_type: (white.black.gray)標準PAGERの要素の背景画像の色指定。画像を取替えます。初期設定では白が設定されています。
  3. liback_image_none: none 指定で標準PAGERの要素の背景画像を削除。正式にはCSSで直接削除すればよいのだが。

 

PAGER改造などの資料、その他の変更について


PAGER説明図



標準1、(スタートボタンが内側にある)


基本画像の大きさとスライス画像の関係。(画像大きさの変更は出来ない)

スライス画像全体の大きさをJSなどで変更できませんので、レイアウトに合った寸法で画像を用意ください。
スタートトップボタンは画像にしないほうが簡単です。

1. 基本画像の大きさとスライス画像全体の大きさは同じになります。
(基本画像は「IMG」のためHTMLで表示の大きさは変えられるますが、、、スライス画像は「背景画像」として利用している)
2. スライス画像は「背景画像」としてスライスしていますので、大きさをJSで変更して合わせることは出来ません。「背景画像」はCSSで設定されます。
(スライス画像を「IMG」として処理する場合は可能ですが、負荷が大きく、かなり高価なマシン環境でなければ機能しません)
3. つまり、基本画像の大きさを 1-2ドット変えたい場合でも、基本画像を全て取り替えなければならないと言うことです。
(例、800x400画像を 804x402スライス画像などに表示は出来ない。804x402画像を用意しなければならない)


以上、説明でした。



 

ライセンス (GPL)


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

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

 

TOPページ / 特集記事slideBoxページ


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


企画制作:POPS WEB KOUBOU