POPSブログ

簡易SLICE-PHOTO/3

41

  Category:  jquery2012/03/02 pops 

簡易SLICE-PHOTO-3、簡易SLICE-PHOTO-1をベースにページャー機能をつけてみました。


簡易SLICE-PHOTO-3

pops-slicephoto03.js

スライス、サンプル表示 (制御ボタンを付ける)


||
  • 1
  • 2
  • 3
  • 4

簡易SLICE-PHOTO-1 pops-slicephoto01.js を少し改造して、メニューを加えてみました。
HTML構造を直接書きますが、残り画像はJS側スクリプトに記述します。HTML構造、CSSは簡易SLICE-PHOTO-1と同一です。

  • 基本的に pops-slicephoto01.js とほぼ同じです。
  • delay()を使用した場合の制御の一例です。
  • 動作バージョン、jquery-1.4.2 以上。
  • IE8 はキレイに動作しません。Google Chrome を利用ください。

簡単な動作の説明

詳細は、簡易SLICE-PHOTO-1をご覧ください。
delay()を使用した場合、大変便利ですが、反面アニメ途中での停止などを行うと、画面が乱れたりの不具合がでます。新しい機能ですので、まだ制御が旨く出来ません。よってdelay()によるアニメが完全に終了してから、色々な処理をする仕組みを構築すればよい訳です。


簡単な番号メニューを作り、機能するようにしました。

  • メニュー部分をHTMLで書きくわえます。
  • 「スタート、ストップ」ボタンと「ページャー」を構成します。画像の使用も可能です。
  • 「スタート、ストップ」ボタンでAUTOを制御できます。
  • 「ページャー」番号ボタンで、指定画像を表示します。但し、前画像がアニメ途中の場合は、アニメが終了してから実行します。複数番号を押した場合は最後の番号が有効です。
  • 用途により、組み合わせ自由です。設定はJSをごらんください。
  • 「ページャー」番号ボタンを押すと、AUTOを強制解除します。「スタート、ストップ」ボタンがなければ、AUTOには戻れない仕組みになっています。
    なお、処理能力の無い、マシン環境下では、ボタン類が効き難い場合があります。

簡単なスクリプト説明

通常ならば、何らかのボタンアクションがあれば、何らかの処理に直接ジャンプしていましたが。delay()を使用したアニメの場合、完全にアニメが終了してから、アクションのジャンプに移行しなければなりません。それなりの判定システムを作りジャンプさせる面倒なことですが、行かしかたありません。
いつか、jquery に簡単に処理出来る関数などできれば良いですネ。



アニメ実行中なら anime_move 'move' を設定
番号が押されたら clickflag 'click' を設定、番号保存
アニメ終了処理で総合判定して、画像処理に分岐させている

---------------------------------------------------
スライス要素表示の冒頭で、anime_move 'move'を設定している

//sliceImage-view関数
function sliceImage (){

	//アニメ処理実行中
	anime_move = 'move';

	途中略す

}

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

//end-anime、アニメ終了処理
function slice_image_parts() {

	途中略す

	番号ボタンが押されれば、auto_on は 'off' に変わっているので、
	自然に、次の判定で処理する仕組みに仕込んでいる


	//clickボタンが押されていない場合はタイマー始動
	if (auto_on == 'on' && clickflag != 'click') {
		timerset();
	}

	アニメ実行中で、処理出来なかったことをここで処理する仕組みだ

	//clickボタンが押されているか、判定
	if (clickflag == 'click') {
		clickflag = "";
		count = new_count;
		//指定番号の画像をLOAD
		cycleset2();
	}
};

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

通常判定ならこんなに複雑にはならない
$('#hiku-bottun').click(function() {
	何らかの識別変数を保存、ジャンプさせない
	return false
});
こんな程度である

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

delay()を使用する場合は色々な判定が必要である。たとえば、
 1. アニメ処理実行中はボタンアクションを無効にする
 2. サムネールボタン類が押された、番号などを保存する、、、など
それらを総合的に判断して、処理する仕組みである。

