POPSブログ

jQueryで画像分割してスライドする

196

  Category:  jquery2013/01/22 pops 

jQueryで、画像を分割 delay() で表示パターンを作り、主に「スライド」をさせます。縦長に分割した「ホリゾンタル」スライドの感じになります。2ドアのスライドも出来ます。

 

jQueryで画像分割してスライドする

jQueryで、画像を分割して、delay()を利用して表示パターンを作り、エフェクト処理を行うもので有り「スライド」であっても基本的に同じで、初期の移動位置が左右上下の離れた場所になるだけ。他のものより組み合わせが少なくなります。


画像分割してスライドして表示する(ホリゾンタル) サンプル


注意、多少重くなりますので、マシン性能が良くない場合は、Chrome でご覧ください。


Example

エフェクト中はボタンを押しても無効です。画像をロード出来ない場合「Loading画像」を「クリック」すれば解除されます。


  • PHOTO1
  • PHOTO2
  • PHOTO3
  • PHOTO4


 

サンプルのHTML JS CSS


HTML


<ul id="tab-menu">
	<li text="/main/images/toyota_car10.jpg">PHOTO1</li>
	<li text="/main/images/toyota_car11.jpg">PHOTO2</li>
	<li text="/main/images/toyota_car12.jpg">PHOTO3</li>
	<li text="/main/images/toyota_car13.jpg">PHOTO4</li>
</ul>
<div id="image-box-base">
	<div id="image-box"><img /></div>
	<div id="top-box"></div>
	<div id="loading"></div>
	<div id="text-view"></div>
</div>

text属性は当方が勝手に作った属性です。jquery attr() で読み込みできます。

