Wonderful! WordPress

全てのアップ画像によるスライドショーのjQuery

Page No.2

スライドショーをスタートさせる関数は、データをファイルから取得する場合とAjaxにて取得する場合とで別にしています。識別子をつけてひとつにまとめてしまっても良いのですが、どちらかしか使わない場合がほとんどだと思うので、敢えて別にしました。
64~79行目がファイルを読み込んで取得する場合。
82~99行目がAjax にてデータを取得する場合のものです。
このAjax でデータを取得する部分については、全く同じ部分のことをこのページ«taxonomyで絞り込んだ画像一覧ページ-改»の《 WordPress で Ajax 》で書いていますのでそちらをご覧ください。
ファイルを読み込む処理も、php の関数からデータを得る処理もjQuery によるAjax は、えっ!たったこれだけ!っていう感じでほんとに手軽です。
そしてスライドショーを引き続き行う関数。

jQuery( function() {
	stx_sldshw.slideshow = function(){
		var rand,
			knum=0,
			tarflg,
			nowday,
			nowsecond,
			lastflg,
			loadcount = 1;

		stx_sldshw.sldflg = 1;
		stx_sldshw.sumnum++;

		stx_sldshw.showimg();//画像を表示する関数

		if ( null != stx_sldshw.ctdwID ){
			clearInterval( stx_sldshw.ctdwID );
			stx_sldshw.ctdwID = null;
		}
		stx_sldshw.callctdwID = setTimeout( function() {
			// 次の画像までのカウントダウンを表示する関数
			stx_sldshw.sldcountdown();
		}, 2000 );

		//ここから次の画像番号を得るための処理
		knum = 0;
		stx_sldshw.nonestr = '';
		while ( knum < 3 ) {
			tarflg = 0;
			nowday = new Date();
			nowsecond = nowday.getSeconds();
			rand = Math.floor( ( Math.random() * 100000000 ) ) * nowsecond;
			stx_sldshw.tarnum = rand % stx_sldshw.imagescount;
			if ( stx_sldshw.tarlist[ stx_sldshw.tarnum ] == -1 ) {
				tarflg = 1;
			}
			if( 0 == tarflg ) {
				break;
			}
			knum += 1;
		}
		lastflg = 0;
		if ( 1 == tarflg ) {
			lastflg = 1;
			for ( var i = stx_sldshw.tarlist.length-1; i >= 0; i-- ) {
				if ( -1 != stx_sldshw.tarlist[ i ] ) {
					stx_sldshw.tarnum = i;
					lastflg = 2;
					stx_sldshw.nonestr = "*";
					stx_sldshw.nonenum++;
					break;
				}
			}
		}
		if ( 1 == lastflg ) {
			for ( var i = 0; i < stx_sldshw.tarlist.length; i++ ) {
				stx_sldshw.tarlist[ i ] = 1;
			}
		}
		stx_sldshw.tarlist.splice(stx_sldshw.tarnum,1,-1);
		stx_sldshw.pastimg.unshift( stx_sldshw.tarnum );
		if ( stx_sldshw.pastimg.length > 50 ) {
			var kuzu = stx_sldshw.pastimg.pop();
		}

		//得られた番号により画像の配列から画像の加工前のurlを取得
		stx_sldshw.imgsrc = stx_sldshw.imagesary[ stx_sldshw.tarnum ];
		//アルファベットに置き換えられている年月を戻す
		if ( stx_sldshw.is_file_comp ) {
			stx_sldshw.imgsrc = stx_sldshw.numary[ stx_sldshw.imgsrc.substr( 0, 1 ) ] + stx_sldshw.numary[ stx_sldshw.imgsrc.substr( 1, 1 ) ] + stx_sldshw.imgsrc.slice(2);
		}
		stx_sldshw.imgsrc = stx_sldshw.uploaddir + stx_sldshw.imgsrc + '.jpg';
		// imageオブジェクトに画像のurlを渡す。多分これで画像の先読みにもなると思われる。あくまで多分。
		stx_sldshw.nextimg.src = stx_sldshw.imgsrc;

		// ループ処理。次の処理をsetTimeoutで呼び出す
		// stx_sldshw.enloadflgは前の画像がロードされたかのフラグ
		// ロードされていない場合は待っている
		if ( 1 === stx_sldshw.enloadflg ) {
			stx_sldshw.slideID = setTimeout( function() {
				stx_sldshw.slideshow();
			}, stx_sldshw.intarvalnum );
		} else {
			loadcount = 1;
			stx_sldshw.callID = setInterval( function() { 
				if ( 1 === stx_sldshw.enloadflg ) {
					clearInterval( stx_sldshw.callID );
					stx_sldshw.callID = null;
					stx_sldshw.slideID = setTimeout( function() {
						stx_sldshw.slideshow();
					}, stx_sldshw.intarvalnum );
				} else {
					if ( loadcount > 10 ) {
						clearInterval( stx_sldshw.callID );
						stx_sldshw.callID = null;
						alert( '画像ファイルのロードができませんでした。' );
					} else {
						jQuery( '#slctdown' ).text( 'load image try ' + loadcount );
					}
					loadcount++;
				}
			}, 3000 );

		}
	}
} );
JavaScript
CopyExpand

