POPSブログ

簡易SLICE-PHOTO/4

42

  Category:  jquery2012/03/03 pops 

簡易SLICE-PHOTO-4、お祭り騒ぎタイプですから、落ち着きの無い方に最適です。


簡易SLICE-PHOTO-4 (お祭り騒ぎタイプ)

pops-slicephoto04.js

スライス、サンプル表示



HTML構造を直接書きますが、残り画像はJS側スクリプトに記述します。

  • エフェクトの種類を増やしました。
  • 簡易記述方式のJSです。読み込めば直ぐ実行します。
  • サイクルタイムは、JSで2種設定できます。書き換えてください。
    (スタートまでの時間、サイクル、スライドの時間など、画像の大きさ状況にあわせる)
  • JSで必要な設定をして上書き保存する。
  • 画像は個人で、5-10枚用意ください。
  • 画像名、画像までのパスはJSに記載します、随時ロード形式です。
    (その都度、画像をロードしますので、画像転送量を少し抑えることができます)
  • 画像の大きさで、CSSをも変更ください。
  • TOPページ用途です。複数の設置は原則できません。
  • IE8 はキレイに動作しません。Google Chrome を利用ください。

簡単な動作の説明

説明図


基本的には簡易SLICE-PHOTO-1と余り変わりませんが、外周に消失点を設け、そこから IN OUT します。パターンを増やしました。
当方独自に、スライス要素の伸縮の方向で分類しています。(random_scale)それを組み合わせて多彩な動きにしています。変化に富んでいると言うより騒がしい雰囲気ですから、当然好みはわかれます。
前のものは IN OUT 同じところで処理していましたが、今回は分離しました。
ランダムな条件で動作していますので、場合にはパターン等と相性の合わないものも含みます。
回転できませんが、それでもそれなりの効果はあります。表示、動作はマシンの性能が大きく関わりますので十分な注意が必要です。


簡単なスクリプト説明


外周の位置情報です

function slice_set() {
	//位置情報 13
	slice_posX = [bs_W/2,bs_W/2,0,bs_W/2,bs_W,bs_W,bs_W,bs_W/2,0,0,bs_W/4,bs_W*3/4,bs_W,0];
	slice_posY = [bs_H/2,bs_H/2,0,0,0,bs_H/2,bs_H,bs_H,bs_H,bs_H/2,bs_H/2,bs_H/2,bs_H,0];

	途中略す
}
ActionSprict用に作ったものを流用しています。マシン環境が悪い場合はおもいです。
delay_noで作るものと同じですが種類が多いだけ
//パターンを作る
if (patternflag==1) {

	//パターン新しい修正を加えた/ズレを少なく修正/計算の簡易化のため先にマイナス
	var sh = split_h - 1;//横分割
	var sv = split_v - 1;//縦分割
	var center_no = (split_total-1)/2;//中央
	var k = 0;
	var kk = 0;//縦方向にカウント

	for (var i=0; i < split_h; i++) {
		for (var j=0; j < split_v; j++) {
					
			kk = j * split_h + i;//縦方向にカウント

			switch(pattern_no){
				case 0:
					delay_pt[k] = Math.abs(i - (sh / 2)) + Math.abs(j - (sv / 2));//中心より広がる
				break;
				case 1:
					delay_pt[k] = k * 0.2;//配列の順序に
				break;
				case 2:
					delay_pt[k] = Math.abs(i + 0.5 - sh / 2) + j * 0.01;//内から外
				break;
				case 3:
					delay_pt[k] = Math.abs(i - j * split_h / split_v);//対角線状に広がる、補正
				break;
				case 4:
					delay_pt[k] = (j + i) / 4 + 2 * i;//左から右へ
				break;

				途中略す-------------------

				default:
					delay_pt[k]  = (i + j) * 0.5;//要素の展開TIMEパターン標準 左上から右下へ、斜め最適化
			}
						
			//要素を同時に表示すると負荷が大きく旨く行かない、0.5-1ぐらいがよいようだ
			//全て同時以外
			if (pattern_no != 5) {
				var puls = delay_pt[k] * 5;//2-10
				delay_pt[k] += puls + (i * 0.8 + j * 1);
			}
			k ++;
		}
	}

}