画像URLは上記サンプルの例です。使用者の画像収納先に合わせてください。右上のテキスト(#text-view)はJSで非表示にできます。


JS

slice04.js


//slice04.js
//日本語
//スライド

(function($){

	$(function () {

		//設定
		var select_no=0;//最初に開くメニューの位置
		var speed=800;//フェード速度 600-1000
		var delay_speed = 150;//delay基準時間 100-250

		box_W=640;//画像BOX幅
		box_H=300;//画像BOX高さ

		//in outの設定は専用、autoならin_type_nmのデータで確率計算
		var in_out="auto";// in out auto
		//分割のの種類
		var split_type="free";// free set

		//free分割データ/最大分割合計に注意
		var splitHs=[9,9,9,7,5,9,15];
		var splitVs=[1,1,1,1,1,2,2];

		//set分割の設定、分割は固定される
		var split_h=9;//横分割数
		var split_v=1;//縦分割数
		var split_total=split_h*split_v;//分割合計
		var split_max=30;//最大分割合計

		//スライドタイプ名
		var slide_type_nm=['h-slide','v-slide','none'];
		//スライドタイプ初期値/自動で修正される
		var slide_type="h-slide";

		//TEXT
		var textview_use="use";// use none

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

		var no=0;
		var keep_no=select_no;
		var img_url="";
		var load_url="";
		var keep_url;

		//chip sliceオブジェクト
		var chipboxs=[];
		//chipの位置、大きさ保存容器
		var chip_pos_X=[],chip_pos_Y=[],chip_W=[],chip_H=[];
		//スライス変数
		var slice_W=0,slice_H=0,slice_Wb=0,slice_Hb=0;

		//IN OUT、確率変更可能
		var in_type_nm=['in','out','in','out','in','out'];
		var slice_move_type="in";

		var move=false;
		//移動位置配列
		var mv_posX=[];
		var mv_posY=[];
		//移動大きさ配列
		var mv_chipW=[];
		var mv_chipH=[];

		var sliceflag=0;
		var anime_move=false;
		var box_len;
		var delayflag=0;
		var patternflag=false;

		//Even算出
		var even_v=1;
		if (split_v % 2 != 0) {even_v=0;}

		//外枠jqueryオブジェクト
		var tabmenu=$("#tab-menu");
		var boxbase=$("#image-box-base");
		var imagebox=$("#image-box");
		var topbox=$("#top-box");
		var loading=$("#loading");

		//欄外移動
		topbox.css({'left':box_W});
		//loadingを一旦けす
		loading.css({'display':'none'});

		//指定場所のOPEN
		tabmenu.find("li").eq(select_no).addClass("active");
		img_url=tabmenu.find("li").eq(select_no).attr('text');
		//指定画像を表示
		imagebox.children("img").attr({'src':img_url});
		//
		load_url=keep_url=img_url;

		//スライス要素作成
		init();

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

		//init スライス要素作成
		function init() {

			//スライス要素最大値
			var roop_v=split_max;
			if (split_type == 'set') {
				roop_v=split_total;
			}
			//スライス要素を作る
			//make chip
			var sliceboxs="";
			for (var i=0; i < roop_v; i++) {
				sliceboxs += '<div id="'+ 'slice'+ i + '" class="slice_bk"></div>';
			}
			//append #top-box
 			$('#top-box').append(sliceboxs);
			//len 実際に作った個数
			box_len = $('.slice_bk').length;
			//slice chips
			for (var i=0; i < roop_v; i++) {
				chipboxs[i]=$("#slice"+i);
			}

			//slice-set
			if (split_type == 'set') {
				slice_set();
			}

		}

		//スライス要素の位置大きさ決定、保存
		function slice_set() {

			//スライス
			slice_W=Math.round(box_W/split_h);//YOKO
			slice_H=Math.round(box_H/split_v);//TATE
			slice_Wb=box_W-slice_W*(split_h-1);
			slice_Hb=box_H-slice_H*(split_v-1);

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

					k ++;
				}
			}
		}

		//メニューclick-action
		tabmenu.find("li").click(function() {

			//作動中は反応しない
			if(anime_move) {return false}
			no=tabmenu.find("li").index(this);
			if(no == keep_no) {return false}
			//メニューactive
			tabmenu.find("li").removeClass("active");
			$(this).addClass("active");

			//画像URL取得、画像の読み込み
			load_url=$(this).attr('text');
			imgload ();
			return false;

		});

		//loading-click-action
		loading.click(function() {
			//
			loading.css({'display':'none'});
			//menuを前に戻す
			tabmenu.find("li").removeClass("active");
			tabmenu.find("li").eq(keep_no).addClass("active");
			//フラグもどす
			anime_move = false;
			return false;
		});

		//画像Preloader
		function imgload () {

			loading.css({'display':'block'});
			//imgPreloaderを作成
			var imgPreloader=new Image();
			//イベントハンドラ
			imgPreloader.onload=function() {

				loading.css({'display':'none'});
				//画像表示に進む
				show_image();

			}
			//重要、最後に書く
			imgPreloader.src=load_url;
		}

		//画像表示処理
		function show_image() {

			anime_move=true;

			//BOX欄外移動
			topbox.css({'left':box_W,'top':0});

			//auto分割
			if (split_type == 'free') {

				//slice要素縮小
				//$(".slice_bk").css({'top':0,'left':0,'width':0,'height':0});
				//slice要素縮小
				for (var i=0; i < box_len; i++) {
					chipboxs[i].css({'top':0,'left':0,'width':0,'height':0});
				}

				splitNo=Math.floor(Math.random() * splitHs.length);
				split_h=splitHs[splitNo];
				split_v=splitVs[splitNo];
				split_total=split_h*split_v;//分割合計

				slice_set();

			}
			//IN OUT、現在IN固定
			slice_move_type=in_out;
			if (in_out == 'auto') {
				slice_move_type=in_type_nm[Math.floor(Math.random()*in_type_nm.length)];
			}

			//Even算出、分割が変わるので再計算
			even_v = 1;
			if (split_v % 2 != 0) {even_v=0;}

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

			//スライドタイプ決定
			slide_type=slide_type_nm[Math.floor(Math.random()*slide_type_nm.length)];

			//door補正
			if (split_v == 2) {slide_type="door";}

			//opacity用/スケール0は透明
			var optflag=Math.floor(Math.random()*4);
			//スライド反転判定用
			var chgflag_h=Math.floor(Math.random()*3);

			//多目的判定用
			var chgxyflag=Math.floor(Math.random()*5);
			//多目的判定用/スライド反転
			var chgflag=Math.floor(Math.random()*2);
			//ポジション反転係数1
			var poschg=1;
			if (chgflag) {poschg=-1;}

			//delayed遅延させる/20%
			var delayed=Math.floor(Math.random()*5);
			//標準delay_no 0-8
			var delay_no=Math.floor(Math.random()*8);

			//スケール変化1
			var scale_no=Math.floor(Math.random()*4);

			//スケール補正
			if (slide_type == 'h-slide') {scale_no=0;}
			if (slide_type == 'v-slide') {scale_no=0;}
			if (slide_type == 'door') {scale_no=0;}

			//optflag=0の場合透明度を設定する
			var opt=false;
			if (optflag < 1) {opt=true;}

			//透明はスケール0
			if(opt) {scale_no=0;}

			var slice_url=load_url;
			if (slice_move_type == 'out') {slice_url=keep_url;}

			//背景画像挿入
			var k = 0;
			for (var i=0; i < split_h; i++) {
				for (var j=0; j < split_v; j++) {

					//位置大きさCSSはあとで
					//BACKGROUND-SET url
					chipboxs[k].css({'background-image':'url('+ slice_url + ')'});
					//BACKGROUND-SET position
					chipboxs[k].css({'backgroundPosition':(chip_pos_X[k] * -1) + 'px ' + (chip_pos_Y[k] * -1) + 'px'});

					k ++;
				}
			}

			if (slice_move_type == 'out') {imagebox.children("img").attr({'src':load_url}).css({'display':'block'});}

			//初期の大きさ-SET
			var pos_sx=0;
			var pos_sy=0;
			var chipW=0;
			var chipH=0;
			var flag3=1;
			var k = 0;

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

					//opacityの補正
					chipboxs[k].css({'opacity':1});

					//scale_no 0 中心補正無し透過専用
					if(scale_no == 0) {
						pos_sx=chip_pos_X[k];
						pos_sy=chip_pos_Y[k];
						chipW=chip_W[k];
						chipH=chip_H[k];
					}
					//中心補正
					if(scale_no == 1) {
					//全てその場中心補正、実際には場所をずらして中心補正をしているようにみせかけて要る
						pos_sx=chip_pos_X[k]+Math.floor(chip_W[k]/2);
						pos_sy=chip_pos_Y[k]+Math.floor(chip_H[k]/2);
						chipW=0;
						chipH=0;
					}
					//scale_no 2 X補正
					if(scale_no == 2) {
						pos_sx=chip_pos_X[k]+Math.floor(chip_W[k]/2);
						pos_sy=chip_pos_Y[k];
						chipW=0;
						chipH=chip_H[k];
					}
					//scale_no 3 Y補正
					if(scale_no == 3) {
						pos_sx=chip_pos_X[k];
						pos_sy=chip_pos_Y[k]+Math.floor(chip_H[k]/2);
						chipW=chip_W[k];
						chipH=0;
					}

					//H方向slide移動/chgflag_h判定
					if (slide_type == 'h-slide') {
						//右、左、左右
						pos_sx=box_W;
						if (chgflag_h == 1) {pos_sx=box_W*-1;}
						if (chgflag_h == 2) {
							//交互
							if (flag3 < 0) {pos_sx=box_W*-1;}
						}
						//Yそのまま
						pos_sy=chip_pos_Y[k];
					}
					//V方向slide移動/chgflag_h判定
					if (slide_type == 'v-slide') {
						//下に移動
						pos_sy=box_H;
						if (chgflag_h == 1) {pos_sy=box_H*-1;}
						if (chgflag_h == 2) {
							//交互
							if (flag3 < 0) {pos_sy=box_H*-1;}
						}
						//Xそのまま
						pos_sx=chip_pos_X[k];
					}
					//2DOOR
					if (slide_type == 'door') {
						//上に移動
						pos_sy=box_H*-1;
						//下に移動
						if (j == 1) {pos_sy=box_H;}
						if (chgflag_h == 2) {
							//交互
							if (flag3 < 0) {pos_sy=box_H*poschg;}
						}
						//Xそのまま
						pos_sx=chip_pos_X[k];
					}
					//none位置変更なし
					if (slide_type == 'none') {
						//強制透過
						if(scale_no == 0) {opt=true;}
					
					}

					//位置大きさ保存
					mv_posX[k]=pos_sx;
					mv_posY[k]=pos_sy;
					//移動大きさ保存
					mv_chipW[k]=chipW;
					mv_chipH[k]=chipH;

					//CSSの設定、inは移動させる
					if (slice_move_type == 'in') {
						chipboxs[k].css({'left':pos_sx,'top':pos_sy,'width':chipW,'height':chipH});
						//透明度設定
						if(opt) {chipboxs[k].css({'opacity':0});}
					}
					//CSSの設定、outはそのまま
					if (slice_move_type == 'out') {
						chipboxs[k].css({'left':chip_pos_X[k],'top':chip_pos_Y[k],'width':chip_W[k],'height':chip_H[k]});
					}

					k ++;
					flag3 *= -1;

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

			}



			//delayを設定する/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;}


					if (delay_no == 0) {
						delay_st[k]=(i+j)*delay_speed;
					}
					//IE対策、本来は(i+j)
					if (delay_no > 0 && delay_no < 5) {
						delay_st[k]=(i+j+k/split_total/4)*delay_speed;
					}
					if (delay_no == 5) {
						delay_st[k]=50;delayed=1;
					}
					if (delay_no == 6) {
						delay_st[k]=kk*delay_speed;
					}
					if (delay_no == 7) {
						delay_st[k]=kkk*delay_speed;
					}
					if (delay_no > 7 ) {
						delay_st[k]=k*delay_speed;
					}

					//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();
			}

			//原点に戻す
			topbox.css({'left':0,'top':0});


			//TEXT
			if (textview_use == 'use') {
				var text="";
				var reverse_tx="";
				if (chgxyflag > 2) {reverse_tx=" / 反転";}
				text=" .SPLIT[ " + split_h + " x " + split_v + " ] MAX[ " + split_max + " ] / S-TYPE " + slide_type + "/ DELAY.No " + delay_no + " SCL/ " + scale_no + " " + reverse_tx;
				$("#text-view").text(text);
			}

			//速度の調整
			var speed_v=speed;
			if (slide_type == 'h-slide') {speed_v=speed*1.5;}

			//アニメ実行、IN OUT 共用にして、取替え用変数
			var start_opt=1,end_opt=1;
			//スライスアニメカウント
			sliceflag=0;
			var k=0;
			for (var i=0; i < split_h; i++) {
				for (var j=0; j < split_v; j++) {

					//IN OUT 差し替え
					if (slice_move_type == 'in') {

						//anime
						chipboxs[k].delay(delay_st[k]).animate({'opacity':end_opt,'left':chip_pos_X[k],'top':chip_pos_Y[k],'width':chip_W[k],'height':chip_H[k]},speed_v,function() {
							sliceflag ++;
							//goto slice_image_parts
							if (sliceflag == split_total) {slice_image_parts();}
						});

					}
					if (slice_move_type == 'out') {

						//透明度設定
						if(opt) {end_opt=0;}
						//anime
						chipboxs[k].delay(delay_st[k]).animate({'opacity':end_opt,'left':mv_posX[k],'top':mv_posY[k],'width':mv_chipW[k],'height':mv_chipH[k]},speed_v,function() {
							sliceflag ++;
							//goto slice_image_parts
							if (sliceflag == split_total) {slice_image_parts();}
						});

					}

					k ++;
				}
			}

		}

		//アニメ終了処理
		function slice_image_parts() {

			setTimeout(function(){
				sliceflag=0;
				img_url=load_url;

				if (slice_move_type =='in') {
					imagebox.children("img").attr({'src':img_url}).css({'display':'block'});
				}

				topbox.css({'left':box_W,'top':0});

				anime_move=false;
				keep_no=no;
				//keep-url
				keep_url=load_url;

			},500);
		};

	});

})(jQuery);

