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

SLICE-PHOTO 縦横分割タイプ、サンプル DEMO


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


POPS-SLICE-PHOTO-01s MENU付き標準基本形(slice-photo01s.js)

 

||
  • 1
  • 2
  • 3
  • 4
  • 5


[[ AUTO 8x4 ]] 分割自由 PAGER付き

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


 

スクリプトの特徴


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

  1. 以前のslice-photoを見直し、より効率的にしています。
  2. 欠点、短時間で多くのアニメ処理を行うため、動作がマシンの性能に大きく左右される。
  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。

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


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

http://jquery.com/

 

 

設置方法


JS.CSS.HTML記述概略



基本読み込みとJSの実行(JS.CSS)
<link rel="stylesheet" href="css/slice-photo01s.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/slice-photo01s.js" /></script>
<script type="text/javascript">
	$(function(){
		$(document).slice_photo();
	});
</script>

画像収容部分(HTML)
<div id="pops_slice_photo">
	<div id="slice_photo_box">
		<div id="slice_photo_base"><div id="imgholder"><img src="images/photo_t91.jpg" width="800" height="400" /></div>
			<div id="slice_base">
			</div>
			<div id="count_data"></div><div id="loading"></div>
		</div>
	</div>
</div>

ページャーの必要な場合(HTML-MENU)
<div id="thumb_box_wrap">
	<div id="start_btn" title="AUTO ON/OFF">||</div>
		<div id="thumb_box">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</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).slice_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に埋め込み、大きさを設定します。

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


標準構成の例 (画像の大きさ 800x400 とする)



<div id="pops_slice_photo">
	<div id="slice_photo_box">
		<div id="slice_photo_base"><div id="imgholder"><img src="images/photo_t91.jpg" width="800" height="400" /></div>
			<div id="slice_base">
			</div>
			<div id="count_data"></div><div id="loading"></div>
		</div>
	</div>
</div>
<div id="thumb_box_wrap">
	<div id="start_btn" title="AUTO ON/OFF">||</div>
		<div id="thumb_box">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul><span class="clear" />
		</div>
</div>


ページャーを必要としない場合はthumb_box_wrapのメニュー構成部分は要りません。

ページャー <li></li>部分を自動で書き出すことも可能です。

現在ページャーは画像部分の下に分離されて配置されていますが、<div id="pops_slice_photo">に収納可能ですからデザインなど自由にできます。

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

最初に表示する画像のURLなどを書き入れます。その他の画像はJSで一括プリロードします。(プリロードしなくとも使用できます。その都度LOADするだけです。この場合時間がかるだけです。)
プリロード画像は、JSの初期設定、またはHTMLからJS実行時に、受け渡しのデータとして記入します。


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




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


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


JSへの画像データの登録。画像までのパスもお忘れなく。


preloaddata:'photo_t91.jpg,photo_t92.jpg,photo_t93.jpg,photo_t94.jpg,photo_t95.jpg',
path:'images/'

ページャーに「サムネール画像」を使用する場合


<li><img src="images/photo_t91ss.jpg" width="40" height="20" /></li>
<li><img src="images/photo_t92ss.jpg" width="40" height="20" /></li>
<li><img src="images/photo_t93ss.jpg" width="40" height="20" /></li>
<li><img src="images/photo_t94ss.jpg" width="40" height="20" /></li>
<li><img src="images/photo_t95ss.jpg" width="40" height="20" /></li>

「サムネール画像」を挿入できるようにHTMLを書き換えます。JSで自動で「サムネール画像」を挿入する機能もあります。

「サムネール画像」使用の場合は、CSSの大きさなどを考慮し、使用者がCSSを直接変更ください。


JSで自動で「サムネール画像」を挿入する場合 thumb_preloaddata に画像名を登録する。


thumb_preloaddata:'photo_t91ss.jpg,photo_t92ss.jpg,photo_t93ss.jpg,photo_t94ss.jpg,photo_t95ss.jpg',


1-3 番号を自動生成させる場合 (サムネール画像も可能)

HTMLの番号部分 <li></li> をかかないで構成します。


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

JSの設定で自動生成すればよい。HTMLを変更したく無い場合または、画像枚数が多い場合には便利です。