//AUTO on/off ボタンアクション設定
if (autobtn_use == 'use') {
	//click-bind、AUTOの切り替えをする
	$("#start_btn").bind ({
		click: function(e) {
			//アニメ処理実行中は強制的スキップ
			if (anime_move == 'move') {return false}
			//アニメ処理実行中でないなら有効
			if (auto_on == 'on') {auto_on = 'off';auto_on_reset();}
			else {auto_on = 'on';auto_on_set();}
			},

			途中略す

	});
}

//サムネール、番号アクション設定
if (pager_box_use == 'use') {

	//HOVER-ACTION-addClass
	ページャ番号の位置番号を取得する、画像名保存配列の画像と対応している

	var li_index_no;
	$('#thumb_box ul > li').bind({
		//click
		click: function(e) {
		//クリックされたらAUTO強制解除
		if (auto_on == 'on') {auto_on_reset();}

			//skip、表示中の画像が同じならスキップ
			if ($(this).index() == count) {return false}

			//クリックされれば'click'が入る。これをアニメ終了処理で判定する
			//クリック判定フラグ
			clickflag = 'click';

			//アニメ実行中なら、番号を保存
			if (anime_move == 'move') {new_count = $(this).index();clickflag = 'click';return false;
			} else {

				//アニメ実行中でないならば、指定番号画像をLOAD
				clickflag = '';
				count = $(this).index();
				new_count = 0;
				//押された番号をactivedにする
				$("#thumb_box ul li").removeClass("pgr_actived");
				$(this).addClass("pgr_actived");
				//LOAD
				cycleset2();
			}
		},

		途中略す
	});
}
---------------------------------------------------

少し面倒だが、何らかの仕組みが必要である


設置方法

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


メニュー部分を追加記述する

ボタンなどテキスト文字で書いた場合の例。画像の使用も可能です。この部分は、使用者がお書きください。


<div id="thumb_box_wrap">
	<div id="start_btn">||</div>
	<div id="thumb_box">
		<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		</ul>
	</div>
</div>
<br style="clear:both;" />

JS、CSS、Loading画像

JS pops-slicephoto03.js 通常方式

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


