パネルシフトプラグイン
Takodo jQuery Plugin
このプラグインについて
いくつかの写真を表示する仕方は様々有ります。
このプラグインでは、数枚の写真を並べて表示する時に、
その表示した写真の位置を替えて表示するようにしてみました。
想定
用意された写真より少ない枚数の写真を表示する
数枚の写真をモニタ上の１画面に表示する。
一つの画像の大きさは200～300pxあたり。
上記のような目的のプラグインは、簡単に作成できると始めました。 しかし、width、paddingについて悩みました。
また、画像を切り替える処理について色々と試してみたくなりました。 そのため、このプラグイン作成のために予想外の時間を使うことになりました。
まず、<divのwidth、paddingの処理に改めて苦慮しました。
その時調べたwidthと、paddinngについては、 WidthPaddingの解釈 にまとめました。
また、画像を切り替える時の処理については、この先も研究していきます。 切り替えイフェクトに新しいものが加わっていくと思います。
想定
用意された写真より少ない枚数の写真を表示する
数枚の写真をモニタ上の１画面に表示する。
一つの画像の大きさは200～300pxあたり。
上記のような目的のプラグインは、簡単に作成できると始めました。 しかし、width、paddingについて悩みました。
また、画像を切り替える処理について色々と試してみたくなりました。 そのため、このプラグイン作成のために予想外の時間を使うことになりました。
まず、<divのwidth、paddingの処理に改めて苦慮しました。
その時調べたwidthと、paddinngについては、 WidthPaddingの解釈 にまとめました。
また、画像を切り替える時の処理については、この先も研究していきます。 切り替えイフェクトに新しいものが加わっていくと思います。
サンプル
オプションを渡すことにより様々な表示を演出できます。
以下にその一部を紹介します。
以下にその一部を紹介します。
サンプル デフォルトでの表示
■ 》
解説
デフォルトでの表示のための主な設定は、
３行×２列、画像の大きさ３２０×１５０px、マージン５px、パディング１０px、写真を切り替える時間１００００ミリ秒
などです。その他これらの詳細な値を知りたい場合は、ソースをご覧ください。
次の様に実行します。
デフォルトでの表示のための主な設定は、
３行×２列、画像の大きさ３２０×１５０px、マージン５px、パディング１０px、写真を切り替える時間１００００ミリ秒
などです。その他これらの詳細な値を知りたい場合は、ソースをご覧ください。
次の様に実行します。
デフォルトでの実行方法
$("#PanelShift01").jqPanelsShift(); //パネルシフトプラグイン
サンプル フィルムのように表示してみました。
■ 》
解説
var options={
"RC":"2,4" //行,列数
,"wWH":"164,100" //１つの外枠の幅、高さ
,"mrgWH":1 //画像枠の外側の間隔
,"pdWH":0 //画像の縁にあたる大きさ
,"wakuCss":{"border":"solid 0px red"} //枠の指定。太さ０px（外枠線を表示しない）
}
$("#PanelShift02").jqPanelsShift(options); //パネルシフトプラグイン
使い方、ソースコード
html、Javascriptの記載方法。Javascriptのソースを紹介します。
Javascriptの呼び出し方
プラグインのスクリプトを読み込み
<script src="･･･/jqPanelsShift.js" type="text/javascript"></script>>
●2_デフォルトの呼び出し方_●
次のように、表示させるエレメント(PanelShift01)を指定するだけです。
$("#PanelShift01").jqPanelsShift(); //パネルシフトプラグイン
●2_オプションを指定しての呼び出し方_●
次のように、var options={･･･以下にオプション値を指定します。
オプションとして、指定できる値については、ソースをご覧ください。
var options={
"RC":"2,4" //行,列数
,"wWH":"164,100" //１つの外枠の幅、高さ
,"mrgWH":1 //画像枠の外側の間隔
,"pdWH":0 //画像の縁にあたる大きさ
,"wakuCss":{"border":"solid 0px red"} //枠の指定。太さ０px（外枠線を表示しない）
}
$("#PanelShift02").jqPanelsShift(options); //パネルシフトプラグイン
htmlの記載方法
次の一行を表示したい箇所へ記載します。
<div id="PanelShift01"></div>
また、表示する画像はクラス名をつけて記載します。 記載する場所は写真を表示するためのエレメントの中でなければどこでも構いません。
デフォルトのクラス名は、
「panelImg00」です。
これ以外のクラス名をつける時は、オプションで、
"imgClassName":"otherClassName"
と、指定してください。
<div id="PanelShift01"></div>
また、表示する画像はクラス名をつけて記載します。 記載する場所は写真を表示するためのエレメントの中でなければどこでも構いません。
デフォルトのクラス名は、
「panelImg00」です。
これ以外のクラス名をつける時は、オプションで、
"imgClassName":"otherClassName"
と、指定してください。
このプラグインのJavascriptソースコード
このプラグインのJavascriptソースコード
//----------------------------------------------------
//パネルシフトプラグイン 写真枠（パネル）を入れ替える（シフト）
//12/11/126-
// 作成開始
//----------------------------------------------------
(function($){
//----------------------------------------------------
//パネルシフトプラグイン本体
/*
画像の外枠と外枠の間隔は「mrgWH」で指定する。
各Cssの定義で、margin、paddingの指定はしない。
プログラムで処理をする。width、padding、marginの関係はとても複雑なのだ。
+--#thisId-----------------------------------------------------------------+
| +--.wakuDiv----幅、高さwWH-------+ +---.wakuDiv---------------------+ |
| | |-pdWH | | | |
| | +---------------･------+ | | +----------------------+ | |
| |pdWH| 画像のエリア | | | | | | |
| |････| 幅、高さは | | | | | | |
| | | wWH-(2*pdWH) | | | | | | |
| | +----------------------+ | | +----------------------+ | |
| | | | | |
| +--------------------------------+ +--------------------------------+ |
| |
+--------------------------------------------------------------------------+
*/
//----------------------------------------------------
jQuery.fn.jqPanelsShift=function(options){
var defaults = {
"imgClassName":"panelImg00"
// ,"RC":"2,3" //行,列数
,"RC":"3,2" //行,列数
,"wWH":"320,150" //１つの外枠の幅、高さ
,"mrgWH":5 //画像枠の外側の間隔
,"pdWH":10 //画像の縁にあたる大きさ
,"isEleDel":1 //「imgClassName」の処理方法 0:remove()、1:display:none;、else:何もしない
,"IntervalTime":10000 //写真を切りかえる時間
,"durTime":500 //一つの写真を切り替える時間
,"defaAnChngName":"横回転" //アニメ切り替え方法のデフォルト。下の２つのいずれかがtrueとなっているとき無視される。
,"isAnimeChngEvry":true // 方法を全体の切り替え方法ごとに変えるか
,"isAnimeChngEach":false // 方法をそれぞれの画像の切り替えごとに変えるか
,"wakuCss":{"float":"left"
,"border":"solid 1px red","background-color":"white"
,"border-radius":"5px","behavior":"url('/commondata/sscommon/PIE-1.0.0/PIE.htc')","position":"relative"
}
,"imgDivCss":{
"overflow":"hidden","background-color":"#998f90","position":"relative"
}
,"imgCss":{
"position":"absolute"
}
,"cmntDivCss":{"color":"white"
,"position":"absolute","height":"30px","padding":"5px 10px 5px 10px"
,"text-align":"left","font-size":"13px"
,"background-color":"#222222","opacity":"0.7"
}
,"ctrlEachDivCss":{"color":"white"
,"position":"absolute","padding":"5px 5px 5px 5px","text-align":"center"
,"cursor":"pointer","opacity":"0.8"
}
,"ctrlAllDivCss":{
"position":"absolute","cursor":"pointer"
,"padding":"2px 10px 2px 5px","text-align":"right","opacity":"0.3"
,"top":"-10px","width":"30px","color":"white","z-index":"999"
,"background-color":"#222222"
}
,"helpDivCss":{
"position":"absolute","top":"-50px","left":"200px","z-index":"999","width":"280px"
//,"display":"none"
,"opacity":"0"
}
,"helpDocCss":{
"color":"white","font-size":"13px","line-height":"15px","text-align":"left"
,"top":"-10px","padding":"2px 10px 2px 5px","background-color":"#222222"
,"border":"solid 1px #3a7ee9"
// ,"border":"solid 1px #111111"
,"border-radius":"5px","behavior":"url('/commondata/sscommon/PIE-1.0.0/PIE.htc')","position":"relative"
}
}
var setting = $.extend(true,defaults,options);
var thisId=$(this).attr("id");
var imgAry=[]; //画像を格納する変数
var eleAry={}; //画像を表示するDiv内の<imgエレメントオブジェクト配列
var animeKeyName=[]; //アニメーションのkeyの名前
var animeKindNo=0; //アニメーションの種類の数
var nowAnime={}; //現在の画像切り替えアニメーション方法
var SlideShowHndl=0; //スライドショーハンドル
var rowCnt=parseInt(setting.RC.split(",")[0],10); //行数
var colCnt=parseInt(setting.RC.split(",")[1],10); //列数
// var colCnt=parseInt(setting.RC.split(",")[0],10); //行数
// var rowCnt=parseInt(setting.RC.split(",")[1],10); //列数
var pdWH=setting.pdWH;
var wWidth=parseInt(setting.wWH.split(",")[0],10)-(2*pdWH); //枠の幅
var wHeight=parseInt(setting.wWH.split(",")[1],10)-(2*pdWH); // 高さ
var inEleWH={"width":wWidth+"px","height":wHeight+"px"}; //内枠のサイズ
//主なcssの設定を変数として作成
var imgCss=$.extend(true,setting.imgCss,inEleWH);
var cmntDivCss=$.extend(true,setting.cmntDivCss,{"width":wWidth+"px","top":(wHeight-30)+"px"});
var ctrlEachDivCss=$.extend(true,setting.ctrlEachDivCss,{"width":"30px","top":(wHeight-30)+"px","left":(wWidth-50)+"px"});
//cssの定義。外枠
var wakuCss=$.extend(true,setting.wakuCss,{"padding":pdWH+"px","margin":setting.mrgWH+"px"});
wakuCss=$.extend(true,wakuCss,inEleWH); //外枠のサイズを定義。内枠のサイズを定義するため不要？
//cssの定義。画像を納めるDiv(内枠)
var imgDivCss=$.extend(true,setting.imgDivCss,{"width":wWidth+"px","height":wHeight+"px"});
//cssの定義。コントロール枠、ヘルプ枠
var ttlW=(wWidth+pdWH)*colCnt;
var ctrlAllDivCss=$.extend(true,setting.ctrlAllDivCss,{"left":(ttlW-30)+"px"});
var helpDivCss=$.extend(true,setting.helpDivCss,{"left":(ttlW-260)+"px"});
//ssの定義。アニメーション用
var animAry={
"横回転":{
"bfrCss":{"width":"0px","left":(wWidth/2)+"px"}
,"aftCss":{"width":wWidth+"px","left":"0px"}
}
,"上下":{
"bfrCss":{"top":wHeight+"px"}
,"cngCss":{"top":-wHeight+"px"}
,"aftCss":{"top":"0px"}
}
,"下上":{
"bfrCss":{"top":-wHeight+"px"}
,"cngCss":{"top":wHeight+"px"}
,"aftCss":{"top":"0px"}
}
,"左右":{
"bfrCss":{"left":wWidth+"px"}
,"cngCss":{"left":-wWidth+"px"}
,"aftCss":{"left":"0px"}
}
,"右左":{
"bfrCss":{"left":-wWidth+"px"}
,"cngCss":{"left":wWidth+"px"}
,"aftCss":{"left":"0px"}
}
,"中央小大":{
"bfrCss":{"width":"0px","height":"0px","top":(wHeight/2)+"px","left":(wWidth/2)+"px"}
,"aftCss":{"width":wWidth+"px","height":wHeight+"px","left":"0px","top":"0px"}
}
,"中央２大小":{
"bfrCss":{"width":(2*wWidth)+"px","height":(2*wHeight)+"px","top":"0px","left":"0px"}
// ,"cngCss":{"left":wWidth+"px"}
,"aftCss":{"width":wWidth+"px","height":wHeight+"px","left":"0px","top":"0px"}
}
,"左上大２小":{
"bfrCss":{"width":(2*wWidth)+"px","height":(2*wHeight)+"px","top":"0px","left":"0px"}
// ,"cngCss":{"left":wWidth+"px"}
,"aftCss":{"width":wWidth+"px","height":wHeight+"px","left":"0px","top":"0px"}
}
,"透明":{
"bfrCss":{"opacity":0.1}
,"aftCss":{"opacity":1}
}
};
//アニメーションの種類の数取得。アニメーションのkey名配列作成
var i=0;for(var key in animAry){animeKeyName[i]=key;++i;}animeKindNo=i;
nowAnime=animAry[setting.defaAnChngName];
//指定のクラス名の写真を配列に取り込む
$("."+setting.imgClassName).each(function(i,val){
imgAry[i]={"src":$(this).attr("src"),"alt":$(this).attr("alt")};
});
if(setting.isEleDel==0){$("."+setting.imgClassName).remove();} //画像エレメントを削除
if(setting.isEleDel==1){$("."+setting.imgClassName).css({"display":"none"});} // 非表示
//--------------------------------------------
//JavaScriptで配列をシャッフルする
//http://la.ma.la/blog/diary_200608300350.htmより
//--------------------------------------------
//Array.prototype.shuffle=function(){
var shuffle=function(ary){
//一つずらす
//for(var i=0;i<len;++i){newAry[(i+1)%len]=ary[i];}
//Fisher-Yatesというアルゴリズムだそうです。
//var i = this.length;
var i = ary.length;
while(i){
var j = Math.floor(Math.random()*i);
var t = ary[--i];
//var t = this[--i];
//this[i] = this[j];
//this[j] = t;
ary[i] = ary[j];
ary[j] = t;
}
if(setting.isAnimeChngEvry){ //それぞれのアニメで切り替え方法を変えるとき
var rnd=Math.floor( Math.random()*animeKindNo);
nowAnime=animAry[animeKeyName[rnd]];
//$("#tst").append("thisId="+thisId+" nowAnime="+nowAnime+"<br>");
}
//return this;
return ary;
//別の方法。JavaScriptには破壊的sliceがないので代わりにspliceを使えば良い。
//var len = this.length;
//var ary = this.concat();
//var res = [];
//while(len) res.push(ary.splice(Math.floor(Math.random()*len--),1));
//return res
}
//--------------------------------------------
//画像を<img src=""にセットし、アニメーションで切り替える再帰関数
//--------------------------------------------
var setImg=function(i,nowAnime){
if(!eleAry[i]){return false;}
if(setting.isAnimeChngEach){ //それぞれのアニメで切り替え方法を変えるとき
var rnd=Math.floor( Math.random()*animeKindNo);
nowAnime=animAry[animeKeyName[rnd]];
}
var thisEle=eleAry[i];
$(thisEle).animate(nowAnime.bfrCss,{duration:setting.durTime,easing:"linear"
,complete:function(){
$(thisEle).attr({"src":imgAry[i].src}); //ソースをセット
$(thisEle).next().html(imgAry[i].alt); //コメントをセット
if(nowAnime.cngCss){
$(thisEle).css(nowAnime.cngCss);
}
$(thisEle).animate(nowAnime.aftCss,{duration:setting.durTime,easing:"linear"
,complete:function(){setImg(++i,nowAnime);}}); //再帰呼び出し
}});
}
//------------------------------
//スライドショーを開始する
//------------------------------
var SlideShowStart=function(mode){
SlideShowHndl=setInterval(function(){
//imgAry=rndSortAry(imgAry); //画像の並び替え
//imgAry=imgAry.shuffle() //画像の並び替え
imgAry=shuffle(imgAry) //画像の並び替え
//アニメーションの種類を決める
//var rnd=Math.floor( Math.random()*nowLen);
//animAry
setImg(0,nowAnime); //画像をimgにセットし、表示する。
},setting.IntervalTime);
}
//-------------------------------------------
//main()
//必要なエレメントを作成する。
//-------------------------------------------
$("#"+thisId).css({"position":"relative"});
$("#"+thisId).append('<div class="helpDiv">'
+'<div class="helpDoc">'
+''
+'</div>'
+'</div>');
$("#"+thisId).append('<div class="ctrlAllDiv">'
+'<span class="btnPlayPause">■</span> '
+'<span class="btnChngNow">》</span>'
+'</div>');
var cnt=0;
for(var i=0;i<rowCnt;++i){
for(var j=0;j<colCnt;++j){
$("#"+thisId).append('<div id="'+thisId+i+"_"+j+'" class="wakuDiv" style="">'
+'<div class="imgDiv">'
+'<img />'
+'<div class="cmntDiv"></div>'
//+'<div class="ctrlEachDiv">■</div>'
+'</div>'
+'</div>');
++cnt;
}
}
$("#"+thisId+" .wakuDiv").css(wakuCss); //css設定 外枠へ
$("#"+thisId+" .imgDiv").css(imgDivCss); //css設定 imgを格納するdivへ
$("#"+thisId+" img").css(imgCss); //css設定 imgをエレメントへ
$("#"+thisId+" .cmntDiv").css(cmntDivCss); //css設定 コメントエレメントへ
$("#"+thisId+" .ctrlEachDiv").css(ctrlEachDivCss); //css設定 各Divのコントロールエレメントへ
$("#"+thisId+" .ctrlAllDiv").css(ctrlAllDivCss); //css設定 コントロールエリア
$("#"+thisId+" .helpDiv").css(helpDivCss); //css設定 ヘルプ枠div
$("#"+thisId+" .helpDoc").css(setting.helpDocCss); //css設定 ヘルプ内容div
$("#"+thisId+" img").each(function(i,val){eleAry[i]=this;}); //<img エレメントオブジェクト配列の作成
imgAry=shuffle(imgAry) //画像の並び替え
//imgAry=imgAry.shuffle() //画像の並び替え
setImg(0,nowAnime); //画像をimgにセットし、表示する。
SlideShowStart(); //スライドショーを開始する
//切り替え「実行」「停止」
$("#"+thisId+" .btnPlayPause").click(function(){
if($(this).html()=="■"){
clearInterval(SlideShowHndl);
$(this).html("＞");
}else{
imgAry=shuffle(imgAry) //画像の並び替え
//imgAry=imgAry.shuffle() //画像の並び替え
setImg(0,nowAnime); //画像をimgにセットし、表示する。
SlideShowStart(); //スライドショーを開始する
$(this).html("■");
}
}).hover(
// function(){$("#"+thisId+" .helpDiv").show(500);}
function(){
$("#"+thisId+" .helpDoc").html("■ 画像の自動切り替えを停止します。切り替えの途中の時は切り替えが終了してからとなります。");
$("#"+thisId+" .helpDiv").animate({"opacity":"0.7"},500);
},function(){$("#"+thisId+" .helpDiv").animate({"opacity":"0"},500);}
//,function(){$("#"+thisId+" .helpDiv").hide(500);}
);
//即刻画像を切り替える「》」
$("#"+thisId+" .btnChngNow").click(function(){
imgAry=shuffle(imgAry) //画像の並び替え
//imgAry=imgAry.shuffle() //画像の並び替え
setImg(0,nowAnime); //画像をimgにセットし、表示する。
}).hover(
function(){
$("#"+thisId+" .helpDoc").html("「》」画像を即刻切り替えます。切り替えの途中の時は、新たに表示の切り替えを始めます。");
$("#"+thisId+" .helpDiv").animate({"opacity":"0.7"},500);
},function(){$("#"+thisId+" .helpDiv").animate({"opacity":"0"},500);}
);
}
})(jQuery);
//パネルシフトプラグイン 写真枠（パネル）を入れ替える（シフト）
//12/11/126-
// 作成開始
//----------------------------------------------------
(function($){
//----------------------------------------------------
//パネルシフトプラグイン本体
/*
画像の外枠と外枠の間隔は「mrgWH」で指定する。
各Cssの定義で、margin、paddingの指定はしない。
プログラムで処理をする。width、padding、marginの関係はとても複雑なのだ。
+--#thisId-----------------------------------------------------------------+
| +--.wakuDiv----幅、高さwWH-------+ +---.wakuDiv---------------------+ |
| | |-pdWH | | | |
| | +---------------･------+ | | +----------------------+ | |
| |pdWH| 画像のエリア | | | | | | |
| |････| 幅、高さは | | | | | | |
| | | wWH-(2*pdWH) | | | | | | |
| | +----------------------+ | | +----------------------+ | |
| | | | | |
| +--------------------------------+ +--------------------------------+ |
| |
+--------------------------------------------------------------------------+
*/
//----------------------------------------------------
jQuery.fn.jqPanelsShift=function(options){
var defaults = {
"imgClassName":"panelImg00"
// ,"RC":"2,3" //行,列数
,"RC":"3,2" //行,列数
,"wWH":"320,150" //１つの外枠の幅、高さ
,"mrgWH":5 //画像枠の外側の間隔
,"pdWH":10 //画像の縁にあたる大きさ
,"isEleDel":1 //「imgClassName」の処理方法 0:remove()、1:display:none;、else:何もしない
,"IntervalTime":10000 //写真を切りかえる時間
,"durTime":500 //一つの写真を切り替える時間
,"defaAnChngName":"横回転" //アニメ切り替え方法のデフォルト。下の２つのいずれかがtrueとなっているとき無視される。
,"isAnimeChngEvry":true // 方法を全体の切り替え方法ごとに変えるか
,"isAnimeChngEach":false // 方法をそれぞれの画像の切り替えごとに変えるか
,"wakuCss":{"float":"left"
,"border":"solid 1px red","background-color":"white"
,"border-radius":"5px","behavior":"url('/commondata/sscommon/PIE-1.0.0/PIE.htc')","position":"relative"
}
,"imgDivCss":{
"overflow":"hidden","background-color":"#998f90","position":"relative"
}
,"imgCss":{
"position":"absolute"
}
,"cmntDivCss":{"color":"white"
,"position":"absolute","height":"30px","padding":"5px 10px 5px 10px"
,"text-align":"left","font-size":"13px"
,"background-color":"#222222","opacity":"0.7"
}
,"ctrlEachDivCss":{"color":"white"
,"position":"absolute","padding":"5px 5px 5px 5px","text-align":"center"
,"cursor":"pointer","opacity":"0.8"
}
,"ctrlAllDivCss":{
"position":"absolute","cursor":"pointer"
,"padding":"2px 10px 2px 5px","text-align":"right","opacity":"0.3"
,"top":"-10px","width":"30px","color":"white","z-index":"999"
,"background-color":"#222222"
}
,"helpDivCss":{
"position":"absolute","top":"-50px","left":"200px","z-index":"999","width":"280px"
//,"display":"none"
,"opacity":"0"
}
,"helpDocCss":{
"color":"white","font-size":"13px","line-height":"15px","text-align":"left"
,"top":"-10px","padding":"2px 10px 2px 5px","background-color":"#222222"
,"border":"solid 1px #3a7ee9"
// ,"border":"solid 1px #111111"
,"border-radius":"5px","behavior":"url('/commondata/sscommon/PIE-1.0.0/PIE.htc')","position":"relative"
}
}
var setting = $.extend(true,defaults,options);
var thisId=$(this).attr("id");
var imgAry=[]; //画像を格納する変数
var eleAry={}; //画像を表示するDiv内の<imgエレメントオブジェクト配列
var animeKeyName=[]; //アニメーションのkeyの名前
var animeKindNo=0; //アニメーションの種類の数
var nowAnime={}; //現在の画像切り替えアニメーション方法
var SlideShowHndl=0; //スライドショーハンドル
var rowCnt=parseInt(setting.RC.split(",")[0],10); //行数
var colCnt=parseInt(setting.RC.split(",")[1],10); //列数
// var colCnt=parseInt(setting.RC.split(",")[0],10); //行数
// var rowCnt=parseInt(setting.RC.split(",")[1],10); //列数
var pdWH=setting.pdWH;
var wWidth=parseInt(setting.wWH.split(",")[0],10)-(2*pdWH); //枠の幅
var wHeight=parseInt(setting.wWH.split(",")[1],10)-(2*pdWH); // 高さ
var inEleWH={"width":wWidth+"px","height":wHeight+"px"}; //内枠のサイズ
//主なcssの設定を変数として作成
var imgCss=$.extend(true,setting.imgCss,inEleWH);
var cmntDivCss=$.extend(true,setting.cmntDivCss,{"width":wWidth+"px","top":(wHeight-30)+"px"});
var ctrlEachDivCss=$.extend(true,setting.ctrlEachDivCss,{"width":"30px","top":(wHeight-30)+"px","left":(wWidth-50)+"px"});
//cssの定義。外枠
var wakuCss=$.extend(true,setting.wakuCss,{"padding":pdWH+"px","margin":setting.mrgWH+"px"});
wakuCss=$.extend(true,wakuCss,inEleWH); //外枠のサイズを定義。内枠のサイズを定義するため不要？
//cssの定義。画像を納めるDiv(内枠)
var imgDivCss=$.extend(true,setting.imgDivCss,{"width":wWidth+"px","height":wHeight+"px"});
//cssの定義。コントロール枠、ヘルプ枠
var ttlW=(wWidth+pdWH)*colCnt;
var ctrlAllDivCss=$.extend(true,setting.ctrlAllDivCss,{"left":(ttlW-30)+"px"});
var helpDivCss=$.extend(true,setting.helpDivCss,{"left":(ttlW-260)+"px"});
//ssの定義。アニメーション用
var animAry={
"横回転":{
"bfrCss":{"width":"0px","left":(wWidth/2)+"px"}
,"aftCss":{"width":wWidth+"px","left":"0px"}
}
,"上下":{
"bfrCss":{"top":wHeight+"px"}
,"cngCss":{"top":-wHeight+"px"}
,"aftCss":{"top":"0px"}
}
,"下上":{
"bfrCss":{"top":-wHeight+"px"}
,"cngCss":{"top":wHeight+"px"}
,"aftCss":{"top":"0px"}
}
,"左右":{
"bfrCss":{"left":wWidth+"px"}
,"cngCss":{"left":-wWidth+"px"}
,"aftCss":{"left":"0px"}
}
,"右左":{
"bfrCss":{"left":-wWidth+"px"}
,"cngCss":{"left":wWidth+"px"}
,"aftCss":{"left":"0px"}
}
,"中央小大":{
"bfrCss":{"width":"0px","height":"0px","top":(wHeight/2)+"px","left":(wWidth/2)+"px"}
,"aftCss":{"width":wWidth+"px","height":wHeight+"px","left":"0px","top":"0px"}
}
,"中央２大小":{
"bfrCss":{"width":(2*wWidth)+"px","height":(2*wHeight)+"px","top":"0px","left":"0px"}
// ,"cngCss":{"left":wWidth+"px"}
,"aftCss":{"width":wWidth+"px","height":wHeight+"px","left":"0px","top":"0px"}
}
,"左上大２小":{
"bfrCss":{"width":(2*wWidth)+"px","height":(2*wHeight)+"px","top":"0px","left":"0px"}
// ,"cngCss":{"left":wWidth+"px"}
,"aftCss":{"width":wWidth+"px","height":wHeight+"px","left":"0px","top":"0px"}
}
,"透明":{
"bfrCss":{"opacity":0.1}
,"aftCss":{"opacity":1}
}
};
//アニメーションの種類の数取得。アニメーションのkey名配列作成
var i=0;for(var key in animAry){animeKeyName[i]=key;++i;}animeKindNo=i;
nowAnime=animAry[setting.defaAnChngName];
//指定のクラス名の写真を配列に取り込む
$("."+setting.imgClassName).each(function(i,val){
imgAry[i]={"src":$(this).attr("src"),"alt":$(this).attr("alt")};
});
if(setting.isEleDel==0){$("."+setting.imgClassName).remove();} //画像エレメントを削除
if(setting.isEleDel==1){$("."+setting.imgClassName).css({"display":"none"});} // 非表示
//--------------------------------------------
//JavaScriptで配列をシャッフルする
//http://la.ma.la/blog/diary_200608300350.htmより
//--------------------------------------------
//Array.prototype.shuffle=function(){
var shuffle=function(ary){
//一つずらす
//for(var i=0;i<len;++i){newAry[(i+1)%len]=ary[i];}
//Fisher-Yatesというアルゴリズムだそうです。
//var i = this.length;
var i = ary.length;
while(i){
var j = Math.floor(Math.random()*i);
var t = ary[--i];
//var t = this[--i];
//this[i] = this[j];
//this[j] = t;
ary[i] = ary[j];
ary[j] = t;
}
if(setting.isAnimeChngEvry){ //それぞれのアニメで切り替え方法を変えるとき
var rnd=Math.floor( Math.random()*animeKindNo);
nowAnime=animAry[animeKeyName[rnd]];
//$("#tst").append("thisId="+thisId+" nowAnime="+nowAnime+"<br>");
}
//return this;
return ary;
//別の方法。JavaScriptには破壊的sliceがないので代わりにspliceを使えば良い。
//var len = this.length;
//var ary = this.concat();
//var res = [];
//while(len) res.push(ary.splice(Math.floor(Math.random()*len--),1));
//return res
}
//--------------------------------------------
//画像を<img src=""にセットし、アニメーションで切り替える再帰関数
//--------------------------------------------
var setImg=function(i,nowAnime){
if(!eleAry[i]){return false;}
if(setting.isAnimeChngEach){ //それぞれのアニメで切り替え方法を変えるとき
var rnd=Math.floor( Math.random()*animeKindNo);
nowAnime=animAry[animeKeyName[rnd]];
}
var thisEle=eleAry[i];
$(thisEle).animate(nowAnime.bfrCss,{duration:setting.durTime,easing:"linear"
,complete:function(){
$(thisEle).attr({"src":imgAry[i].src}); //ソースをセット
$(thisEle).next().html(imgAry[i].alt); //コメントをセット
if(nowAnime.cngCss){
$(thisEle).css(nowAnime.cngCss);
}
$(thisEle).animate(nowAnime.aftCss,{duration:setting.durTime,easing:"linear"
,complete:function(){setImg(++i,nowAnime);}}); //再帰呼び出し
}});
}
//------------------------------
//スライドショーを開始する
//------------------------------
var SlideShowStart=function(mode){
SlideShowHndl=setInterval(function(){
//imgAry=rndSortAry(imgAry); //画像の並び替え
//imgAry=imgAry.shuffle() //画像の並び替え
imgAry=shuffle(imgAry) //画像の並び替え
//アニメーションの種類を決める
//var rnd=Math.floor( Math.random()*nowLen);
//animAry
setImg(0,nowAnime); //画像をimgにセットし、表示する。
},setting.IntervalTime);
}
//-------------------------------------------
//main()
//必要なエレメントを作成する。
//-------------------------------------------
$("#"+thisId).css({"position":"relative"});
$("#"+thisId).append('<div class="helpDiv">'
+'<div class="helpDoc">'
+''
+'</div>'
+'</div>');
$("#"+thisId).append('<div class="ctrlAllDiv">'
+'<span class="btnPlayPause">■</span> '
+'<span class="btnChngNow">》</span>'
+'</div>');
var cnt=0;
for(var i=0;i<rowCnt;++i){
for(var j=0;j<colCnt;++j){
$("#"+thisId).append('<div id="'+thisId+i+"_"+j+'" class="wakuDiv" style="">'
+'<div class="imgDiv">'
+'<img />'
+'<div class="cmntDiv"></div>'
//+'<div class="ctrlEachDiv">■</div>'
+'</div>'
+'</div>');
++cnt;
}
}
$("#"+thisId+" .wakuDiv").css(wakuCss); //css設定 外枠へ
$("#"+thisId+" .imgDiv").css(imgDivCss); //css設定 imgを格納するdivへ
$("#"+thisId+" img").css(imgCss); //css設定 imgをエレメントへ
$("#"+thisId+" .cmntDiv").css(cmntDivCss); //css設定 コメントエレメントへ
$("#"+thisId+" .ctrlEachDiv").css(ctrlEachDivCss); //css設定 各Divのコントロールエレメントへ
$("#"+thisId+" .ctrlAllDiv").css(ctrlAllDivCss); //css設定 コントロールエリア
$("#"+thisId+" .helpDiv").css(helpDivCss); //css設定 ヘルプ枠div
$("#"+thisId+" .helpDoc").css(setting.helpDocCss); //css設定 ヘルプ内容div
$("#"+thisId+" img").each(function(i,val){eleAry[i]=this;}); //<img エレメントオブジェクト配列の作成
imgAry=shuffle(imgAry) //画像の並び替え
//imgAry=imgAry.shuffle() //画像の並び替え
setImg(0,nowAnime); //画像をimgにセットし、表示する。
SlideShowStart(); //スライドショーを開始する
//切り替え「実行」「停止」
$("#"+thisId+" .btnPlayPause").click(function(){
if($(this).html()=="■"){
clearInterval(SlideShowHndl);
$(this).html("＞");
}else{
imgAry=shuffle(imgAry) //画像の並び替え
//imgAry=imgAry.shuffle() //画像の並び替え
setImg(0,nowAnime); //画像をimgにセットし、表示する。
SlideShowStart(); //スライドショーを開始する
$(this).html("■");
}
}).hover(
// function(){$("#"+thisId+" .helpDiv").show(500);}
function(){
$("#"+thisId+" .helpDoc").html("■ 画像の自動切り替えを停止します。切り替えの途中の時は切り替えが終了してからとなります。");
$("#"+thisId+" .helpDiv").animate({"opacity":"0.7"},500);
},function(){$("#"+thisId+" .helpDiv").animate({"opacity":"0"},500);}
//,function(){$("#"+thisId+" .helpDiv").hide(500);}
);
//即刻画像を切り替える「》」
$("#"+thisId+" .btnChngNow").click(function(){
imgAry=shuffle(imgAry) //画像の並び替え
//imgAry=imgAry.shuffle() //画像の並び替え
setImg(0,nowAnime); //画像をimgにセットし、表示する。
}).hover(
function(){
$("#"+thisId+" .helpDoc").html("「》」画像を即刻切り替えます。切り替えの途中の時は、新たに表示の切り替えを始めます。");
$("#"+thisId+" .helpDiv").animate({"opacity":"0.7"},500);
},function(){$("#"+thisId+" .helpDiv").animate({"opacity":"0"},500);}
);
}
})(jQuery);