JS名、クラス名など修正したい場合は、html js css 共に該当部分を修正ください。自由な名前で設定できます。


CSS

slice04.css


/* slice04.css 日本語 */

/* tab-menu  */
ul#tab-menu {
display:inline-block;
list-style:none;
width:100%;
height:20px;
margin:0;
padding:0;
}
#tab-menu li {
display:inline;
list-style:none;
width:60px;
height:20px;
line-height:20px;
font-size:11px;
font-weight:bold;
text-align:center;
margin-right:2px;
border-top-left-radius:5px;
border-top-right-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-top-left:5px;
-webkit-border-radius-top-right:5px;
background-color:#888888;
float:left;
cursor:pointer;/*default*/
}
#tab-menu li.active {
background-color:#EEEEEE;
}
#tab-menu li:hover {
color:#FFFFFF;
background-color:#FF1493;
}

/* image-box-base */
#image-box-base {
position:relative;
top:0;left:0;
display:block;
width:640px;
height:300px;
padding:0;
margin:0;
background-color:#000000;
overflow:hidden;
}

/* image-box */
#image-box {
position:absolute;
top:0;left:0;
display:block;
width:640px;
height:300px;
padding:0;
margin:0;
background-color:#000000;
}
#image-box img {
width:100%;
height:100%;
}