//pops-slicephoto03.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";//use

		//ページャー関連設定
		var auto_use='use';//use stop 自動設定の使用、通常はuseです
		var menu_use='use';//use メニュー全体の使用
		var autobtn_use='use';//use START-STOPボタンの使用
		var btn_text_use='use';//use テキストボタンを作る
		var pager_box_use='use';//use ページャーの使用

		//設定修正/メニュー全体を使用しない場合無駄な設定は解除する
		if (menu_use !='use') {
			autobtn_use='',btn_text_use='',pager_box_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 = [];
		//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;

		//IN OUT
		var in_type_nm = ['in','out','in','out','in','out'];

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

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

		//AUTO、ページャー関連変数
		var startbtn_txt = ["||","||",">>","<<"];
		//auto
		var auto_on = 'on',cycle_no = 0,cycletimeID = null;
		var new_count = 0;
		//click判定
		var clickflag='';

		//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 #slice_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'});


			//AUTO on/off ボタンアクション設定
			if (autobtn_use == 'use') {
				//click-bind、AUTOの切り替えをする
				$("#start_btn").bind ({
					click: function(e) {
						//アニメ処理実行中は強制的スキップ
						if (anime_move == 'move') {return false}
						//アニメ処理実行中でないなら有効
						if (auto_on == 'on') {auto_on = 'off';auto_on_reset();}
						else {auto_on = 'on';auto_on_set();}
					},
					//hover/mouseover
					mouseover: function(e) {$(this).addClass("btn_hoverd");},
					//hover-Out
					mouseout: function(e) {$(this).removeClass("btn_hoverd");}
				});
			}
			//サムネール、番号アクション設定
			if (pager_box_use == 'use') {
				//HOVER-ACTION-addClass
				var li_index_no;
				$('#thumb_box ul > li').bind({
					//click
					click: function(e) {
						//クリックされたらAUTO強制解除
						if (auto_on == 'on') {auto_on_reset();}
						//skip、表示中の画像が同じならスキップ
						if ($(this).index() == count) {return false}
						//クリック判定フラグ
						clickflag = 'click';
						//アニメ実行中なら、番号を保存
						if (anime_move == 'move') {new_count = $(this).index();clickflag = 'click';return false;
						} else {
							//アニメ実行中でないならば、指定番号画像をLOAD
							clickflag = '';
							count = $(this).index();
							new_count = 0;
							//押された番号をactivedにする
							$("#thumb_box ul li").removeClass("pgr_actived");
							$(this).addClass("pgr_actived");
							//LOAD
							cycleset2();
						}
					},
					//hover/mouseover
					mouseover: function(e) {
						li_index_no = $(this).index();
						//css
						$(this).addClass("pgr_hoverd");
					},
					//hover-Out-removeClass
					mouseout: function(e) {
						$(this).removeClass("pgr_hoverd");
					}
				});
			}

			//slice-set
			slice_set()
			count = 0;
			//最初の画像をINNER画像BOX1にセット表示する
			keep_url=path+img_urls[count];
			//次ぎの画像の番号セット、AUTOなので自動でなされる

			//メニュー全体を非表示/強制AUTO設定
			if (menu_use !='use') {
				$('#thumb_box_wrap').css({'display':'none'});
				//強制AUTO設定
				auto_use = 'use';auto_on = 'on';
			}
			//強制AUTO解除/初期停止状態
			if (auto_use =='stop') {auto_on_reset();}
			//NO1actived
			if (pager_box_use == 'use') {
				$('#thumb_box ul li').eq(0).addClass("pgr_actived");
			}


			//START Main-timer-set
			window.setTimeout(function(){
				//auto2、設定をオートにしてスタートする
				if (auto_use == 'use' && auto_on == 'on') {
					auto_on_start();
				} else {
					auto_on_reset();
				}
			}, first_time);

		}

		//slice-set
		function slice_set() {

			//スライス
			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);

			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-view関数
		function sliceImage (){

			//アニメ処理実行中
			anime_move = 'move';
			set_text("");

			//現在のページャー番号をactivedにする
			if (pager_box_use == 'use') {
				$('#thumb_box ul li').removeClass("pgr_actived").eq(count).addClass("pgr_actived");
			}

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

			//多目的判定用
			var chgxyflag = Math.floor(Math.random() * 5);
			//多目的判定用2 追加
			var chgflag = Math.floor(Math.random() * 2);
			//delayed遅延させる/20%
			var delayed = Math.floor(Math.random() * 5);
			//IN OUT
			var slice_move_type = in_type_nm[Math.floor(Math.random() * in_type_nm.length)];
			//標準delay_no 0-7
			var delay_no = Math.floor(Math.random() * 7);

			//url
			var slice_url = img_url;
			//OUTは下層画像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 ++;
				}
			}

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

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

			//初期の大きさ-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++) {

					//XY
					//その場中心補正、実際には場所をずらして中心補正をしているようにみせかけて要る
					pos_sx = slicebs_pos_x[k] + Math.floor(slicebs_W[k] / 2);
					pos_sy = slicebs_pos_y[k] + Math.floor(slicebs_H[k] / 2);

					if (slice_move_type == 'in') {slice_chips[k].css({'top':pos_sy,'left':pos_sx,'width':0,'height':0});}
					//outはcss移動なし、大きさそのまま
					if (slice_move_type == 'out') {
						//移動位置配列に位置保存
						mv_posX[k]=pos_sx;
						mv_posY[k]=pos_sy;
					}

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

					if (delay_no == 0) {delay_st[k] = k * delay_speed;}
					if (delay_no == 1) {delay_st[k] = kk * delay_speed;}
					if (delay_no == 2) {delay_st[k] = Math.abs(k-split_total/2) * delay_speed;}
					//外から
					if (delay_no == 3) {delay_st[k] = kkk*delay_speed;}
					//IE対策、本来は(i+j)
					if (delay_no > 3) {delay_st[k] = (i+j+k/split_total/4) * 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();
			}

			//デバック
			//var text="SPLIT: " + split_total + " /IN.OUT "+ slice_move_type + " /DELAY " + delay_no + "";
			//set_text(text);

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

			//アニメ実行、IN OUT 共用にして、取替え用変数
			var anim_W,anim_H,anim_X,anim_Y;
			//スライスアニメカウント
			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') {anim_W=slicebs_W[k];anim_H=slicebs_H[k];anim_Y=slicebs_pos_y[k];anim_X=slicebs_pos_x[k];}
					if (slice_move_type == 'out') {anim_W=0;anim_H=0;anim_X=mv_posX[k];anim_Y=mv_posY[k];}

					//anime/IN OUT共用
					slice_chips[k].delay(delay_st[k]).animate({'left':anim_X,'top':anim_Y,'width':anim_W,'height':anim_H},speed,function() {
						sliceflag ++;
						//goto slice_image_parts
						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 = '';

			//keep-url
			keep_url=img_url;
			anime_move = '';

			//clickボタンが押されていない場合はタイマー始動
			if (auto_on == 'on' && clickflag != 'click') {
				timerset();
			}
			//clickボタンが押されているか、判定
			if (clickflag == 'click') {
				clickflag = "";
				count = new_count;
				//指定番号の画像をLOAD
				cycleset2();
			}

		};

		//NEXT、次ぎ画像のLOAD
		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);
			}
		}

		//---------------------------------------------
		//AUTO、ページャー関連関数
		//cycle_timer、タイマー
		var timerset = function () {
			cycletimeID=setTimeout(nextImage,cycle_time);
		}
		//cycle_time-set、タイマーのセット
		var cycleset = function () {
			timerset();
		}
		//cycle_time-set2、指定番号の画像LOAD
		var cycleset2 = function () {
			if (count > list_len-1) {count = 0;}
			//imgタグに入れる、URL取得
			img_url = path+img_urls[count];
			imgload ();
		}
		//auto-set、オートにする
		var auto_on_set = function () {
			auto_on = 'on';timerset();
			if (btn_text_use == 'use') {show_startbtn(1);}
			$("#start_btn").addClass("actived_btn");
			set_text("AUTO-ON");
		}
		//auto-reset、オート解除
		var auto_on_reset = function () {
			auto_on = 'off';clearTimeout(cycletimeID);
			if (btn_text_use == 'use') {show_startbtn(2);}
			$("#start_btn").removeClass("actived_btn");
			set_text("AUTO-OFF");
		}
		//start&auto_on、オートに設定してスタートする
		var auto_on_start = function () {
			auto_on = 'on';
			if (btn_text_use == 'use') {show_startbtn(1);}
			$("#start_btn").addClass("actived_btn");
			set_text("AUTO-ON");
			cycleset();
		}
		//show-btn
		function show_startbtn(no) {
			var btn_txt = startbtn_txt[no];
			$("#start_btn").text(btn_txt);
		}

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

		//init start
		init();

	});

})(jQuery);