主な部分は次の画像番号を得る処理です。
同じ画像を二度表示させないための涙ぐましい努力がここには見れます。
発生させた乱数にはその時の時刻の秒数をかけて、画像の枚数で割った余りを画像番号として得ます。
それを既に使用した番号のフラグを登録している配列にてチェックし、既出であれば再び同様の処理をして番号を生成します。
このチェックを三度まで行い、それでも初出の番号が得られない場合は、先ほど使用した既出番号のフラグが登録してある配列を降順で使用していない番号を調べてそれを使うという事にしています。
これで、リストが一回りしない限り同じ画像が二度表示されることはないと。
で、このslideshow() 関数から呼び出されて画像を実際に表示する関数。

jQuery( function() {
	stx_sldshw.showimg = function() {
		var truewid,// 画像のwidth
			truehei,// 画像のheight
			imgwid,// 表示する時の画像のwidth
			imghei,// 表示する時の画像のheight
			winhei = jQuery( window ).height(),// ウィンドウのheight
			winwid = jQuery( window ).width(),// ウィンドウのwidth
			bwhresio = winwid / winhei,// ウィンドウの高さと幅の比
			iwhresio,// 画像の高さと幅の比
			ngmgleft,// ゴースト画像のmargin-leftの値
			sizestr;

		// 画像がロードされたフラグをfalseの0に初期化
		stx_sldshw.enloadflg = 0;
		stx_sldshw.img01.onload = function() {
			truewid = stx_sldshw.img01.width;
			truehei = stx_sldshw.img01.height;
			iwhresio = truewid / truehei;
	
			if ( bwhresio > iwhresio ) {
				imghei = Math.floor( winhei * stx_sldshw.hzm_rasio );
				 if ( imghei > 960 ) {
					imghei = 960;
				}
				imgwid = Math.floor( imghei * truewid / truehei );
			} else {
				imgwid = Math.floor( winwid * stx_sldshw.wzm_rasio );
				if ( imgwid > 1280 ) {
					imgwid = 1280;
				}
				imghei = Math.floor( imgwid * truehei / truewid );
			}

			// 画像がロードされたフラグをtrueの1に
			stx_sldshw.enloadflg = 1;
			// ゴースト画像のmargin-leftの値を計算(画像の横幅によって変わるセンター位置を調整)
			ngmgleft = -1 * imgwid / 2;

			// 画像の差し替え
			jQuery( '#upimage' ).fadeOut( 'slow', function() {
				jQuery( '#upimage' ).attr( 'src', stx_sldshw.img01.src ).css( { width:imgwid, height:imghei } ).fadeIn( 1500 );
				setTimeout( function() {
					// ゴースト画像の設定
					jQuery( '#subupimage' ).fadeOut( 900, function() {
						jQuery( '#subupimage' ).attr( 'src', stx_sldshw.img01.src ).css( { width: imgwid, height: imghei, marginLeft: ngmgleft } ).fadeIn();
					} );
				}, 700 );
			});
	
			sizestr = truewid + '×' + truehei;
			jQuery( '#explain').css( 'visibility', 'visible' ).text( 'image size : ' + sizestr + '  : p key pause : s key restart : b key back-image : f key end' );
		 	jQuery( '#slidecount' ).text( stx_sldshw.sumnum + ' : ' + stx_sldshw.tarnum + stx_sldshw.nonestr + ' : ' + stx_sldshw.nextimg.src.substring( stx_sldshw.nextimg.src.indexOf( '20', 20 ) ) + ' : int. ' + stx_sldshw.timenum + ' s' );
		}
		stx_sldshw.img01.src = stx_sldshw.nextimg.src;
	}
} );
JavaScript
CopyExpand

画像を読み込んだら、ウィンドウの縦横比と画像の縦横比を比較して、それぞれの場合の基準を縦にするか横にするか判別して、画像の大きさを設定して表示しているだけのことです。
そして次の画像までのカウントダウンをする関数。