#top-box {
position:absolute;
top:0;left:0;
display:block;
width:640px;
height:300px;
padding:0;
margin:0;
overflow:hidden;
}

#top-box .slice_bk {
position:absolute;
top:0;left:0;
background-position: 0 0;
overflow:hidden;
}

/* loading */
#image-box-base #loading {
display:block;
position:absolute;
top:0;left:0;
width:100%;height:100%;
background:url("/main/images/loading.gif") no-repeat center center;
background-color:transparent;
}

/* text */
#text-view {
position:absolute;
top:0;left:0;
font-size:12px;
color:#FF0000;
}

画像URLなどはサンプルのものです。実際環境に合わせてください。

注意、loadingは一般的によく使用されています、他のJSと競合する場合は、ID名を変えるなどの処置をして下さい。


サンプルをそのまま使用する場合


JS上部の設定をご覧ください、必要なら変更します。

1. メニューは増やすことが可能です。同じ様に記載ください。
2. CSSは画像サイズを変更ください。
3. JS上部の必要箇所を変更ください。
4. 必要なら画面サイズに合わせて分割数を変更できます。(縦方向の分割は 1 又は 2、横方向奇数値推奨)
5. 画像は使用者がご用意ください。Loading画像はページ下にあります。


JS上部設定の補足