Loading画像 31x31



CSS pops-slicephoto03.css

設置ページのCSSで違いのでる、番号文字の高さなどは、line-height で設定ください。


/* pops-slicephoto03.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;
}

/* thumbbox */
#thumb_box_wrap {
	display: block;
	position:relative;
	width:640px;
	height:25px;
	text-align:center;
	background-color:#000000;
}
#thumb_box_wrap #start_btn {
	display:block;
	position:absolute;
	top:2px;left:5px;
	width:20px;
	height:14px;
	margin:4px 0 0 2px;
	background-color:#555555;
	font-size:10px;
	color:#FFFFFF;
	text-align:center;
line-height:110%;
	cursor: pointer;
}
#thumb_box_wrap #start_btn.btn_hoverd {
	background-color:#CCCCCC;
}
	
#thumb_box_wrap #thumb_box {
	display:block;
	position:absolute;
	top:2px;left:30px;
	width:400px;
	height:20px;
	margin:0;
	text-align:center;
}
#thumb_box ul {
	position:relative;
	margin:2px;
	background-color:none;
}
#thumb_box ul li {
	display:inline;
	list-style:none;
	width:14px;
	height:14px;
	margin:2px 0 0 2px;
	/*border:1px #FFFFFF solid;*/
	font-size:10px;
	color:#CCCCCC;
	background-color:#333333;
	text-align:center;
line-height:150%;
	overflow:hidden;
	cursor: pointer;
	float:left;
}

#thumb_box ul li.pgr_actived {
	background-color:#D08B3A;
}
#thumb_box ul li.pgr_hoverd {
/*border:1px #FF0000 solid;*/
	background-color:#FF0000;
}

以上です。



[ この記事の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]