1-4 ページャー番号部分を使用しない場合

HTMLの番号部分をかかないで構成します。


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

原則、「入切ボタン」(停止、再スタートボタン)は書き込みます。JSの初期設定を、表「初期設定資料 2」に従い変更ください。

 

[ 2 ] CSS 読み込み設定


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

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


slice-photo01s.css



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


 

[ 3 ] JS CSS の変更設定


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

  1. slice-photo01s.css の「画像サイズ」に該当する部分を、使用する画像サイズとあわせます。
  2. JSの初期設定、画像サイズをともに変更ください。JS実行時の受け渡しデータに記入しても同じです。
  3. JSでのCSS変更機能で、自動で画像サイズ部分変更が可能です。(auto_edit_use:'use' 設定の場合)
  4. jQueryは バージョンjquery-1.4.2 以上であれば動作します。

★変更部分は画像サイズに該当する部分だけです。その他はサイズ以外変更しないでください。( [ 2 ] 外側BOXの機能、参照 )


用意する背景画像 など

項 目 1. 背景画像 2. 3. 備考
1. 使用する画像 JPG. PNG. GIF 画像 大きさは自由 使用者が用意する 正方形に分割できる大きさ推奨
2. LOADING画像 loading.gif --- 付属画像 取替え可能

このタイプでは背景画像が使用されていますので関係はありませんが、
直接画像を使用した場合、GIF画像は負荷がかかります(ブラウザにもよりますがアンチェリアス処理をかけるので重くなる)。実際に使用して良いと判断された場合は、使用は個人の自由です。

 

[ 4 ] JS 読み込み設定


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


jquery-1.4.2.min.js slice-photo01s.js



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


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

 

[ 5 ] JS slice_photo()の実行


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


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



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

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

---------------------------------------------------------
★初期値を一部変更して実行。
引数を渡しますので、記入したものは、JSの初期設定に上書きされます。
通常はJS側の初期設定を書き換えるのが通常です。引数を渡しで変更するのは途中変更がある場合です。
値は { } の中に書く形で受け渡します。
 
<script type="text/javascript">
$(function(){
	$(document).slice_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).slice_photo({
		imageWidth:600,
		imageHeight:300,
		speed:400,
		cycle_time:5000,
		first_time:1000,
		auto_use:'stop',//use stop
		pager_box_use:'use',//use all-none
		pager_li_make:'',//make thumb
		autobtn_use:'use',//use
		loading_use:'use',
		auto_edit_use:'use',
		effect_type:'random',
		split_horizontal:12,
		split_vertical:6,
		delay_speed:50,
		preload_use:'use',//use
		preloaddata:'photo_t91.jpg,photo_t92.jpg,photo_t93.jpg,photo_t94.jpg,photo_t95.jpg',
		thumb_preload_use:'',//use
		thumb_preloaddata:'',
		path:'images/'
	});
});
</script>

auto_edit_use:'use' 設定をしておくと大きさが変わった場合CSSの該当部分をJSで修正します
ので少し便利です

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