patternの速度を変えることができます
//patternを使用
if (patternflag==1){
	delay_st[k]=delay_pt[k]*delay_speed/4;
}

設置方法

簡易JS記述、間違いの少ない、setTimeout の通常方式で記述しています。なお、設置するページが違えば、別画像ででも使用できま すが、画像の大きさが違えば別のCSS名で新たに作ってリンクしてください。


簡易SLICE-PHOTO-1を参照ください。【参照】簡易SLICE-PHOTO-1


[ HTML構造を作る ]
以下のように構造を作ってください。ID は #pops_slice_photo です。


<div id="pops_slice_photo">
	<div id="slice_box">
		<div id="s_imgholder"><img src="/main/images/photo_m1.jpg" width="640" height="200" /></div>
		<div id="slice_base"></div>
		<div id="s_loading"></div>
		<div id="view_text"></div>
	</div>
</div>

注意、最初の画像を #s_imgholder に書き込んでください。また全画像はJSに登録します。


[ 使用方法 ]、JSを読み込むだけで実行します。またHEAD部分に直接記述しても実行します。
注意、関数、delay()を使用していますので、jquery1.42以降のバージョンで作動します。


読み出す場合
<link rel="stylesheet" type="text/css" href="/main/css/pops-slicephoto04.css" />
<script type="text/javascript" src="/main/js/jquery.js"></script>
<script type="text/javascript" src="/main/js/pops-slicephoto04.js"></script>

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

HEAD部分に直接JSを記述する場合
<script type="text/javascript">
	ここにJS部分を直接記述
</script>

JS、CSS、Loading画像

JS pops-slicephoto04.js 通常方式

同一のループを何段にも重ねていますが、勿論1つのループで処理は可能ですが、正確なdelay値をアニメで処理させるために、あえて分割しています。マシン環境により正確にdelay値を送出できるとは限りません。ActinScriptなどとは同一に出来ません。中には使用していない変数もあります。


//pops-slicephoto04.js
//setTimeout loading 通常方式
//POPS WEB KOUBOU

