/* ------------------------------------------------------------------------
クロスフェードスライドショー（テキスト表示機能つき）
【使用方法】（なるべくタグ内にて）
【パラメータの説明】
第1パラメータはXMLの場所を指定します（JSON指定も可、サンプルを参照）
第2パラメータは以下の情報を任意に指定します（上記書式を参考に）
imageId: スライドショーを表示するブロックのID
textId: XMLテキストを表示する際のテキストブロックのID
テキストブロック自体はスクリプト内でこのIDを使い作成され、
CSSでデザインする場合に使用します。
（指定しない、または空の場合はテキストを表示しません）
loop: trueは繰返し再生します、falseは最後の画像で停止します
autorun: ページ表示直後に自動再生させない場合はfalseを指定します
interval: 画像表示時間を秒で指定（フェード中も含まれる）
duration: フェードの時間を秒で指定（画像の切替え時間）
【XMLの説明】
-
タイトルはイメージのaltに適用
画像URL:相対パスの場合HTMLから/01.jpg
画像クリックでジャンプさせる場合のURL
説明文:HTMLタグはエスケープします
------------------------------------------------------------------------ */
var SlideShow = Class.create();
SlideShow.prototype = {
initialize: function(loc,option) {
this.url = loc;
this.props = {
imageId : "image-container",
textId : "",
loop : true,
autorun : true,
interval : 4,
duration : 1
}
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();
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.prepareElements();
//first image
this.fadeIn(this.idx);
if (this.props.autorun) this.startSlide();
},
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.prepareElements();
this.fadeIn(this.idx);
if (this.props.autorun) this.startSlide();
},
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);
},
prevSlide: function () {
this.stopSlide();
this.effectSlide(-1);
},
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) {
Effect.Fade("slitem-"+lbl, { duration:this.props.duration, from:1.0, to:0.0 });
if (this.props.textId) {
Effect.DropOut("sltext-"+lbl, { duration:this.props.duration * 0.8 });
}
},
fadeIn: function (lbl) {
Effect.Appear("slitem-"+lbl, { duration:this.props.duration, from:0.0, to:1.0 });
if (this.props.textId) {
Effect.Appear("sltext-"+lbl, { duration:this.props.duration, from:0.0, to:1.0 });
}
},
prepareElements: function () {
var base_img = document.createElement('div');
base_img.id = "slide-base";
base_img.style["position"] = "relative";
$(this.props.imageId).appendChild(base_img);
for (var i=0; i < this.itemCount; i++) {
var image_elm = document.createElement('img');
image_elm.id = "slitem-" + i;
if (this.titlArray[i]) image_elm.alt = this.titlArray[i];
image_elm.style["position"] = "absolute";
image_elm.style["top"] = "0";
image_elm.style["left"] = "0";
image_elm.style["display"] = "none";
image_elm.src = this.imageUrls[i];
if (this.linkArray[i]) {
image_elm.style["cursor"] = "pointer";
image_elm.onclick = function(e,href) {
window.location = href;
}.bindAsEventListener(this,this.linkArray[i]);
}
base_img.appendChild(image_elm);
}
if (this.props.textId) {
var base_txt = document.createElement('div');
base_txt.id = this.props.textId;
base_txt.style["position"] = "absolute";
base_img.appendChild(base_txt);
for (var i=0; i < this.itemCount; i++) {
var text_elm = document.createElement('div');
text_elm.id = "sltext-" + i;
text_elm.style["position"] = "absolute";
text_elm.style["top"] = "0";
text_elm.style["left"] = "0";
text_elm.style["display"] = "none";
text_elm.innerHTML = this.descArray[i];
base_txt.appendChild(text_elm);
}
}
}
}//prototype