/* ------------------------------------------------------------------------
クロスフェードスライドショー（画像リンク、テキスト表示機能つき）
Copyright (c) 2009, Matsumoto.JS All rights reserved.
【使用方法】（なるべくタグ内にて）
【パラメータの説明】
第1パラメータはXMLの場所を指定します（JSON指定も可、サンプルを参照）
第2パラメータは以下の情報を任意に指定します（上記書式を参考に）
imageId: スライドショーを表示するブロックのID
textId: XMLテキストを表示する際のテキストブロックのID
（指定しない、または空の場合はテキストを表示しません）
loop: trueは繰返し再生します、falseは最後の画像で停止します
autorun: ページ表示直後に自動再生させない場合はfalseを指定します
trueの場合、next,prevSlide実行後も時間がくれば次を表示します
interval: 画像表示時間を秒で指定（フェード中も含まれる）
duration: フェードの時間を秒で指定（画像の切替え時間）
paginate: テキスト表示時にページ番号を付ける（true/false）
valign: 縦方向のセンタリング(初期値: false)
halign: 横方向のセンタリング(初期値: true)
※ valign,halignはimageId内のimgタグに属性またはCSSでwidth,heightがないこと。
（指定すると実サイズが取得できず位置調整ができないため）
textout: テキスト表示時にアウト時のフェード（"fade"/"drop"/"shrink"/"puff"）
linkTarget: ジャンプURLがある場合のターゲットウィンドウ（'_self','_blank'）
【XMLの説明】
-
タイトルはイメージのaltに適用
画像URL:相対パスの場合HTMLから/01.jpg
画像クリックでジャンプさせる場合のURL
説明文:HTMLタグはエスケープします
------------------------------------------------------------------------ */
var Crossfade = Class.create();
Crossfade.prototype = {
initialize: function(loc,option) {
this.url = loc;
this.props = {
imageId : "image-container",
textId : "",
loop : true,
autorun : true,
interval : 4,
duration : 1,
paginate : false,
valign : false,
halign : true,
textout : "fade",
linkTarget : "_self"
};
if(option) for(var key in option) this.props[key] = option[key];
this.myTimer = 0;
this.idx = 0;
this.itemCount = 0;
this.imageUrls = new Array();
this.linkArray = new Array();
this.titlArray = new Array();
this.descArray = new Array();
this.baseDiv = $(this.props.imageId);
if (this.url.items) this.loadJson();
else this.loadXMLFile();
},
loadXMLFile: function () {
new Ajax.Request(this.url, {
method: "get",
onComplete: function (httpObj) {
this.displayData(httpObj);
}.bindAsEventListener(this)
}
);
},
displayData: function (httpObj) {
var XML = httpObj.responseXML;
var itemsTag = XML.getElementsByTagName("items");
var items = itemsTag[0].getElementsByTagName("item");
this.itemCount = items.length;
for (var i = 0; i < this.itemCount; i++) {
var nd = items[i].getElementsByTagName("url")[0];
this.imageUrls[i] = nd.firstChild.nodeValue;
nd = items[i].getElementsByTagName("link")[0];
if (nd) this.linkArray[i] = nd.firstChild ? nd.firstChild.nodeValue:'';
nd = items[i].getElementsByTagName("title")[0];
if (nd) this.titlArray[i] = nd.firstChild ? nd.firstChild.nodeValue:'';
nd = items[i].getElementsByTagName("description")[0];
if (nd) this.descArray[i] = nd.firstChild ? nd.firstChild.nodeValue:'';
}
//prepare & preload
this.prepareAndPlay();
},
loadJson: function () {
var items = this.url.items;
this.itemCount = items.length;
for (var i = 0; i < this.itemCount; i++) {
var nd = items[i].url;
this.imageUrls[i] = nd;
nd = items[i].link;
this.linkArray[i] = nd ? nd:'';
nd = items[i].title;
this.titlArray[i] = nd ? nd:'';
nd = items[i].description;
this.descArray[i] = nd ? nd:'';
}
this.prepareAndPlay();
},
startSlide: function () {
if (!this.myTimer)
this.myTimer = setInterval(function(e) {
this.effectSlide(1);
}.bindAsEventListener(this), this.props.interval*1000);
},
stopSlide: function () {
if (this.myTimer) {
clearInterval(this.myTimer);
this.myTimer = 0;
}
},
nextSlide: function () {
this.stopSlide();
this.effectSlide(1);
if (this.props.autorun) this.startSlide();
},
prevSlide: function () {
this.stopSlide();
this.effectSlide(-1);
if (this.props.autorun) this.startSlide();
},
effectSlide: function (direction) {
if (direction>0 && !this.props.loop && this.idx==this.itemCount-1) {
this.stopSlide();
return;
}
if (direction<0 && !this.props.loop && this.idx==0) {
this.stopSlide();
return;
}
this.fadeOut(this.idx);
this.idx = this.idx + direction;
if (direction > 0) {
if (this.idx == this.itemCount) this.idx = 0;
} else if (direction < 0) {
if (this.idx < 0) this.idx = this.itemCount - 1;
}
this.fadeIn(this.idx);
},
fadeOut: function (lbl) {
if (!$("slitem-"+lbl)) return;
new Effect.Fade("slitem-"+lbl, { duration:this.props.duration, from:1.0, to:0.0 });
if (this.props.textId) {
if (this.props.textout=="fade")
new Effect.Fade("sltext-"+lbl, { duration:this.props.duration, from:1.0, to:0.0 });
else if (this.props.textout=="shrink")
new Effect.Shrink("sltext-"+lbl, { duration:this.props.duration });
else if (this.props.textout=="puff")
new Effect.Puff("sltext-"+lbl, { duration:this.props.duration });
else
new Effect.DropOut("sltext-"+lbl, { duration:this.props.duration * 0.8 });
}
},
fadeIn: function (lbl) {
this.createSlide(lbl);
new Effect.Appear("slitem-"+lbl, { duration:this.props.duration, from:0.0, to:1.0 });
if (this.props.textId) {
new Effect.Appear("sltext-"+lbl, { duration:this.props.duration, from:0.0, to:1.0 });
}
},
prepareAndPlay: function () {
this.baseDiv.setStyle({'position':'relative', 'overflow':'hidden'});
//preload images
for (var i=0; i < this.itemCount; i++) {
var img = new Image();
if (i==this.itemCount-1) {
Event.observe(img,'load',function() {
this.fadeIn(this.idx);
if (this.props.autorun) this.startSlide();
}.bindAsEventListener(this,img));
}
img.src = this.imageUrls[i];
}
},
createSlide: function (lbl) {
if ($("slitem-"+lbl))
this.baseDiv.removeChild($("slitem-"+lbl));
var imgObj = new Element('img');
var imgBox;
if (this.titlArray[lbl]) imgObj.alt = this.titlArray[lbl];
imgObj.setStyle({'border':'0'});
imgObj.src = this.imageUrls[lbl];
var pH = this.baseDiv.getHeight();
var pW = this.baseDiv.getWidth();
var iH = imgObj.height;
var iW = imgObj.width;
//Resize to fit
if (iH <= iW && iW > pW) { //landscape
var ratio = iH / iW;
imgObj.width = pW;
imgObj.height = pW * ratio;
} else if (iH > iW && iH > pH) { //portrait
var ratio = iW / iH;
imgObj.height = pH;
imgObj.width = pH * ratio;
}
var newH = imgObj.height;
var newW = imgObj.width;
if (this.linkArray[lbl]) {
var lnkObj = new Element('a', {
'id':'slitem-'+lbl, 'href':this.linkArray[lbl],
'target':this.props.linkTarget
});
lnkObj.setStyle({'position':'absolute','left':'0','top':'0'});
lnkObj.hide();
lnkObj.insert(imgObj);
this.baseDiv.insert(lnkObj);
imgBox = lnkObj;
} else {
imgObj.id = "slitem-" + lbl;
imgObj.setStyle({'position':'absolute','left':'0','top':'0'});
imgObj.hide();
this.baseDiv.insert(imgObj);
imgBox = imgObj;
}
//Centering image
if (newH > 0 && this.props.valign && newH < pH)
imgBox.setStyle({"top":parseInt((pH-newH)/2)+"px"}); //landscape
if (newW > 0 && this.props.halign && newW < pW)
imgBox.setStyle({"left":parseInt((pW-newW)/2)+"px"}); //portrait
if (this.props.textId) {
var base_txt = $(this.props.textId);
if ($("sltext-"+lbl))
base_txt.removeChild($("sltext-"+lbl));
var txtObj = new Element('span', {'id':'sltext-'+lbl});
txtObj.setStyle({'position':'absolute', 'width':base_txt.getWidth()+'px'});
txtObj.hide();
var texts = this.descArray[lbl]?this.descArray[lbl]:'';
if (this.props.paginate) texts = (lbl+1) + '/'+this.itemCount+': ' + texts;
txtObj.innerHTML = texts;
base_txt.appendChild(txtObj);
}
}
}//prototype