jQuery( function() {
	stx_sldshw.sldcountdown = function() {
		var ctnum = stx_sldshw.timenum;

		stx_sldshw.ctdwID = setInterval( function() {
			if ( ctnum < 0 ) {
				clearInterval( stx_sldshw.ctdwID );
				stx_sldshw.ctdwID = null;
			} else {
				jQuery( '#slctdown' ).text( 'last ' + ctnum + ' seconds' );
			}
			ctnum--;
		}, 1000 );
	}
} );
JavaScript
CopyExpand

停止と再スタートの関数。
停止の方は引数にsを渡せば停止、それ以外の文字列を渡せば表示されるのがpause(一時停止)の状態となります。

jQuery( function() {
	stx_sldshw.stopslide = function( dir ) {
		if ( null != stx_sldshw.callID ){
			clearInterval( stx_sldshw.callID );
			stx_sldshw.callID = null;
		}
		if ( null != stx_sldshw.slideID ){
			clearInterval( stx_sldshw.slideID );
			stx_sldshw.slideID = null;
			stx_sldshw.sldflg = 0;
		}
		if ( null != stx_sldshw.callctdwID ){
			clearInterval( stx_sldshw.callctdwID );
			stx_sldshw.callctdwID = null;
		}
		if ( null != stx_sldshw.ctdwID ){
			clearInterval( stx_sldshw.ctdwID );
			stx_sldshw.ctdwID = null;
		}
		if ( 's' == dir ) {
		 	jQuery( '#slidecount' ).text( '' );
			jQuery( '#sldrestart' ).css( 'visibility', 'hidden' );
			jQuery( '#explain').text( '画像をクリックすれば元に戻ります。' ).css( 'visibility', 'hidden' );
			jQuery( '#slidestop' ).css( 'visibility', 'hidden' );
			jQuery( '#imageframe' ).css( 'visibility', 'hidden' );
			stx_sldshw.sldflg = 0;
		} else {
		 	jQuery( '#slidecount' ).text( 'Now pausing' );
			jQuery( '#sldrestart' ).css( 'visibility', 'visible' );
		}
	}
	
	stx_sldshw.resldstart = function() {
		if ( stx_sldshw.imagesary.length > 0 && null != stx_sldshw.timenum) {
			stx_sldshw.backnum = 2;
			stx_sldshw.slideshow();
		}
	 	jQuery( '#slidecount' ).text( 'Restart!' );
		jQuery( '#sldrestart' ).css( 'visibility', 'hidden' );
	}
} );
JavaScript
CopyExpand

で、一旦停止して画像を遡って表示させる関数。
画像を表示させる部分は、前述のshowimg()関数を使えばいいんですが・・・。

jQuery( function() {
	stx_sldshw.backslide = function() {
		var tmpimg,
			tmpnum,
			previmg = new Image(),
			winhei = jQuery( window ).height(),
			winwid = jQuery( window ).width(),
			truewid,
			truehei,
			iwresio,
			bwhresio = winwid / winhei,
			iwhresio,
			sizestr,
			imghei,
			imgwid,
			ngmgleft;
	
		if ( stx_sldshw.backnum < stx_sldshw.pastimg.length ) {
			if ( null != stx_sldshw.callID ){
				clearInterval( stx_sldshw.callID );
				stx_sldshw.callID = null;
			}
			if ( null != stx_sldshw.slideID ){
				clearInterval( stx_sldshw.slideID );
				stx_sldshw.slideID = null;
			}
			if ( null != stx_sldshw.ctdwID ){
				clearInterval( stx_sldshw.ctdwID );
				stx_sldshw.ctdwID = null;
			}
		 	jQuery( '#slctdown' ).text( stx_sldshw.backnum );
			jQuery( '#sldrestart' ).css( 'visibility', 'visible' );
	
			tmpnum = stx_sldshw.pastimg[ stx_sldshw.backnum ];
			tmpimg = stx_sldshw.imagesary[ tmpnum ];
			if ( stx_sldshw.is_file_comp ) {
				tmpimg = stx_sldshw.numary[ tmpimg.substr( 0, 1 ) ] + stx_sldshw.numary[ tmpimg.substr( 1, 1 ) ] + tmpimg.slice(2);
			}
			tmpimg = stx_sldshw.uploaddir + tmpimg + '.jpg';
			stx_sldshw.backnextimg.src = tmpimg;
	
			previmg.onload=function() {
				truewid = previmg.width;
				truehei = previmg.height;
				iwhresio = truewid / truehei;
	
				if ( bwhresio > iwhresio ) {
					imghei = Math.floor( winhei * stx_sldshw.hzm_rasio );
					 if ( imghei > 960 ) {
						imghei = 960;
					}
					imgwid = Math.floor( imghei * truewid / truehei );
				} else {
					imgwid = Math.floor( winwid * stx_sldshw.wzm_rasio );
					if ( imgwid > 1280 ) {
						imgwid = 1280;
					}
					imghei = Math.floor( imgwid * truehei / truewid );
				}
	
				ngmgleft = -1 * imgwid / 2;
				jQuery( '#upimage' ).fadeOut( 'slow', function() {
					jQuery( '#upimage' ).attr( 'src', previmg.src ).css( { width:imgwid, height:imghei } ).fadeIn( 1500 );
					setTimeout( function() {
						jQuery( '#subupimage' ).fadeOut( 900, function() {
							jQuery( '#subupimage' ).attr( 'src', previmg.src ).css( { width: imgwid, height: imghei, marginLeft: ngmgleft } ).fadeIn();
						} );
					}, 700 );
				});
	
				sizestr = truewid + '×' + truehei;
				jQuery( '#slidecount').text( 'stop & back : -' + stx_sldshw.backnum + ' : ' + tmpimg.substring( tmpimg.indexOf( "20", 20 ) ) );
				jQuery( '#explain').text( 'image size : ' + sizestr );
				stx_sldshw.backnum++;
			}
			previmg.src = stx_sldshw.backnextimg.src;
		 }
	}
} );
JavaScript
CopyExpand