//free分割データ/最大分割合計に注意
var splitHs=[9,9,9,7,5,9,15];
var splitVs=[1,1,1,1,1,2,2];

仮に下記のように 9x5 1x5を追加すれば、順番は関係ない
var splitHs=[9,9,9,9,7,5,9,15,1];
var splitVs=[5,1,1,1,1,1,2,2,5];

最大分割合計 9x5=45である

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

//free分割での最大分割合計 15x2=30
var split_max=30;//最大分割合計

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

//スライドタイプ名
var slide_type_nm=['h-slide','v-slide','none'];

仮に下記のように書けばv-slideの出現確率は50%になる
var slide_type_nm=['h-slide','v-slide','v-slide','none'];

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

//TEXT
var textview_use="use";// use none

1. free分割データは変更可能です。同じ値を登録すれば出現確率が上がります。縦の分割数は基本的に「1」です。「2」の場合は door として内部処理されます。縦横自由な分割数にする事も可能ですが、パターンはスライド系が多くなります。
2. free分割での最大分割合計は、最大の分割合計を記載、上の例では 15x2=30 のため 30 を記入。より大きい値でも良いが使用されないだけ。
3. スライドタイプを登録します。h-slide は左右方向、v-slide は上下方向、none はスライドしません(スライドはせず登録パターンの動きをする)。同じ名前を複数登録すれば出現確率が上がります。
4. 要素の拡大、フェード、スライド速度は speed、出現間隔の調整は delay_speed です。
5. 赤い文字のテキストを非表示にできます。(変更確認などに便利)


サンプルの基本構造


説明図