(function($){

	$(function(){

		var bs_W = 640;
		var bs_H = 200;
		var split_h = 12;
		var split_v = 4;
		var split_total = split_h*split_v;

		var first_time = 12000;//スタートまでの時間、5000以上 
		var cycle_time = 8000;//サイクル 5000以上
		var speed = 600;//拡大縮小時間 400-1000
		var delay_speed = 200;//delay基準時間 100-200
		//TEXT表示
		var text_use="";//use

		//画像までのパス
		var path='/main/images/';
		//画像名を登録する
		var img_urls=['photo_m1.jpg','photo_m2.jpg','photo_m3.jpg','photo_m4.jpg'];
		var list_len=img_urls.length;

		//jQueryObjectCache
		var imgholder_elm,transition_base_elm,slicebase,cleaner_elm;
		var img_url,img_url2,loading,thumbshowbox;
		var imgPreloader;//opela

		//chash
		transition_base_elm = $('#slice_box');
		imgholder_elm = $('#slice_box #s_imgholder');
		slicebase = $('#slice_box #slice_base');
		loading = $('#slice_box #s_loading');

		var count = 0;
		var img_url = "";
		var keep_url = "";

		//slice-OBJ
		var slice_chips = [];
		var slice_type = '';
		//slice in
		var slicebs_pos_x = [],slicebs_pos_y = [],slicebs_W = [],slicebs_H = [];
		var slice_W = 0,slice_H = 0,slice_Wb = 0,slice_Hb = 0;
		var slice_posX = [],slice_posY = [];
		var positions = [];
		//out
		var width_end = [],height_end = [];
		var end_pos_y = [],end_pos_x =[];

		//移動位置配列
		var mv_posX = [];
		var mv_posY = [];

		var sliceflag = 0;
		var anime_move = "";
		var box_len;
		var box_len2;
		var delayflag = 0;

		//IN OUT
		var in_type_nm = ['in','out','in','out','in','out'];
		//位置の名前20
		var pos_name = ['center','center','given','given','randmom','randmom','slideTop','slideBottom','slideRight','slideLeft','diagonal4','diagonal2','doorHorizontal','doorVertical','centerHorizontal','centerVertical','none','none','none','none'];

		//FADE-SET
		var fade_set = '';
		//global
		var gl_roop_v = 0;
		//Even算出
		var even_v = 1;
		if (split_v % 2 != 0) {even_v = 0;}

	//------------------------------------------------

		//init
		var init = function () {

			//loading-Set
			loading.css({'width':bs_W,'height':bs_H,'display':'none'});
			//sliceBox非表示
			slicebase.css({'display':'none'});

			var roop_v = split_total;
			//global
			gl_roop_v = roop_v;

			//make chip
			var sliceboxs="";
			for (var i=0; i < roop_v; i++) {
				sliceboxs += '<div id="'+ 'slice'+ i + '" class="slice_bk"></div>';
			}
			//append s_base
 			$('#slice_base').append(sliceboxs);
			//len
			box_len = $('.slice_bk').length;
			//slice chips
			for (var i=0; i < roop_v; i++) {
				slice_chips[i] = $("#slice"+i);
			}
			slicebase.find(".slice_bk").css({'display':'none'});

			//slice-set
			slice_set();

			//最初の画像をINNER画像BOX1にセット表示する
			keep_url=path+img_urls[count];
			//次ぎの画像の番号セット
			count = 1;

			//START Main-timer-set
			window.setTimeout(nextImage,first_time);
		}

		//slice
		function slice_set() {

			//位置情報 13
			slice_posX = [bs_W/2,bs_W/2,0,bs_W/2,bs_W,bs_W,bs_W,bs_W/2,0,0,bs_W/4,bs_W*3/4,bs_W,0];
			slice_posY = [bs_H/2,bs_H/2,0,0,0,bs_H/2,bs_H,bs_H,bs_H,bs_H/2,bs_H/2,bs_H/2,bs_H,0];

			//スライス
			slice_W = Math.round(bs_W/split_h);//YOKO
			slice_H = Math.round(bs_H/split_v);//TATE
			slice_Wb = bs_W - slice_W * (split_h - 1);
			slice_Hb = bs_H - slice_H * (split_v - 1);
			positions = [bs_H/2,bs_H,-slice_H/2,bs_W/2,bs_W,-slice_W/2,0,0,0,0];

			var k = 0;
			for (var i=0; i < split_h; i++) {
				for (var j=0; j < split_v; j++) {
					//大きさ保存
					slicebs_W[k] = slice_W;
					if (i == split_h - 1) {slicebs_W[k] = slice_Wb;}
					slicebs_H[k] = slice_H;
					if (j == split_v - 1) {slicebs_H[k] = slice_Hb;}
					//位置保存
					slicebs_pos_x[k] = slice_W * i;
					slicebs_pos_y[k] = slice_H * j;

					k ++;
				}
			}
		}

		//sliceImage関数
		function sliceImage (){

			anime_move = 'move';
			set_text("");

			//delayクリア
			var delay_st=[];
			var delay_pt=[];//ptan

			//多目的判定用
			var chgxyflag = Math.floor(Math.random() * 5);
			//多目的判定用2 追加
			var chgflag = Math.floor(Math.random() * 2);

			//IN OUT
			var in_type_no = Math.floor(Math.random() * in_type_nm.length);

			//パターンの使用/パターンを使用しなくとも少し変化はあるようにしている
			var patternflag = Math.floor(Math.random() * 4);

			//通常パターンを選定する
			var pattern_no = Math.floor(Math.random() * 22);

			//移動ポジション
			var pos_no = Math.floor(Math.random() * 13);//13

			var slice_move_type = in_type_nm[in_type_no];
			//random-scale/0はなし
			var random_scale = Math.floor(Math.random() * 6);
			if (random_scale == 0) {random_scale=3;}

			//パターンの使用random_scale3に強制変更
			if (patternflag==1) {random_scale = 3;}
			if (random_scale == 4) {pos_no = 0;}

			//標準delay_no 0-8
			var delay_no = Math.floor(Math.random() * 9);

			//delayed遅延させる/20%
			var delayed = Math.floor(Math.random() * 5);

			//randomポジション
			var ranpos_no = Math.floor(Math.random() * 3);

			//delay_noの確率をさげる
			if (delay_no == 7) {
				if (chgxyflag > 3) {random_scale=7;}
				else {delay_no = 3;}
			}

			//url
			var slice_url = img_url;
			if (slice_move_type == 'out') {slice_url = imgholder_elm.children("img").attr('src');}

			//BOX欄外移動
			slicebase.css({'top':0,'left':0,'width':bs_W,'height':bs_H});

			var k = 0;
			for (var i=0; i < split_h; i++) {
				for (var j=0; j < split_v; j++) {

					slice_chips[k].css({'left':slicebs_pos_x[k]});
					slice_chips[k].css({'top':slicebs_pos_y[k]});
					//BACKGROUND-SET url
					slice_chips[k].css({'width':slicebs_W[k],'height':slicebs_H[k],'background-image':'url('+ slice_url + ')'});
					//BACKGROUND-SET position
					slice_chips[k].css({'backgroundPosition':(slicebs_pos_x[k] * -1) + 'px ' + (slicebs_pos_y[k] * -1) + 'px'});
					k ++;
				}
			}

			if (patternflag==1) {

				//パターン新しい修正を加えた/ズレを少なく修正/計算の簡易化のため先にマイナス
				var sh = split_h - 1;//横分割
				var sv = split_v - 1;//縦分割
				var center_no = (split_total-1)/2;//中央の番号
				var k = 0;
				var kk = 0;//縦方向にカウント

				for (var i=0; i < split_h; i++) {
					for (var j=0; j < split_v; j++) {
					
						kk = j * split_h + i;//縦方向にカウント

						switch(pattern_no){
							case 0:
								delay_pt[k] = Math.abs(i - (sh / 2)) + Math.abs(j - (sv / 2));//中心より広がる
							break;
							case 1:
								delay_pt[k] = k * 0.2;//配列の順序に
							break;
							case 2:
								delay_pt[k] = Math.abs(i + 0.5 - sh / 2) + j * 0.01;//内から外
							break;
							case 3:
								delay_pt[k] = Math.abs(i - j * split_h / split_v);//対角線状に広がる、補正
								//delay_pt[k] = Math.abs(i - j);//対角線状に広がる、ずれるが簡単
							break;
							case 4:
								delay_pt[k] = (j + i) / 4 + 2 * i;//左から右へ
							break;
							case 5:
								//delay_pt[k] = 2;//全て同時/注意、負荷が大きいので出来ないばらけさせている
								delay_pt[k] = (i + j) * 0.1;
							break;
							case 6:
								delay_pt[k] = Math.abs(sv - j) + Math.abs(sh - i);//右下から左上へ
							break;
							case 7:
								delay_pt[k] = 2 + Math.abs(sh - i);//右から左へ
							break;
							case 8:
								delay_pt[k] = (Math.abs(Math.abs(i - sh / 2) - sh) + Math.abs(Math.abs(j - sv / 2) - sv)) * 0.75;//外から中心へ、時間調整
							break;
							case 9:
								delay_pt[k] = Math.abs(i - sh / 2) + j * 0.01;//縦状、内から外2
							break;
							case 10:
								//下から上へ
								delay_pt[k] = (split_h * split_v - kk) / 2;//縦カウントを使用
								//delay_pt[k] = 2 + Math.abs(sv - j);
								//delay_pt[k] = ((split_h * split_v) - (j * split_v + i)) * 0.5;//早く補正、始まるまで遅い
							break;
							case 11:
								//上から下へ
								delay_pt[k] = kk / 2;//縦カウントを使用
								//delay_pt[k] = 2 + j;
								//delay_pt[k] = j * split_v + i;
							break;
							case 12:
								delay_pt[k] = (2 + j) + (Math.abs(Math.abs(i - sh / 2) - sh));//上から閉じるように
							break;
							case 13:
								delay_pt[k] = Math.floor(Math.random() * 10) + 1;//ランダム、少し変更
							break;
							case 14:
								delay_pt[k] = Math.abs(k - (split_h * split_v) / 2) / 2;//中から外に3
							break;
							case 15:
								delay_pt[k] = Math.abs(k / 2 - j) / 2;//右から左に下からあがる、7番変形
							break;
							case 16:
								delay_pt[k] = Math.abs(i - (sh / 2)) - Math.abs(j - (sv / 2));//0番 中心からの位相ずれ
							break;
							case 17:
								delay_pt[k] = Math.abs(j * split_h / split_v - Math.abs(i - sh));//左右反転の対角線状、補正
								/*delay_pt[k] = split_v - Math.abs(i - j);//対角線状に外から内側に、3番の反対*/
								/*delay_pt[k] = Math.abs((i + j) - Math.abs(i - j))/2;//カギ状に*/
							break;
							case 18:
								delay_pt[k] = Math.abs(j + Math.abs(i - sh));//右上から左下に、斜め
							break;
							case 19:
								delay_pt[k] = Math.abs(i + Math.abs(j - sv));//左下から右上に、斜め、18番の上下反転
							break;
							case 20:
								delay_pt[k] = 2 + Math.abs(sv - j) + (Math.abs(Math.abs(i - sh / 2) - sh));//下から閉じるように
							break;
							default:
								delay_pt[k]  = (i + j) * 0.5;//要素の展開TIMEパターン標準 左上から右下へ、斜め最適化
								//delay_pt[k] = (k + (j * split_v + i)) * 0.2;
						}
						//同時のものが多いので、少しの時間差をつける/ActionScript用で早いので遅くする
						
						//要素を同時に表示すると負荷が大きく旨く行かない、0.5-1ぐらいがよいようだ
						//全て同時以外
						if (pattern_no != 5) {
							var puls = delay_pt[k] * 5;//2-10
							delay_pt[k] += puls + (i * 0.8 + j * 1);
						}

						k ++;

					}//roopEND
				}//roopEND

			}

			//移動ポジション
			var k = 0;
			rand_pos_v =0;
			for (var i=0; i < split_h; i++) {
				for (var j=0; j < split_v; j++) {
					//移動ポジション
					if(pos_no < 12) {
						mv_posX[k]=slice_posX[pos_no];
						mv_posY[k]=slice_posY[pos_no];
					}
					//randomポジション
					if (ranpos_no == 1) {
						rand_pos_v = Math.floor(Math.random() * 12);
						mv_posX[k]=slice_posX[rand_pos_v];
						mv_posY[k]=slice_posY[rand_pos_v];
					}
					k ++;
				}
			}

			//chips-display
			slicebase.find(".slice_bk").css({'display':'block'});

			//IN OUT
			//初期の大きさ-SET
			var pos_sx = 0;
			var pos_sy = 0;
			var k = 0;
			for (var i=0; i < split_h; i++) {
				for (var j=0; j < split_v; j++) {
					//移動縮小IN
					if (slice_move_type == 'in') {
						//scaleの決定
						//スケール変更なし、現在使用されていない
						if (random_scale == 0) {slice_chips[k].css({'width':slicebs_W[k],'height':slicebs_H[k]});}
						//XY
						if (random_scale > 3) {slice_chips[k].css({'width':0,'height':0});}
						//Y
						if (random_scale == 1) {slice_chips[k].css({'width':slicebs_W[k],'height':0});}
						//X
						if (random_scale == 2) {slice_chips[k].css({'width':0,'height':slicebs_H[k]});}
						//その場中心補正、実際には場所をずらして中心補正をしているようにみせかけて要る
						if (random_scale == 3) {
							pos_sx = slicebs_pos_x[k] + Math.floor(slicebs_W[k] / 2);
							pos_sy = slicebs_pos_y[k] + Math.floor(slicebs_H[k] / 2);
							slice_chips[k].css({'top':pos_sy,'left':pos_sx,'width':0,'height':0});
						}
						//中心補正以外を移動させる
						if (random_scale != 3) {
							slice_chips[k].css({'top':mv_posY[k],'left':mv_posX[k]});
						}
					}

 					//ANIME-OUT
					if (slice_move_type == 'out') {
						//移動後のスケールなどを設定する
						//スケール変更なし、現在使用されていない
						if (random_scale == 0) {width_end[k] = slicebs_W[k];height_end[k] = slicebs_H[k];}
						//XY
						if (random_scale > 3) {width_end[k] = 0;height_end[k] = 0;}
						//Y
						if (random_scale == 1) {width_end[k] = slicebs_W[k];height_end[k] = 0;}
						//X
						if (random_scale == 2) {width_end[k] = 0;height_end[k] = slicebs_H[k];}
						//その場中心補正
						if (random_scale == 3) {
							end_pos_x[k] = slicebs_pos_x[k] + Math.floor(slicebs_W[k] / 2);
							end_pos_y[k] = slicebs_pos_y[k] + Math.floor(slicebs_H[k] / 2);
							width_end[k] = 0;height_end[k] = 0;
						}
						//中心補正以外の移動位置
						if (random_scale != 3) {
							end_pos_x[k] = mv_posX[k];
							end_pos_y[k] = mv_posY[k];

						}
					}
					k ++;
				}
			}

			//delay-SET/delay_no
			var flag3 = 1;
			var kk = 0;//方向違いカウント
			var kkk = 0;//半分でカウントダウン
			var k = 0;
			for (var i=0; i < split_h; i++) {
				for (var j=0; j < split_v; j++) {
					//縦方向にカウント
					kk = i * split_v + j;

					kkk=k;
					if (k > (split_total-1)/2) {kkk = Math.abs(split_total-k)-1;}

					//patternを使用
					if (patternflag==1){
						delay_st[k]=delay_pt[k]*delay_speed/4;
					}
					//patternを使用しない
					if (patternflag !=1){
						if (delay_no == 0) {delay_st[k] = k*delay_speed;}
						if (delay_no == 1) {delay_st[k] = kk*delay_speed;}//50
						if (delay_no == 2) {delay_st[k] = Math.abs(k-split_total/2)*delay_speed;}//100
						if (delay_no > 2) {delay_st[k] = (i+j) * delay_speed;}
						//ほぼ同時確率少ない
						if (delay_no == 7) {delay_st[k] = i*5;}
						//外から
						if (delay_no == 8) {delay_st[k] = kkk*delay_speed;}//100
					}

					//delayed遅延
					if (delayed == 1) {
						if (flag3 < 0) {delay_st[k] +=500;}
					}

					k ++;
					flag3 *= -1;

				}
				if (even_v) {flag3 *= -1;}
			}


			//delay反転
			if (chgxyflag > 2) {
				delay_st.reverse();
			}

			var v_speed=speed;
			//ほぼ同時速度1000
			//通常とパターンで2つある
			if (delay_no == 7) {v_speed=1000;}
			if (pattern_no == 5) {v_speed=1000;}


			//TEXT
			var ptn="";
			if (patternflag==1){ptn=" /PTN "+pattern_no;}
			var text="SPLIT: " + split_total + " /IN.OUT " + slice_move_type + " /SC: "+ random_scale + " /POSNo:" + pos_no + " /DYNo " + delay_no + ptn + "";
			set_text(text);
			//set_text("START");

			//BOX 0.0移動
			slicebase.css({'top':0,'left':0});
			slicebase.css({'display':'block'});

			//ANIME-IN/new_split_total
			if (slice_move_type == 'in') {
				sliceflag = 0;
				var k = 0;
				for (var i=0; i < split_h; i++) {
					for (var j=0; j < split_v; j++) {
						//anime
						slice_chips[k].delay(delay_st[k]).animate({'width':slicebs_W[k],'height':slicebs_H[k],'top':slicebs_pos_y[k],'left':slicebs_pos_x[k]},v_speed,function() {
							sliceflag ++;
							//goto slice_image_parts/new_split_total
							if (sliceflag == split_total) {slice_image_parts();}
						});
						k ++;
					}
				}

			}

 			//ANIME-OUT
			if (slice_move_type == 'out') {
				imgholder_elm.children("img").empty().attr({'src':img_url}).css({'display':'block'});
				sliceflag = 0;
				var k = 0;
				for (var i=0; i < split_h; i++) {
					for (var j=0; j < split_v; j++) {

						//anime/終了位置大きさコピー
						slice_chips[k].delay(delay_st[k]).animate({'width':width_end[k],'height':height_end[k],'top':end_pos_y[k],'left':end_pos_x[k]},v_speed,function() {
							sliceflag ++;
							//goto slice_image_parts/new_split_total
							if (sliceflag == split_total) {slice_image_parts();}
						});
						k ++;
					}
				}
			}

		};

		//end-anime
		function slice_image_parts() {
			sliceflag = 0;
			imgholder_elm.children("img").empty().attr({'src':img_url}).css({'display':'block'});

			slicebase.css({'left':bs_W,'display':'none'});	
			anime_move = '';

			//set_text(" END");

			//keep-url
			keep_url=img_url;
			//cycle-time
			setTimeout(nextImage,cycle_time);

		};

		//NEXT
		function nextImage() {
			//カウントアップ
			count++;
			if (count > list_len-1) {count = 0;}
			//imgタグに入れる、URL取得
			img_url = path+img_urls[count];
			imgload ();
		}

		//imgPreloader
		var imgload = function() {
			//loading
			loading.css({'display':'block'});
			//set-imgPreloader
			imgPreloader = new Image();
			//onload
			imgPreloader.onload = function() {
				//loading
				loading.css({'display':'none'});
				sliceImage();
			}
			//url
			imgPreloader.src = img_url;
		}

		//set-text
		function set_text(text) {
			if (text_use == 'use') {
				$('#view_text').text(text);
			}
		}

		//init
		init();

	});

})(jQuery);

