POPSブログ

簡易SLIDESHOW/7

56

  Category:  jquery2012/03/17 pops 

簡易SLIDESHOW-7、スライド系統のものを多くした、BAR ZIPPER 4DOOR をも含む、多彩な「ページャー付きスライドショー」です。


簡易SLIDESHOW-7

pops-slideshow-07.js

ページャー付きスライドショー、サンプル表示


||


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

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

簡単な動作の説明

スライド系統のものを多くした、BAR ZIPPER 4DOOR をも含む多彩な変化が楽しめます。フエードも可能ですが、少々面倒になりますので今回は設定していません。今までのものはスライス系統のものでしたが、今回は半分以上がスライド系になっています。
細かく条件に応じて運動の方向を決定して行きますから、制作には時間がかかります。BARタイプは標準分割の幅で分割されます。
ジッパーの場合標準分割数が主に使用されます、またある程度の確率で標準分割数より2倍の範囲でランダムに分割されて使用されます。


簡易ページャーの説明

オンオフボタン付き、番号ボタンの「ページャー」方式の簡単なものです。但し、delay()を使用するものでも機能します。

  • オンオフボタンつきのページャー、を付加しました。
  • auto_use: use オート関連設定です。stopで初期オートを解除します。
  • menu_use: use メニュー全体を使用するかの設定です。
  • autobtn_use: use 「オンオフボタン」(START-STOPボタン)の使用するかの設定です。
  • btn_text_use: use オンオフボタン部分に文字をいれます。(画像ボタンは解除)
  • pager_box_use: use ページャー部分を使用するかの設定です。
  • 画像ボタン、サムネール画像を使用することが可能です
  • 「ページャーボタン」を押せばオートは解除されます。復活には「オンオフボタン」が必要になります。
  • オートの場合「ページャー」は遅れて表示されます。

簡単なスクリプト説明


設定を好みにあわせてください

speed は、スライス要素の拡大縮小移動などのアニメの時間です
delay_speed は、スライス要素の出現間隔です
分割は大き目のほうがキレイです、細かくすれば時間がかかります

//大きさ
var bs_W = 640;
var bs_H = 320;

分割要素の合計が100個くらいをめどに分割ください

//標準スライス分割数、正方形に近づける
var split_h = 8;//4以上
var split_v = 4;//4以上

ジッパーの場合標準分割数が主に使用されます、またある程度の確率で
標準分割数より標準分割数X2の範囲でランダムに分割されて使用されます

//自由分割、ランダムに分割されて使用される
var max_split_h = 8;//可変分割最大、3以上
var max_split_v = 5;//可変分割最大、3以上

//時間速度
var first_time = 8000;//スタートまでの時間、5000以上 
var cycle_time = 8000;//サイクル 5000以上
var speed = 500;//拡大縮小時間 400-1000
var delay_speed = 180;//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 ページャーの使用

//画像までのパス
var path='/main/images/';
//画像名を登録する
var img_urls=['photo1m.jpg','photo2m.jpg','photo3m.jpg','photo4m.jpg','photo5m.jpg','photo6m.jpg'];

確率を変更可能です

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

増やせば表示される確率があがります。完全に削除すれば使用されません
//タイプ
var split_type_nm = ['standerd','h-bar','v-bar','h-zipper','v-zipper','4door','free'];
途中略す


設置方法

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


[ HTML構造を作る ]
以下のように構造を作ってください。ID は #pops_slide_show です。li要素のタイトルは必ず必要とはしません。


<div id="pops_slide_show">
	<div id="slideshow_box">
		<div id="ss_imgholder"><img /></div>
		<div id="slice_base"></div>
		<div id="ss_loading"></div>
		<div id="view_text"></div>
	</div>
</div>
<div id="thumb_box_wrap">
	<div id="start_btn">||</div>
	<div id="thumb_box">
		<ul>
		<li title="1"></li>
		<li title="2"></li>
		<li title="3"></li>
		<li title="4"></li>
		<li title="5"></li>
		<li title="6"></li>
		</ul>
	</div>