<script type="text/javascript">
$(function(){
	$(document).slice_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/ をつけた
[ , ]の付ける場所に注意

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

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


<script type="text/javascript">
$(function(){
	$(document).slice_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>

但し最初は読み込んだCSSの大きさでレンダリングされる場合があり、JSの処理途上で
設定値に修正されますので、見た目が悪い場合もあります。

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

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

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


 

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


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




★DOWNLOAしたJSの初期設定例

---前後略す---

var o = $.extend({
	imageWidth:800,
	imageHeight:400,
	speed:600,
	cycle_time:6000,
	first_time:2000,
	auto_use:'use',//use stop
	pager_box_use:'use',//use all-none
	pager_li_make:'',//make thumb
	autobtn_use:'use',//use
	loading_use:'use',
	auto_edit_use:'use',
	effect_type:'random',
	split_horizontal:8,
	split_vertical:4,
	delay_speed:80,
	preload_use:'use',//use
	preloaddata:'photo_t91.jpg,photo_t92.jpg,photo_t93.jpg,photo_t94.jpg,photo_t95.jpg',
	thumb_preload_use:'',//use
	thumb_preloaddata:'',
	path:'images/'
}, o || {});

---前後略す---

大きさなどが一定の場合は、JS側の初期設定値を書き換えたほうが便利です。

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

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

だけでよいことになる。

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

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


★ imageWidth、imageHeight、重要です。



	imageWidth:800,
	imageHeight:200,


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


JS実行命令の中に書く場合


$(function(){
	$(document).slice_photo({
		imageWidth:400,
		imageHeight:200,
		preload_use:'use',
		preloaddata:'photo_t11.jpg,photo_t12.jpg,photo_t13.jpg,photo_t14.jpg,photo_t15.jpg',
		path:'home/images/'
	});
});
等と変更する部分のみ書き入れる

注意、slice_photo({変更のプロパテイ}); と中に {} があることに気をつけてください
 

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


$(document).slice_photo();を書けない場合、下のようにする。
slice-photo JSの部分

(function($){
	jQuery.fn.slice_photo = function(o) {

		内部スクリプトは略する

	};
})(jQuery);

この後にJS実行命令を書き、JSを上書き保存する

$(function(){
	$(document).slice_photo();
});


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


 

[ 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=Shift_JIS" />
<title>SLICE-PHOTO-03</title>
<link rel="stylesheet" href="css/xxxx.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/slice-photo01s.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/slice-photo01s.js" /></script>
<script type="text/javascript">
	$(function(){
		$(document).slice_photo();
	});
</script>
<head>
<body>

<main>

<div id="pops_slice_photo">
	<div id="slice_photo_box">
		<div id="slice_photo_base"><div id="imgholder"><img src="images/photo_t91.jpg" width="800" height="400" /></div>
			<div id="slice_base">
			</div>
			<div id="count_data"></div><div id="loading"></div>
		</div>
	</div>
</div>
<div id="thumb_box_wrap">
	<div id="start_btn" title="AUTO ON/OFF">||</div>
		<div id="thumb_box">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul><span class="clear" />
		</div>
</div>

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


clearクラス設定の部分


単なるclear:bothの処理です
<span class="clear" />

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

clear:both を実行していますが、問題がある場合は書き換えるか、他の場所に移動ください。


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

 

スクリプトの改造など

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

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

 

 

スクリプトの設定資料


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

★ 初期 CSS 設定では、BOX各部にボーダー設定はありません。必要な場合は、使用者がCSSの変更をしてください。
標準ではPAGERを分離していますが、中に入れる事も可能です。その場合のCSS変更などは使用者が行ってください。


標準サイクルタイム参考図

★ サイクルタイムは一定でも、画像処理、画像の表示している時間は一定ではありません。実際画像表示は短かったり長かったり不定です。

当初HTMLに挿入された画像が表示されます。first_time は最初の画像処理実行(2枚目表示)までの時間です。


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


初期設定資料 1

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

項 目 1. 変数名 2. 初期値 3. 設定 備考
1.画像の大きさ(W) imageWidth 800 寸法は自由 重要、必ず記入ください
2.画像の大きさ(H) imageHeight 400 寸法は自由 重要、必ず記入ください
3.アニメ速度 speed 600 自由 400-800
4.サイクルタイムfirst_time cycle_time 6000 自由(自動設定あり) 5000以上
5.初期タイム first_time 2000 自由 1000以上
6.オート表示機能 auto_use use use/stop 基本的にはオート
7.ページャーの利用 pager_box_use use/all-none/number-none 自由 基本的には使用
8.ページャーの要素の自動生成 pager_li_make - make/thumb thumbはサムネール
ページャーの利用useで有効
9.オート入切ボタン autobtn_use use 自由 ボタンが無いと再スタートできない
10.loading画像を使用する loading_use use 自由 場合により使用しない
11.自動でCSSを修正 auto_edit_use use 自由 必要部分のW Hを修正
12.Effectのタイプ選定 effect_type random random 使用していません
13.横分割数 split_horizontal 8 自由 3-12位
14.縦分割数 split_vertical 4 自由 3-6位
15.遅延時間単位 delay_speed 80 80-150 内部で設定変更あり
16.パターンの使用 pattern_use - (use)JSにより違いあり 未使用
17.プリロードを実行する preload_use use (use) 標準、プリロード実行
18.プリロード画像 preloaddata photo_t91.jpg,....... 使用画像を 重要、必ず設定ください
19.サムネールプリロード実行 thumb_preload_use - (use) 必要ならば設定
20.サムネール画像 thumb_preloaddata - 使用画像を 必要ならば設定
21.画像までのパス path images/ フォルダまでのパス 重要、必ず設定ください
-------- - - - -

use 設定部分は使用するなら use または指定文字、使用しないなら何も書かない。例 ''
サイクルタイムは指定できます。最低値として5000 を入力ください。

 

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


  1. imageWidth: 画像サイズ、横幅、または表示サイズ。
  2. imageHeight: 画像サイズ、高さ、または表示サイズ。参考、[ 9 ] 画像サイズをかえないで表示サイズだけ変更したい
  3. speed: 標準 600 です。400-800 位が最適です。画像サイズが小さい場合は speedを小さく、画像サイズが大きい場合は speedを大きくします。
  4. cycle_time: 標準 5000 です。注意、画像処理により画像表示時間は異なります。
  5. first_time: 標準 2000 です。環境にもよりますが、体外のものは1枚目の画像を見る時間も無く2枚目に移行してしまうのが実情ですので、それを回避するために設定しました。
  6. auto_use: 標準 use なしに設定しても自動になります。最初停止状態からはじめたい場合stopを設定します。
  7. pager_box_use: 標準 use です。pagerboxなど使用しない場合はall-noneを設定します。ページャー類のHTMLは不要です。pager部分のみ使用しない場合はnumber-noneを設定します。
  8. pager_li_make: 標準なし。通常は使用者がHTMLに記載しますが、make または thumb で li 部分のみ自動生成されます。
  9. autobtn_use: 標準 use 。入り切りのボタンになります。これが無いと再スタートは出来ませんので注意ください。
    (「番号ボタン」を押した場合、自動は解除になります。マニュアル操作だけになりますので、再スタートさせるにはどうしても「入り切りのボタン」が必要になります。簡単なエフェクトと違い、スライスエフェクトの時間がかかりますので、JSの内部処理の関係でむやみに「番号ボタン」を押した場合のエラーを回避するための処置です。「再スタート」させた場合は最初サイクルタイムがあたえられます。処理の途中でボタンを操作してもアニメが終了するまで機能しません。)
  10. loading_use: Loading 画像は無くとも、使用に差し支えありませんので、非表示にすることも可能です。
    ( Loading 画像は好みのものと取替えられます。CSSはそのままで中央表示になります )
  11. auto_edit_use: 編集機能 auto_edit_use は画面の大きさなど簡単な部分を自動で修正します。(主に幅、高さのみ変更)、設定なしの場合はCSSで直接書き換えます。詳細は下の説明参照。
    CSSの変更は基本的には、幅と高さだけの変更ですから、簡単ですが、、。
  12. effect_type: は random を記入ください。変更できません。未使用
  13. split_horizontal: 横分割数。100x100 のブロック単位で分割すると効率的のようです。画像により100x100の寸法で分割が出来ない場合はなるべく「正方形」に近い形に分割します。
  14. split_vertical: 縦分割数。縦x横の「合計分割数」が大きくなると動かないマシンが出てきますので注意。(縦x横=100 前後までを目安にしてください)
  15. delay_speed: 遅延速度。80-100位、(50 設定可能)、スライス画像の登場する間隔の時間と考えればよい。
  16. pattern_use: 特殊パターンを使用するか。分割の状態により「効果のない」場合もあります。原則、「等分割」で「正方形」の画像用途です。JSにより設定できないものもあります。
    このJS(slice-photo01s)では自動で内部で50%の割合で切り替えしています。
  17. preload_use: プリロードを使用するは、原則 use です。先に読み込みしていない場合でも画像の表示にはLOAD処理をしていますので時間がかかるだけの違いです。
  18. preloaddata: は「表示する画像」を書き込んでください。画像の大きさは一定です。(JSに直接記入も可能)
  19. thumb_preload_use: サムネールのプリロードを使用場合に設定、通常の、上で使用する大きな画像と違ってあまり必要ではありません。
  20. thumb_preloaddata: サムネールを自動生成する場合はサムネールのデータが必要です。
  21. path: プリロード画像へのパスを記入します。判らない場合は http:// で始まる絶対パスを記入ください。

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


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

 

PAGERと設定の関係


初期設定資料 2

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

項 目 1. 自動表示 2. 入切ボタンの使用 3. 番号ボタン自動生成 4.PAGER BOX使用 備考
設定変数名 auto_use autobtn_use pager_li_make pager_box_use -
- - - - - -
PAGER不使用
全体を非表示
use 設定しない 設定しない all-none
(番号自動生成なし)
#thumb_box_wrap部分非表示
HTMLを書かない
PAGER不使用
番号を非表示
use use 設定しない number-none
(番号自動生成なし)
ul部分非表示
HTMLを書かない
- - - - - -
PAGERを使用 1 use use make use 番号自動生成
PAGERを使用 2 use use 設定しない use 番号を手書きで書く
最初自動にしない stop use 自由 use 入切ボタンでスタート
番号だけの自動 use use 自由 use 自動は解除にならない
番号だけのマニュアル操作
簡易アルバム向き
stop 設定しない 自由 use 入切ボタンがないので自動に戻れない
サムネール使用 use use thumb use 自動生成でなければHTMLを書く
-------- - - - - -

pager_box_use: use 設定以外は番号およびサムネールは自動生成されません。HTML手書きの場合でもuse設定にしてください。

常にJSのなかでは、「自動表示」で処理されています、「設定無し」にしても自動になります。

「番号ボタン」を押すと自動表示は解除される。「入切ボタン」が無いと自動表示に戻れない。このことを基本に考えればよい。

番号の自動生成の場合は手書きでHTML部分 <li></li> を書かないでください。

サムネール自動生成の場合はJSにサムネール画像の名前をいれてください。<li><img /></li> が作られ登録画像名が src に代入されます。
画像までのパスは共通です。

 

アルバムとして使用する場合


アルバムとして使用する場合もあることでしょう。アルバムの場合は比較的画像枚数が多いと推定されます。また自動表示でも困ることでしょう。
そこで、、
1. 余計な画像を先き読み出ししないように、画像のプリロード機能、preload_use:'' useを解除する。
2. 「番号だけのマニュアル操作」になるように、ページャーボタン類を設定する。上の表、[ 設定のまとめ表 2 ]PAGERと設定の関係参照
3. 番号は多くなるので自動で作るように基本HTMLのみを書き、pager_li_make:'make' と make の設定にすれば手間が省ける。
4. 画像の大きさは全て同一サイズのみになります、preloaddata:'画像名,画像名,..................画像名' と登録します。
5. サムネール画像を使用するなら、画像準備が面倒ですが、その設定をすればよいわけです。pager_li_make:'thumb'と thumb を設定してください。
6. サムネール画像がおおくて収まりきらない場合などは、CSSでレイアウト調整します。

これで簡単なアルバム機能になりました。1枚ずつ見ることができます。

 

画像の大きさと分割数などの目安


性能のあまり良くないものにも適用できる値です。但し必ずしも軽快に作動するものではありません。
古いマシンの来客が無いようなサイトでは分割を増やしても良いかも知れません。これらは使用者の判断です。


標準設定資料、「背景画像」を使用した場合、[ 設定の目安表 / テスト結果からの値です ]

項 目 1. 画像の大きさ 2. 合計スライス数 3. delay 変更値 4. speed 速度 5. 最大分割合計 備考
1.横長画像
(縦横分割違い)
800x200 16分割 8x2 80-100 600 120 (100)
2.横長画像
(縦横分割違い)
800x400 32分割 8x4 80-100 600 120 (100) 標準サンプル
3.横長画像
(縦横分割違い)
800x600 48分割 8x6 80-100 600 120 (100) 通常の限度
4.横長画像
(縦横分割違い)
1000x600 60分割 10x6 100 800 120 (100) 可能、限度
5.正方形の画像
(等分割)
500x500 36分割 6x6
(5x5推奨)
80-100 600 120 (100) 5x5推奨
6.正方形の画像
(等分割)
600x600 36分割 6x6 80-100 600 120 (100)
6.正方形の画像
(等分割)
700x700 49分割 6x6 80-100 600 120 (100) 700x700画像位が限度
7.--- - - -

※ 標準では100x100ピクセル単位の分割になります。寸法の合わない場合は、自由に分割ください。但し見た目の感じは違ってきます。
※ 動きの悪い場合は分割数を少なくする。または delay 変更値を大きくして、スライス画像の間隔をあける。
※ 画像の縦横比でパターンを適用し難いものには、パターン設定をしない。(パターン設定変更の出来ないタイプもあります、正方形に近い場合は効果がある)
※ 性能の悪いマシンに適応するには、分割数を減らすこと。delay 変更値を大きくすること。
※ 1000x600 以上の画像ではテストしていません。
※ 年月が経過するごと、古いマシンはなくなりますので、分割数など増やすことができます。
※ 記載はしていません、delay 変更値 50 まで作動は可能ですが、古いマシンの場合旨く作動できないパターンなどがあります。
※ 上記資料は、性能の良く無いマシンをも含む、「背景画像」を使用した場合です。スライスチップ(スライスBOX単位)に<img>で処理した場合は少し重くなりますので合計分割数は減らします。
※ 「背景画像」では無く直接「画像」を使用した場合は少し重くなります。

 

DOWNLOAD したJSを書き換えて状態を知る


DOWNLOAD したJSの初期設定部分を書き換えて、HTMLを表示して見ましょう。色々な違いを知ることができます。


  1. 分割をかえて実行してみる。設定値は自由です。標準設定値を超えてもかまいません。状態を把握します。
  2. アニメ速度をかえて見ましょう。( speed ) 400-800
  3. 遅延値をかえて見ましょう。( delay_speed ) 80-150
  4. パターンを設定して見ましょう。設定できない場合あり。( pattern_use を use にする。slice-photo01sは自動で50%の確率で、パターンを設定しています)
    JS400行付近、var patternflag = Math.floor(Math.random() * 2) || 0;
  5. 最新のマシンをお持ちの方なら、パワーがあるので、かなりの分割も出来るでしょう。但し古いマシンでは旨く作動はしません。
  6. ブラウザに左右される要素は少ないです。マシンのパワーに大きく左右されます。

アニメごとの設定状況を確認する


アニメごとの設定状況を「テキスト表示」するように設定してみる。( JS先頭部分に記載、var show_text_use = 'use' にする。)

そのときの状況が表示されます。これはローカルで確認する場合です。実際にサイトアップするときは解除してください。
「動きの名称」は番号ではわかり難いので、説明用に使用しているものです。(複合的な組み合わせですので、名称のとうり動かない場合もあります)
私はこれでデバックしています。

 

ページャー部のレイアウトおよびCSSの変更について


レイアウトおよびCSSの変更は使用者の自由です。その場合 auto_edit_use を解除して、使用者がCSSで全て設定ください。

入り切りボタンは、#start_btn であれば判別します。

番号部分は、#thumb_box であれば判別します。JS側で番号部分アクテイブの場合 pgr_actived クラス、ホーバーの場合 pgr_hoverd クラスがあたえられます。

ページャー部のクロスブラウザ中央あわせは少々面倒ですから注意ください。

以上の点、留意して設計します。


ページャーにサムネールを入れた場合の簡単なCSS例です。


40x20の大きさのサムネールを配置したとする

HTML


<div id="thumb_box_wrap">
	<div id="start_btn" title="AUTO ON/OFF">||</div>
		<div id="thumb_box">
		<ul>
			<li><img src="images/photo_t91ss.jpg" width="40" height="20" /></li>
			<li><img src="images/photo_t92ss.jpg" width="40" height="20" /></li>
			<li><img src="images/photo_t93ss.jpg" width="40" height="20" /></li>
			<li><img src="images/photo_t94ss.jpg" width="40" height="20" /></li>
			<li><img src="images/photo_t95ss.jpg" width="40" height="20" /></li>
		</ul><span class="clear" />
		</div>
</div>

CSS


wrapの高さ変更
#thumb_box_wrap {
	height:30px;
}

番号部分をサムネールの大きさにして少し変更
/*40x20 thumb*/
#thumb_box_wrap #thumb_box ul li {
	display:inline;
	list-style:none;
	width:40px;
	height:20px;
	margin:0 0 0 2px;
	border:1px #000000 solid;
	background-color:#000000;
	overflow:hidden;
	cursor: pointer;
	float:left;
}
#thumb_box_wrap #thumb_box ul .pgr_actived {
border-top:1px #FF0000 solid;
}
#thumb_box_wrap #thumb_box ul .pgr_hoverd {
border-top:1px #FFFFFF solid;
}

変更などは使用者の自由です。


ボタン類を中央に配置する。


クロスブラウザにするには、「入切ボタン」を含む構造ですので、少し面倒です。

#thumb_box_wrap に text-align:center; 設定。

#thumb_box の幅を計算して width:XXXpx; 設定。(幅は「入切ボタン」、マージンを考慮して決める)

#thumb_box_wrap に margin:0 auto; 設定して中央に表示させる。

text-align:centerのみではなりません。


 

サイトアップ前の、ローカルでのテストについて


以前のpops-slice-photoより画像を背景画像に変更したために、幾分軽くなっています。4,5年以降の購入マシンの新しい環境では問題ありません。それ以前の環境ですと幾分負荷がかかると推測されます。
画像の大きさ、分割状態、設定の値により大きくアニメ動作が違ってきますので、サイトアップ前にローカルでテストされることを推奨します。
簡単な方法は、このサンプルのJSの分割を変更してみてください。おおよその見当は付くとおもいます。


  1. このスクリプト動作時に、アニメを継続して1秒-4秒もの間連続動作させていますので他のJSなどに影響をおよぼします。ともにマシンの性能による動作の違いがあります。分割数が大きくなれば負荷がかかります。
  2. JS設定の「サイクルタイムを表示する」show_text_use = 'use' にします。サイクルタイムなど動作状況が表示されます。テスト終了後には元にもどします。
  3. 設定の違いで大きく見た目が変わるので、最適な分割数、アニメspeed、遅延値、などを実際に作動させて決定してください。
    (画像の大きさ、分割別の標準設定の資料を参考にしてください)
  4. 遅延値をあまり小さくしないで、好みの状態にするのがコツです。スムーツに動作しない場合は分割数を小さくする(合計分割数を減らす)のが効果的です。
  5. アニメspeed、は画像の大きさによって変更します。値が大きいと「ゆったり」動作になります。
  6. 重要、同じ表示エリアに「重いFLASH」がある場合には旨く動作しません。他にのjQueryアニメ利用のものがある場合は影響を与えることがあります。

 

FLASHなどの影響を抑える


FLASHなどは動作にパワーが必要ですから、それの影響を受けることが原因です。勿論このスクリプトも重く、動作にパワーが必要であることも原因です。


  1. FLASH、動画などと、プラウザ画面に同時に表示しないように、それぞれを離してレイアウトする。プラウザ画面からズレればパワーは回復します。
  2. FLASHが軽いものならば差し支えありません。最近の広告などは軽いものが多いようです。
  3. 普通のJSでも、アニメを同時に実行すれば、どちらかに影響があるのが当たり前ですが、
    影響があるJSのアニメ速度を小さくすれば、影響を最小限にできるようです。
  4. その他、重く動作しない解決の出来ない原因があれば、別ページで単独で使用するほかありません。

 

画像の大きさ修正について


「画像サイズをかえないで表示サイズだけ変更したい」

  1. 出来ません、ページに対して画像寸法が合わない場合には、面倒でも「新しい画像サイズ」のものをサイトUPしなければなりません。
  2. 無理やり表示サイズ変更は、スライス処理をした場合寸法が合わなくなったり不具合が発生します。
  3. 但し、サムネールはスライスなどの処理は行いませんので自由に表示サイズなど変更できます。

 

サンプル HTML JS CSS の文字コードについて


以前は「日本語文字コード」で書いていましたが、新たなサイトに移行してから全て「UTF-8」(UTF-8N)で記載します。


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

 


 

 

ライセンス (GPL)


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

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

 

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


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


企画制作:POPS WEB KOUBOU