図のように、エフェクト表示用の作業層(#top-box)を利用して、画像分割したBOX要素を append して構成します。JSは、スライド専用の構成になります。


簡単な説明


簡単に説明しますが、スライドなどを組み合わせて実際作るとなると「大変に面倒」です。根気強くやりましょう。
この構造は「IN」「OUT」の表現が出来るようになっています。
また、JSも応用の出来る構成にしています。


説明図


スライドなどはある程度、規則性を持たせないとキレイになりませんので。スライドの形式により分類して、それに見合った「スライス要素」の伸縮方向を決めてゆきます。
スライドの初期位置は欄外にしています。左右上下に動かすことができます。

サンプルのような「横長画像」に合うように最適化されています。画像「縦横比」が違った場合には多少「違う印象」を受ける事があります。


大まかな分類

スライドタイプとして大まかに分類します。h-slide は左右方向、v-slide は上下方向、none はスライドしません。縦2分割のものは door として処理します。
ランダムに全て組み合わせてもキレイになりませんので、それらに見合った「スライス要素」の伸縮を決めています。


ランダムな組み合わせ

ランダムな条件で組み合わせていますが、スライドタイプと合わないモノは修正しています。ランダムな条件では簡単に違うものを作れます。(聞こえはいいが、イイカゲンな風任せなのだ!)


スケール番号

「スライス要素」の伸縮方向、位置の違いでアニメの感じが違いますので、当方が分類している伸縮区分の番号です。スライドに合った伸縮を決定して、スライドの初期位置に振り分けます。
伸縮すると言っても「背景画像」ですので Flash のようには参りません。伸縮しているように見えるだけです。


スライドの移動位置と透過

移動位置与をえることにより(CSSでの移動)、アニメで元の位置に戻ることでスライドしています。位置は逆転することもありますので複雑なスライドになる事もあります。回転は出来ません。
透過はランダムに設定されます。


door

縦2分割のものは内部で、door として分類して、上下方向に位置を振り分けて処理します。


表示パターン

delay() で表示パターン(時間差の計算式)を作り、操作しているのには他のものと同じですが、どのような画像分割でもある程度見れるオーソドックスなパターンが使用されます。
ランダムな組み合わせですから、「スライス要素」の伸縮と合わない場合もあります。


画像の重なり順と左右のスライド

画像の重なり順(z-index)の処理は行っていません。そのため右方向のスライドを実行した場合に画像に多少違和感がありますが、修正しませんので了承ください。


スライド方向とアニメ時間の補正

通常、画像は横長のものが多いと思います。アニメ時間が一定ですから、横方向にスライドする時に移動距離が大きくなりアニメが速くなりますのでその調整です。


現在1.5倍にしています、値は自由

//速度の調整
var speed_v=speed;
if (slide_type == 'h-slide') {speed_v=speed*1.5;}

エフェクトの確率

スライドのタイプにより、色々な補正を行っていますので、同じエフェクトが出現する確率が一定ではありません。ブラウザによっても異なります。使用に際して問題になるものではありませんが、、、。


その他


状況の表示

設定状況など、テキストで表示するようにしています。書き換え変更などの際に便利です。いらない場合は、非表示にも出来ますが、削除しても結構です。
色々な形態でのエフェクトを決定するに、条件分岐を多用しますので、変数など確認しながら作りこむ時に重要な手助けになります。



HTML
<div id="text-view"></div>

JS
//TEXT使用
textview_use="use";// use none

//textview
if (textview_use == 'use') {
	text="必要な情報が表示できるようにテキストを書く";
	$("#text-view").text(text);
}

終了処理の setTimeout について

Firefox対策である。マシン環境が悪いFirefoxで(環境が悪くてFirefoxを使用することは常識的には無いはずだ)、画像のすり替え処理でタイミングが合わなくなる場合に有効である。従来は setTimeout は無いので削除しても良い。


バーチカル スライド について

このサンプルは、ホリゾンタル スライド形式です。勿論バーチカル スライド形式も作れる訳ですが、余りキレイではありません。プラグインなどでもホリゾンタル形式です。「ホリゾンタル」処理している部分を修正すれば「バーチカル」にも可能ですがここでは作りません。
このサンプルの「free分割データ分割の登録」で、1x9 などと登録すれば、そのままでも、ある程度は動きます。9x5等の「縦横複数分割」も登録可能です。

「free分割データ分割の登録」変更の際は「分割数合計」を間違いなく設定してください。


Loading画像など

使用画像は原則、使用者がご用意ください。Loading画像は好きなものが使用可能です。

loading.gif 31x31 :




「標準のパターン」との組み合わせする場合の記事。

【参考】当方の記事: jQueryで画像分割して色々なエフェクト



以上です。

 


[ この記事のURL ]


タグ:jquery , photo , memo , slice

 

ブログ記事一覧

年別アーカイブ一覧



[1]