/* ------------------------------------------------------------------------
クロスフェードスライドショー（画像リンク、テキスト表示機能つき）
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）
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,
textout : "fade",
linkTarget : "_blank"
};
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.style.position = "relative";
this.baseDiv.style.overflow = "hidden";
//preload images
for (var i=0; i < this.itemCount; i++) {
var img = new Image();
if (i==0) {
img.onload = 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 = document.createElement('img');
if (this.titlArray[lbl]) imgObj.alt = this.titlArray[lbl];
imgObj.style["border"] = "0";
imgObj.src = this.imageUrls[lbl];
if (this.linkArray[lbl]) {
var lnkObj = document.createElement('a');
lnkObj.id = "slitem-" + lbl;
lnkObj.style["position"] = "absolute";
lnkObj.style["display"] = "none";
lnkObj.href = this.linkArray[lbl];
lnkObj.target = this.props.linkTarget;
lnkObj.appendChild(imgObj);
this.baseDiv.appendChild(lnkObj);
} else {
imgObj.id = "slitem-" + lbl;
imgObj.style["position"] = "absolute";
imgObj.style["display"] = "none";
this.baseDiv.appendChild(imgObj);
}
if (this.props.textId) {
var base_txt = $(this.props.textId);
if ($("sltext-"+lbl))
base_txt.removeChild($("sltext-"+lbl));
var txtObj = document.createElement('span');
txtObj.id = "sltext-" + lbl;
txtObj.style["position"] = "absolute";
txtObj.style["display"] = "none";
txtObj.style["width"] = base_txt.getWidth()+'px';
var texts = this.descArray[lbl]?this.descArray[lbl]:'';
if (this.props.paginate) texts = texts;
txtObj.innerHTML = texts;
base_txt.appendChild(txtObj);
}
}
}//prototype