POPSブログ

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

197

  Category:  jquery2013/01/24 pops 

前ページの記事のJS、縦長に分割した「ホリゾンタル」スライドに、4ドアのスライドなどを追加しました。

 

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

前ページのJSに「4ドアの対角方向からのスライド」と「ランダム方向からのスライド」を加えたものです。基本的には縦長に分割した「ホリゾンタル」スライドですが少し賑やかになります。


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


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


Example

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

下のシミュレーションボタンで、分割を指定して見ることが出来ます。


  • PHOTO1
  • PHOTO2
  • PHOTO3
  • PHOTO4


シミュレーション。「AUTO解除」時に分割を指定できます。アニメ中は変更しないで下さい。

分割AUTO切替 : AUTO AUTO解除 :初期値 AUTO / 解除 9x5指定

分割の指定 : 9x5 9x1 9x1 7x1 5x1 9x2 15x2 2x2 1x1 1x9 1x3

TEXT表示切替 : 表示 非表示 :初期値 表示

2x2 は4分割(対角方向4ドア確率25%)、1x1 は1枚画像、1x9 1x3 は横長分割です。AUTO時はランダムに選定。

 

サンプルの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

slice05.js


//slice05.js
//日本語
//4ドアdiagonal、スライド

(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,2,1,1,1];
		var splitVs=[5,1,1,1,1,2,2,2,1,9,3];

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

		//スライドタイプ名
		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";

		//対角diagonal位置データ
		var dia_pos_x=[-box_W/2,-box_W/2,box_W,box_W];
		var dia_pos_y=[-box_H/2,box_H,-box_H/2,box_H];
		//対角順序
		var dia_time=[0,3,2,1];

		//移動ポイント配列
		var pointx=[0,box_W/2,box_W,box_W,box_W,box_W/2,0,0,box_W/2,box_W/2,box_W/2,box_W/2];
		var pointy=[0,0,0,box_H/2,box_H,box_H,box_H,box_H/2,box_H/2,box_H/2,box_H/2,box_H/2];

		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;
		var move=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";}

			//4ドア多目的判定用
			var chgdia=Math.floor(Math.random()*4);

			//door4補正
			if (split_v == 2 && split_h == 2) {
				if (chgdia == 0) {slide_type="door4";}
				if (chgdia == 1) {slide_type="h-slide";}
				if (chgdia == 2) {slide_type="v-slide";}
				if (chgdia == 3) {slide_type="none";}
			}

			//対角に時間調整数
			var d_count=Math.floor(Math.random()*4);

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

			//move確率/40%
			move=false;
			if (chgxyflag < 2) {move=true;}

			//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;}
			if (slide_type == 'door4') {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];
					}
					//4DOOR
					if (slide_type == 'door4') {
						pos_sx=dia_pos_x[k];
						pos_sy=dia_pos_y[k];
					}
					//none位置変更なし
					if (slide_type == 'none') {
						//強制透過
						if(scale_no == 0) {opt=true;}
						//ポイント移動random位置
						if (move) {
							var p=Math.floor(Math.random() * 9);
							pos_sx=pointx[p];
							pos_sy=pointy[p];
						}
					}

					//位置大きさ保存
					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;}

			}

			//対角順序反転
			if (chgflag) {
				dia_time.reverse();
			}

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

					//4DOOR補正/対角に時間調整
					if (slide_type == 'door4') {
						delay_st[k]=dia_time[k]*delay_speed*d_count;
					}

					//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

slice05.css、(slice04と内容は同じ)


/* slice05.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名を変えるなどの処置をして下さい。


簡単な説明


説明図


基本的には、縦長に分割した「ホリゾンタル」スライドになります。詳細は「前ページ」を参照下さい

【参照】当方の記事: jQueryで画像分割してスライドする


追加になった処理は次ぎの「4ドアの対角方向からのスライド」「ランダム方向からのスライド」2種類です。


4ドアの対角方向からのスライド

対角方向からスライドさせるようにしています。但し出現する確率は「2x2分割」が選定された時に、25%です。
free分割データに 2x2 分割のデータを入れてください。



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

「2x2分割」「9x5分割」「1x1分割」「1x9分割」など登録
ランダムに選定されますので、順序はかまわない、
同じ分割が複数あれば確率が上がる

4ドアの出現する確率を操作している部分


//4ドア多目的判定用
var chgdia=Math.floor(Math.random()*4);

//door4補正
if (split_v == 2 && split_h == 2) {
	if (chgdia == 0) {slide_type="door4";}
	if (chgdia == 1) {slide_type="h-slide";}
	if (chgdia == 2) {slide_type="v-slide";}
	if (chgdia == 3) {slide_type="none";}
}

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

以下のようにすれば全て4ドアになる
if (split_v == 2 && split_h == 2) {
	slide_type="door4";
}

ランダム方向からのスライド

ランダム方向からのスライド、つまり、分散、集合のエフェクトに」なります。これは 9x5 分割などの「縦横複数分割」の際にキレイになります。(ここでは、分類上 move で判定)
他の分割には余り合いませんが、それなりの効果と言う程度です。


ランダム方向からのスライドを操作している部分


ランダム方向からのスライドの確率設定

//move確率/40%
move=false;
if (chgxyflag < 2) {move=true;}

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

位置決め

//none位置変更なし
if (slide_type == 'none') {
	//強制透過
	if(scale_no == 0) {opt=true;}
	//ポイント移動random位置
	if (move) {
		var p=Math.floor(Math.random() * 9);
		pos_sx=pointx[p];
		pos_sy=pointy[p];
	}
}

条件を違わせれば、また違う様にもなる
9x5=45分割だけにrandom位置処理するならば、多少落ち着いたものになる

	if (move && split_total == 45) {
		var p=Math.floor(Math.random() * 9);
		pos_sx=pointx[p];
		pos_sy=pointy[p];
	}

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

処理の条件設定は色々な方法があるが、、
スライドタイプを move にして処理するとか、細やかな設定が出来る
if (chgxyflag < 2) {slide_type="move";}

if (slide_type == 'move') {
	if (split_total == 45) {
		内部略す
	}
	if (split_total == 1) {
		内部略す
	}
	内部略す
}

分割しない、1枚画像を入れる

free分割データに、1x1 分割を設定すると、1枚画像になります。他のJSでも登録できますが、一応画像分割のサンプルのため登録していませんでした。このサンプルでは1枚画像のスライドなど見ることができます。
「ランダム方向からのスライド」があるので複雑なエフェクトになります。前ページのものは「ランダム方向からのスライド」がありませんのでエフェクトは単純です。


横長の分割

いわゆる 1x9 分割のような横長の分割の場合は「バーチカルスライド」になりますが、完全に対処していません。一応登録すればそれなりに効果はあると言う程度です。


その他


状況の表示

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



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で画像分割してスライドする


スライド以外の画像分割の記事。エフェクトの種類組み合わせなどが違う。

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

【参考】当方の記事: jQueryで画像分割表示のパターンを作る

【参考】当方の記事: jQueryで画像分割を変化して表示する

【参考】当方の記事: jQueryで画像を分割して表示する


以上です。

 


[ この記事のURL ]


タグ:jquery , photo , memo , slice

 

ブログ記事一覧

年別アーカイブ一覧



[1]