スライドショーを起動させるには引数として画像のリストファイルのパスかAjax の場合はWordPress で指定されたパスを渡す必要があります。スライドショー起動用のボタンをa タグ で作り、そのrel 属性の値としてファイルのパスを渡すようにしています。
input 要素のname="intnum" はスライドショーのインターバルを設定するためのもの。
Ajax の方のtarget で指定ているデータは、Ajax で呼び出すphp関数においてデータを絞り込むのに必要なデータ。


<!--画像リストファイルを読み込む場合-->
<?php
	$slidefile = './wp-content/themes/~/ilist.php';
	if ( file_exists( $slidefile ) ) {
?>
<div id="startslide">
	<a href="#" id="slidestart" rel="<?php echo $slidefile; ?>" title="start slide show of all images">start slide show</a>
	<div id="slideform">Slide show<br />
		<form id="sidefrm" action="#">
			&emsp;every&ensp;<input type="number" id="intnum" name="intnum" value="8" size="2" min="4" max="50">&ensp;seconds
		</form>
	</div>
</div>
<?php
	}
?>

<!--Ajaxでデータを受け取る場合-->
<?php
	$slidefile = get_bloginfo( 'wpurl' ) . '/wp-admin/admin-ajax.php';
?>
<div id="startslide">
	<a href="#" id="slidestart" rel="<?php echo $slidefile; ?>" title="start slide show of all images" target="<?php echo $opflg . $tagname; ?>">start slide show</a>
	<!--<a href="#" id="slidestart" rel = "<?php echo '&target=' . $opflg . $tagname . '&time='; ?>" title="start slide show of all images">start slide show</a>-->
	<div id="slideform">Slide show<br />
		<form id="sidefrm" action="#">
		&emsp;every&ensp;<input type="number" id="intnum" name="intnum" value="8" size="2" min="4" max="50">&ensp;seconds
		</form>
	</div>
</div>
PHP
CopyExpand

起動するためのjQuery

jQuery( function() {
	jQuery( '#slidestart' ).click( function() {
		var targetfile = jQuery( this ).attr( 'rel' );
		if ( -1 !== targetfile.indexOf( 'admin-ajax' ) ) {
			var tag = jQuery( this ).attr( 'target' );
			stx_sldshw.slidestart_nofile( targetfile, tag );
		} else {
			stx_sldshw.slidestart( targetfile );
		}
		return false;
	});
} );
JavaScript
CopyExpand

ついでにキーによる操作もできるようにすると、

jQuery(function() {
	jQuery( window ).keydown(function( e ) {
		var key_code = e.keyCode,
			shift_key = e.shiftKey;

		if ( 80 == key_code && true == shift_key ) {
			stx_sldshw.stopslide( 'p' );//shift+p key
		} else if ( 69 == key_code && true == shift_key ) {
			stx_sldshw.stopslide( 's' );//shift+e key
		} else if ( 83 == key_code && true == shift_key ) {
			stx_sldshw.resldstart();//shift+s key
		} else if ( 66 == key_code && true == shift_key ) {
			stx_sldshw.backslide();//shift+b key
		}
	});
});
JavaScript
CopyExpand

Sanbanse Funabashi

Top

スクロールさせるか画像をクリックすると元に戻ります。