</div>
<br style="clear:both;" />

注意、原則、全画像をJSに登録します。画像伸縮のため幅高さを100%で使用しますので、大きさは記入しないでください。


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


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

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

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

JS、CSS、Loading画像

JS pops-slideshow-07.js 通常方式

中には使用していない変数もあります。


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

(function($){

	$(function(){

		//大きさ
		var bs_W = 640;
		var bs_H = 320;

		//標準スライス分割数、正方形に近づける
		var split_h = 8;//4以上
		var split_v = 4;//4以上

		//自由分割ランダムに分割されて使用される
		var max_split_h = 8;//可変分割最大、3以上
		var max_split_v = 5;//可変分割最大、3以上

		var split_total = split_h*split_v;
		var max_split_total = max_split_h*max_split_v;

		//時間速度
		var first_time = 8000;//スタートまでの時間、5000以上 
		var cycle_time = 8000;//サイクル 5000以上
		var speed = 600;//拡大縮小時間 400-1000
		var delay_speed = 180;//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=['photo1m.jpg','photo2m.jpg','photo3m.jpg','photo4m.jpg','photo5m.jpg','photo6m.jpg'];
		var list_len=img_urls.length;

		//jQueryObjectCache
		var imgholder_elm,slideshow_elm,slicebase;
		var img_url,keep_url,loading,thumbshowbox;
		var imgPreloader;//opela

		//chash
		slideshow_elm = $('#slideshow_box');
		imgholder_elm = $('#slideshow_box #ss_imgholder');
		slicebase = $('#slideshow_box #slice_base');
		loading = $('#slideshow_box #ss_loading');

		//slice-OBJ
		var slice_chips = [];
		//slice位置保存配列など
		var slicebs_pos_x = [],slicebs_pos_y = [],slicebs_W = [],slicebs_H = [];
		var slice_W = 0,slice_H = 0,slice_Wb = 0,slice_Hb = 0;

		//4door位置保存配列
		var door4_pos_X = [];
		var door4_pos_Y = [];
		var h4_pos_X = [];
		var h4_pos_Y = [];
		var v4_pos_X = [];
		var v4_pos_Y = [];
		var hv4_pos_X = [];
		var hv4_pos_Y = [];

		//IN OUT
		var in_type_nm = ['in','out','in','out','in','out'];
		//タイプ
		var split_type_nm = ['standerd','h-bar','v-bar','h-zipper','v-zipper','4door','free'];

		//移動位置配列
		var mv_posX = [];
		var mv_posY = [];
		//移動大きさ保存配列
		var mv_sW=[];
		var mv_sH=[];

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

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

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

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

		//init
		var init = function () {

			//loading-Set
			loading.css({'width':bs_W,'height':bs_H,'display':'none'});
			//sliceBox非表示
			slicebase.css({'display':'none'});
			//ページャー非表示
			$('#thumb_box').css({'display':'none'});

			//大きい方で分割
			var roop_v=split_h*4;
			if (roop_v < split_v*4) {roop_v=split_v*4;}
			if (roop_v < split_total) {roop_v=split_total;}
			if (roop_v < max_split_total) {roop_v=max_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'});

			//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位置情報読み込み4DOOR
			slice_set4();

			count = 0;
			//最初の画像をINNER画像BOX1にセット表示する
			img_url=path+img_urls[count];
			keep_url=img_url;

			//最初の画像を下層に表示する
			imgholder_elm.children("img").empty().attr({'src':img_url});

			//メニュー全体を使用しない場合/強制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 first_time-set
			window.setTimeout(function(){
				//pager表示
				show_pager();
				//auto2、設定をオートにしてスタートする
				if (auto_use == 'use' && auto_on == 'on') {
					auto_on_start();
				} else {
					auto_on_reset();
				}
			}, first_time);

		}

		//pager表示
		var show_pager = function () {
			if (pager_box_use == 'use') {
				$('#thumb_box').css({'display':'block'});
			}
		}

		//slice
		function slice_set() {
			//
		}

		//4DOOR位置情報
		function slice_set4() {

			//diagonal 4Door簡易対角位置/kの順序
			door4_pos_X=[-bs_W/2,-bs_W/2,bs_W,bs_W];
			door4_pos_Y=[-bs_H/2,bs_H,-bs_H/2,bs_H];

			//periphery 4Door簡易外周位置/kの順序
			h4_pos_X=[-bs_W/2,-bs_W/2,bs_W,bs_W];//水平方向
			h4_pos_Y=[0,bs_H/2,0,bs_H/2];//水平方向
			v4_pos_X=[0,0,bs_W/2,bs_W/2];//垂直方向
			v4_pos_Y=[-bs_H/2,bs_H,-bs_H/2,bs_H];//垂直方向

			hv4_pos_X=[0,-bs_W/2,bs_W,bs_W/2];//交互方向
			hv4_pos_Y=[-bs_H/2,bs_H/2,0,bs_H];//交互方向
		}

		//sliceImage関数
		function sliceImage (){

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

			//重要、前のものも残るので、要素を隠す left=bs_W でも良い
			slicebase.find(".slice_bk").css({'left':0,'top':0,'width':0,'height':0,'display':'none'});

			//delayクリア
			var delay_st=[];
			//スライス要素関連クリア
			slicebs_pos_x = [],slicebs_pos_y = [],slicebs_W = [],slicebs_H = [];
			//移動位置配列クリア
			mv_posX = [];
			mv_posY = [];
			//移動大きさ保存配列クリア
			mv_sW=[];
			mv_sH=[];

			//ドアの種類、単純バー=012/ ジッパー=34/ ドア=5
			var door_type = 0;

			//random-scale/4-6
			var random_scale=Math.floor(Math.random() * 6);

			//新規分割変数
			var new_split_h,new_split_v,new_split_total;

			//分割の種類、名前で判定
			//standerd.h-bar.v-bar.h-zipper.v-zipper.4door.free
			var split_type = split_type_nm[Math.floor(Math.random()*split_type_nm.length)];

			//zipperの分割数を制御
			var zipflag = Math.floor(Math.random() * 2);
			//zipper判定用
			var zipper=0;
			//zipper用delay_noとして使用
			var zipper_no = Math.floor(Math.random() * 5);

			//条件に応じて分割する/split_typeは文字で判別に変更
			if (split_type == 'standerd') {
				//標準スライスの場合random_scale 0を使用しない
				if (random_scale == 0) {random_scale = 3;};
				//標準分割
				new_split_h=split_h;
				new_split_v=split_v;
			}
			if (split_type == 'h-bar') {
				//BAR-H
				random_scale=0;door_type=1;
				new_split_h=split_h;
				new_split_v=1;
			}
			if (split_type == 'v-bar') {
				//BAR-V
				random_scale=0;door_type=2;
				new_split_h=1;
				new_split_v=split_v;
			}
			if (split_type == 'h-zipper') {
				//H-ZIPPER
				zipper=1;
				random_scale=0;door_type=3;
				if (zipflag) {new_split_h=split_h;}
				if (!zipflag) {new_split_h=split_h+Math.floor(Math.random()*split_h)+1;}
				new_split_v=2;
			}
			if (split_type == 'v-zipper') {
				//V-ZIPPER
				zipper=1;
				random_scale=0;door_type=4;
				new_split_h=2;
				if (zipflag) {new_split_v=split_v;}
				if (!zipflag) {new_split_v=split_v+Math.floor(Math.random()*split_v)+1;}
			}
			if (split_type == '4door') {
				//4DOOR
				//random_scale=0に変更
				random_scale=0;door_type=5;
				new_split_h=2;
				new_split_v=2;
			}
			if (split_type == 'free') {
				//ここはrandom_scaleだけで判定される
				//可変随時分割/2.4doorにもなる
				door_type=0;
				new_split_h=Math.floor(Math.random() * max_split_h)+1;
				new_split_v=Math.floor(Math.random() * max_split_v)+1;
			}

			//total
			new_split_total=new_split_h*new_split_v;
			//時間調整判定
			var longtime=0;
			if (new_split_h == 1 || new_split_v == 1) {longtime=1;}

			//Even算出/可変なのでその都度算出
			even_v = 1;
			if (new_split_v % 2 != 0) {even_v = 0;}

			//スライス
			slice_W = Math.round(bs_W/new_split_h);//YOKO
			slice_H = Math.round(bs_H/new_split_v);//TATE
			slice_Wb = bs_W - slice_W * (new_split_h - 1);
			slice_Hb = bs_H - slice_H * (new_split_v - 1);
			var k = 0;
			for (var i=0; i < new_split_h; i++) {
				for (var j=0; j < new_split_v; j++) {
					//大きさ保存
					slicebs_W[k] = slice_W;
					if (i == new_split_h - 1) {slicebs_W[k] = slice_Wb;}
					slicebs_H[k] = slice_H;
					if (j == new_split_v - 1) {slicebs_H[k] = slice_Hb;}
					//位置保存
					slicebs_pos_x[k] = slice_W * i;
					slicebs_pos_y[k] = slice_H * j;
					k ++;
				}
			}

			//多目的判定用
			var chgxyflag = Math.floor(Math.random() * 5);
			//多目的判定用2 追加
			var chgflag = Math.floor(Math.random() * 4);
			//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 = keep_url;}

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

			//背景画像挿入
			var k = 0;
			for (var i=0; i < new_split_h; i++) {
				for (var j=0; j < new_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 s_w = 0;
			var s_h = 0;

			var flag3 = 1;
			var k = 0;
			for (var i=0; i < new_split_h; i++) {
				for (var j=0; j < new_split_v; j++) {
					
					//現在値代入/OUT
					pos_sx=slicebs_pos_x[k];
					pos_sy=slicebs_pos_y[k];
					s_w=slicebs_W[k];
					s_h=slicebs_H[k];

					//scale別の初期位置決定

					//スライド、フェードしかない
					if (random_scale == 0) {
						//スライド
						if (door_type == 0) {
							//上下左右方向スライド、反転なし
							if (chgflag == 0) {pos_sx=bs_W;}
							if (chgflag == 1) {pos_sx=slicebs_W[k]*-1;}
							if (chgflag == 2) {pos_sy=bs_H;}
							if (chgflag > 2) {pos_sy=slicebs_H[k]*-1;}
							if (chgflag == 4) {
								//Y方向のみ交互反転
								if (flag3 > 0) {pos_sy=bs_H;}
							}
						}
						//BAR-H
						if (door_type == 1) {
							if (chgflag < 2) {pos_sy=slicebs_H[k]*-1;}
							if (chgflag > 1) {pos_sy=bs_H;}
							if (chgflag == 4) {
								//交互反転
								if (flag3 > 0) {pos_sy=slicebs_H[k]*-1;}
							}
						}
						//BAR-V
						if (door_type == 2) {
							if (chgflag < 2) {pos_sx=slicebs_W[k]*-1;}
							if (chgflag > 1) {pos_sx=bs_W;}
							if (chgflag == 4) {
								//交互反転
								if (flag3 > 0) {pos_sx=slicebs_W[k]*-1;}
							}
						}
						//H-ZIPPER
						if (door_type == 3) {
							//上下開閉
							if (chgflag < 3) {
								pos_sy=-bs_H/2;
								if (j > 0) {pos_sy=bs_H;}
							}
							//上下開閉クロス
							if (chgflag > 2) {
								pos_sy=bs_H;
								if (j > 0) {pos_sy=-bs_H/2;}
							}

						}
						//V-ZIPPER
						if (door_type == 4) {
							//左右開閉
							if (chgflag < 3) {
								pos_sx=-bs_W/2;
								if (i > 0) {pos_sx=bs_W;}
							}
							//左右開閉クロス
							if (chgflag > 2) {
								pos_sx=bs_W;
								if (i > 0) {pos_sx=-bs_W/2;}
							}

						}
						//4DOOR
						if (door_type == 5) {
							if (chgflag == 0) {
								//水平方向kの順序
								pos_sx=h4_pos_X[k];
								pos_sy=h4_pos_Y[k];
							}
							if (chgflag == 1) {
								//垂直方向kの順序
								pos_sx=v4_pos_X[k];
								pos_sy=v4_pos_Y[k];
							}
							if (chgflag == 2) {
								//水平垂直方向kの順序
								pos_sx=hv4_pos_X[k];
								pos_sy=hv4_pos_Y[k];
							}
							if (chgflag > 2) {
								//対角方向kの順序
								pos_sx=door4_pos_X[k];
								pos_sy=door4_pos_Y[k];
							}
						}

					}
					//縦伸縮、上下振り分け
					if (random_scale == 1) {
						s_h=0;
						if (chgflag == 0) {pos_sy = 0;}
						if (chgflag == 1) {pos_sy = bs_H;}
						if (chgflag == 2) {pos_sy = bs_H/2;}
						if (chgflag > 2) {
							pos_sy = 0;
							if (flag3 < 0){ pos_sy = bs_H;}
						}
					}
					//横伸縮、左右振り分け
					if (random_scale == 2) {
						s_w=0;
						if (chgflag == 0) {pos_sx = 0;}
						if (chgflag == 1) {pos_sx = bs_W;}
						if (chgflag == 2) {pos_sx = bs_W/2;}
						if (chgflag > 2) {
							pos_sx = 0;
							if (flag3 < 0){ pos_sx = bs_W;}
						}
					}
					//中心補正
					if (random_scale == 3) {
						s_w=0;s_h=0;
						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 (random_scale > 3) {
						s_w=0;s_h=0;
						//内部ランダム分散
						if (chgxyflag < 2) {
							pos_sx=Math.floor(Math.random() * bs_W);
							pos_sy=Math.floor(Math.random() * bs_H);
						}
					}
					//移動大きさ保存配列
					mv_sW[k]=s_w;
					mv_sH[k]=s_h;
					mv_posX[k]=pos_sx;
					mv_posY[k]=pos_sy;

					//CSS移動
					if (slice_move_type == 'in') {
						slice_chips[k].css({'left':pos_sx,'top':pos_sy,'width':s_w,'height':s_h});
					}

					//outはcss移動なし、大きさそのまま
					k ++;
					flag3 *= -1;

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

			//delay-SET
			//random_scaleとdelay_noとzipperで分類して設定している
			var c_h=(new_split_h-1)/2;//h中間値
			var c_v=(new_split_v-1)/2;//v中間値
			flag3 = 1;
			var kk = 0;//方向違いカウント
			var kkk = 0;//半分でカウントダウン
			var k = 0;
			for (var i=0; i < new_split_h; i++) {
				for (var j=0; j < new_split_v; j++) {

					//縦方向にカウント
					kk = i * new_split_v + j;

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

					//random_scale 0を分離
					if (random_scale == 0) {
						//ZIPPER以外
						if (!zipper) {
							if (delay_no < 3) {delay_st[k] = k*delay_speed*2;}
							if (delay_no > 2) {delay_st[k] = kkk*delay_speed*2;}
						}
						//ZIPPER/普通の順序を多く
						if (zipper) {
							//H-ZIPPER
							if (door_type == 3) {
								//中心から分ける
								if (zipper_no == 0) {delay_st[k]=Math.abs(i-c_h)*delay_speed;}
								//外から
								if (zipper_no == 1) {delay_st[k]=(new_split_h-Math.abs(i-c_h))*delay_speed;}
								//ズレ
								if (zipper_no == 2) {
									if (j == 0) {delay_st[k]=(i+1)*delay_speed;}
									if (j == 1) {delay_st[k]=Math.abs(i-new_split_h)*delay_speed;}
								}
								//普通の順序
								if (zipper_no > 2) {delay_st[k]=(i+1)*delay_speed;}
							}
							//V-ZIPPER
							if (door_type == 4) {
								//中心から分ける
								if (zipper_no == 0) {delay_st[k]=Math.abs(j-c_v)*delay_speed;}
								//外から
								if (zipper_no == 1) {delay_st[k]=(new_split_v-Math.abs(j-c_v))*delay_speed;}
								//ズレ
								if (zipper_no == 2) {
									if (i == 0) {delay_st[k]=(j+1)*delay_speed;}
									if (i == 1) {delay_st[k]=Math.abs(j-new_split_v)*delay_speed;}
								}
								//普通の順序
								if (zipper_no > 2) {delay_st[k]=(j+1)*delay_speed;}
							}
						}
					}
					if (random_scale != 0) {
						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-new_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/new_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();
			}

			//アニメ時間の調整/片側の分割が1の場合(BAR状)、時間を長くする
			var speed_v=speed;
			if (longtime) {speed_v=speed*1.5;}

			//TEXT
			var text="SPLIT: ["+ new_split_h + "x" + new_split_v + "] "+ new_split_total +" TYPE(" + split_type + ") /IN.OUT "+ slice_move_type + " /SCL " + random_scale + " /DELAY " + delay_no + " /ZIP " + zipper_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 < new_split_h; i++) {
				for (var j=0; j < new_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=mv_sW[k];anim_H=mv_sH[k];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_v,function() {
						sliceflag ++;
						//goto slice_image_parts
						if (sliceflag == new_split_total) {slice_image_parts();}
					});
					k ++;
				}
			}

		};

		//end-anime
		function slice_image_parts() {

			sliceflag = 0;
			//下層に画像URLを切り替え
			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;

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

		};

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

				//LOADされた番号をactivedにする
				$("#thumb_box ul li").removeClass("pgr_actived");
				$('#thumb_box ul li').eq(count).addClass("pgr_actived");

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

})(jQuery);

Loading画像、ボタン画像

Loading画像、31x31 ボタン1、14x28 ボタン2、14x28 ボタン3、14x28

CSS pops-slideshow-07.css


/* pops-slideshow-07.css 日本語*/

#pops_slide_show {
	display:block;
	position:relative;
	width:640px;
	height:320px;
	background-color:#000000;
}
#pops_slide_show #slideshow_box {
	display:block;
	position:absolute;
	top:0;left:0;
	width:640px;
	height:320px;
	background-color:#000000;
	overflow:hidden;
}

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

#slideshow_box #slice_base {
	display:block;
	position:absolute;
	top:0;left:0;
	overflow:hidden;
}
#slideshow_box #slice_base .slice_bk {
	position:absolute;
	background-position: 0 0;
	top:0;left:0;
	overflow:hidden;
}

#slideshow_box #top_base {
	display:block;
	position:absolute;
	top:0;left:0;
	overflow:hidden;
}
#slideshow_box #top_base img {
	width:100%;
	height:100%;
	border-style:none;
}

#slideshow_box #ss_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*/
}
#slideshow_box #view_text {
	display:block;
	position:absolute;
	top:5px;left:5px;
	width:95%;
	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;
	background: url("/main/images/swich_btn5.gif") no-repeat;
	background-position:0 0;
	overflow:hidden;
	cursor: pointer;
	float:left;
}

#thumb_box ul li.pgr_actived {
	background-position:0 -14px;
}
#thumb_box ul li.pgr_hoverd {
	background-position:0 -14px;
}

以上です。



[ この記事のURL ]


タグ:series , photo , SlideShow , jquery

[ 簡易SLIDESHOW シリーズ記事 ]

jQueryホリゾンタルアコーディオン/52012.06.04
簡易SLIDESHOW/82012.03.20
簡易SLIDESHOW/72012.03.17
簡易SLIDESHOW/62012.03.16
簡易SLIDESHOW/52012.03.15
簡易SLIDESHOW/42012.03.14
簡易SLIDESHOW/32012.03.13
簡易SLIDESHOW/22012.03.12
簡易SLIDESHOW/12012.03.11
簡易SLICE-PHOTO/42012.03.03

 

ブログ記事一覧

年別アーカイブ一覧



[1]