Loading画像 31x31



CSS pops-slicephoto04.css


/* pops-slicephoto04.css 日本語*/

#pops_slice_photo {
	display:block;
	position:relative;
	width:640px;
	height:200px;
	background-color:#000000;
}
#pops_slice_photo #slice_box {
	display:block;
	position:absolute;
	top:0;left:0;
	width:640px;
	height:200px;
	background-color:#000000;
	overflow:hidden;
}

#slice_box #s_imgholder {
	display:block;
	position:absolute;
	top:0;left:0;
	width:640px;
	height:200px;
	padding:0;
	margin:0;
	border-style:none;
	background-color:#000000;
}
#slice_box #s_imgholder img {
	padding:0;
	margin:0;
	border-style:none;
	text-decoration:none;
}

#slice_box #slice_base {
	display:block;
	position:absolute;
	top:0;left:0;
	overflow:hidden;
}
#slice_box #slice_base .slice_bk {
	position:absolute;
	background-position: 0 0;
	top:0;left:0;
	overflow:hidden;
}
#slice_box #s_loading {
	display: block;
	position:absolute;
	top:0;left:0;
	border:0;
	background: url("/main/images/loading.gif") no-repeat center center;
	background-color: none;/*Safari*/
}
#slice_box #view_text {
	display:block;
	position:absolute;
	top:5px;left:5px;
	width:80%;
	height:20px;
	color:#FF0000;
}

この、SLICE-PHOTO-4(pops-slicephoto04.js)を改造してページャー付きスライドショーにしました。

【参考スライドショー】簡易SLIDESHOW-4: 簡易SLIDESHOW/4


以上です。



[ この記事のURL ]


タグ:series , photo , Transition , jquery

[ 簡易SLICE-PHOTO シリーズ記事 ]

簡易SLIDESHOW/42012.03.14
簡易SLIDESHOW/32012.03.13
簡易SLIDESHOW/22012.03.12
簡易TRANSITION-PHOTO/42012.03.09
簡易SLICE-PHOTO/72012.03.05
簡易SLICE-PHOTO/62012.03.05
簡易SLICE-PHOTO/52012.03.04
簡易SLICE-PHOTO/42012.03.03
簡易SLICE-PHOTO/32012.03.02
簡易SLICE-PHOTO/22012.03.02
簡易SLICE-PHOTO/12012.03.01

 

ブログ記事一覧

年別アーカイブ一覧



[1]