function setSlide() {
var current = 0;
var total = $("div#container div.content").length;
var params = new Object();
var pivots = new Array();
//前処理用のパラメータを用意
params = {x1:0, y1:0, x2:0, y2:0, width:0, height:0};
//各コンテンツにループを実行
$("div#container div.content").each(function(num) {
var content = $(this);
var left = content.position().left;
var top = content.position().top;
var width = content.width();
var height = content.height();
//拡大率、回転の角度をカスタム属性「scale」「rotate」から取得
var scale = Number(content.attr("scale"));
var degree = Number(content.attr("rotate").replace("deg", ""));
//コンテンツの座標から、全体の表示エリアの左上（x1、y1）と右下（x2、y2）を取得
params.x1 = (left < params.x1) ? left : params.x1;
params.y1 = (top < params.y1) ? top : params.y1;
params.x2 = (left+width > params.x2) ? left+width : params.x2;
params.y2 = (top+height > params.y2) ? top+height : params.y2;
//全体エリアの座標からのコンテンツの中心点の相対座標を格納
pivots[num] = {x:left+Math.floor(width/2), y:top+Math.floor(height/2)};
//各コンテンツに拡大および回転をCSSで設定
content.css({scale:scale, rotate:degree+"deg"});
//コンテンツをクリックした際に、スライドの移動を実行
content.click(function() {
current = num;
slideContent(1000);
});
});
//全体エリアの横サイズと縦サイズを、左上座標、右上座標から測定し、CSSで設定
params.width = params.x2-params.x1;
params.height = params.y2-params.y1;
$("div#container").css({width:params.width+"px", height:params.height+"px"});
//全体エリアをウィンドウの中心に座標を移動し、ウィンドウのリサイズ時にも座標を調整
adjustCenter($("div#container"));
$(window).resize(function() {
adjustCenter($("div#container"));
});
//キーボードが押された際に、スライドの移動を実行
$(window).keydown(function(event) {
switch(event.keyCode) {
case 37 : //left
case 38 : //up
current = (current > 0) ? current-1 : total-1;
slideContent(1000);
break;
case 32 : //space
case 39 : //right
case 40 : //down
current = (current < total-1) ? current+1 : 0;
slideContent(1000);
break;
}
});
//初期設定として、スライドの移動を実行
slideContent(0);
function slideContent(time) {
//表示対象のコンテンツ
var content = $("div#container div.content:eq("+current+")");
//表示対象ではないその他のコンテンツ
var other = $("div#container div.content:not(:eq("+current+"))");
//全体エリアのサイズと、表示対象のコンテンツの中心座標から移動距離を測定
var x = params.width/2-pivots[current].x;
var y = params.height/2-pivots[current].y;
//拡大率、回転の角度をカスタム属性「scale」「rotate」から取得
var scale = Number(content.attr("scale"));
var degree = Number(content.attr("rotate"));
//表示対象のコンテンツを前面に出して、非透明に
content.css({zIndex:10}).transition({opacity:1}, time, "ease");
//表示対象ではないその他のコンテンツを背面において、透明度を設定
other.css({zIndex:1}).transition({opacity:0.125}, time, "ease");
//全体エリアを拡大、および回転
$("div#container").transition({scale:1/scale, rotate:(360-degree)+"deg"}, time, "ease");
//各コンテンツを置いている、全体エリアの内側のボックスの座標を設定し、ウィンドウの中心に移動
$("div#container div.inner").transition({x:x+"px", y:y+"px"}, time, "ease");
}
}
function adjustCenter(target) {
var margin_top = Math.floor(($(window).height()-target.height())/2);
var margin_left = Math.floor(($(window).width()-target.width())/2);
target.css({top:margin_top+"px", left:margin_left+"px"});
}
