/*
* Androidでposition:fixedを利用する場合は、が必要
* ただし、user-scalable=noとposition: fixedを使用すると、-webkit-transformが動かなくなる
* version 1.0.5
*/
function Gallery() {
this.initialize.apply(this, arguments);
}
Gallery.prototype = {
initialize:function(propertyList) {
this._isSupportPositionFixed = this._isSupportPositionFixed();
this._imageList = new Array();
this._property = {
'Id': 'gallerry' //ポップアップのID
,'TargetClass': 'img_link' //ポップアップ化するaタグに付加したクラス
,'MaskAlplha': 50 //ポップアップ時マスクアルファ値
,'FadeCount': 10 //フェード処理分割回数
,'FadeRefreshTime': 50 //フェード処理更新間隔
,'IsNextBack': true //Next/Backを利用するかどうか
,'Text': {
'Next': '次へ'
,'Back': '前へ'
,'Close': '閉じる'
}
};
var targetExtList = ['.jpg', '.png', '.gif'];
this._doFade = false;
this._nextBt = null;
this._backBt = null;
for(key in propertyList) {
this._property[key] = propertyList[key];
}
var aTagList = document.getElementsByTagName('a');
if(aTagList.length > 0) {
for(var i=0; i < aTagList.length; i++) {
if(aTagList[i].className != ''
&& aTagList[i].className.indexOf(this._property['TargetClass']) >= 0) {
var classNameList = aTagList[i].className
.replace(/(?:^[\x09\x0A\x0C\x0D\x20]+)|(?:[\x09\x0A\x0C\x0D\x20]+$)/g, "")
.split(/[\x09\x0A\x0C\x0D\x20]+/);
for(var j=0; j < classNameList.length; j++) {
if(classNameList[j] == this._property['TargetClass']) {
var src = aTagList[i].getAttribute('href');
if(src && src != "") {
var isTarget = false;
for(var k=0; k= 1) {
isTarget = true;
break;
}
}
if(isTarget) {
aTagList[i].myObj = this;
aTagList[i].removeAttribute('target');
aTagList[i].setAttribute('Index', this._imageList.length);
aTagList[i].onclick = function() {
this.myObj.onPopup(this.getAttribute('Index'));
return false;
};
this._imageList.push(src);
break;
}
}
}
}
}
}
} else {
return;
}
window.myObj = this;
window.onresize=function() {
this.myObj._setPos();
};
document.write('');
document.write('');
this._bg = document.getElementById(this._property['Id']+'Bg');
if(this._isSupportPositionFixed) {
this._bg.style.position = 'fixed';
} else {
this._bg.style.position = 'absolute';
window.onscroll=function() {
this.myObj._setPos();
};
}
this._bg.style.display='none';
this._bg.style.visibility='hidden';
this._bg.myObj = this;
this._bg.onclick = function() {
this.myObj.closePopup();
return false;
};
this._popup = document.getElementById(this._property['Id']);
if(this._isSupportPositionFixed) {
this._popup.style.position = 'fixed';
} else {
this._popup.style.position = 'absolute';
window.onscroll=function() {
this.myObj._setPos();
};
}
this._popup.style.display='none';
this._popup.style.visibility='hidden';
this._imgAreaSrc = '';
this._imgArea = document.createElement('img');
this._imgArea.myObj = this;
this._imgArea.onclick = function() {
this.myObj.closePopup();
return false;
};
var obj1 = document.createElement('div');
this._closeBtArea = obj1;
obj1.id = this._property['Id']+'CloseBtArea';
obj1.setAttribute('class', 'CloseBtArea');
obj1.setAttribute('className', 'CloseBtArea'); //IE
var obj2 = document.createElement('a');
obj2.myObj = this;
obj2.onclick = function() {
this.myObj.closePopup();
return false;
};
obj2.href = 'javascript:void(0);';
var obj3 = document.createElement('span');
obj3.id = this._property['Id']+'CloseBt';
obj3.appendChild(document.createTextNode(this._property['Text']['Close']));
obj3.setAttribute('class', 'CloseBt');
obj3.setAttribute('className', 'CloseBt'); //IE
obj2.appendChild(obj3);
obj1.appendChild(obj2);
this._popup.appendChild(obj1);
var obj4 = document.createElement('div');
obj4.appendChild(this._imgArea);
obj4.id = this._property['Id']+'ImageArea';
obj4.setAttribute('class', 'ImageArea');
obj4.setAttribute('className', 'ImageArea'); //IE
this._popup.appendChild(obj4);
if(this._property['IsNextBack']) {
this._nowImgId = null;
this._nextBt = document.createElement('div');
this._nextBt.id = this._property['Id']+'NextBtArea';
this._nextBt.setAttribute('class', 'NextBtArea');
this._nextBt.setAttribute('className', 'NextBtArea'); //IE
var nextLinkObj = document.createElement('a');
nextLinkObj.myObj = this;
nextLinkObj.onclick = function() {
this.myObj.next();
return false;
};
nextLinkObj.href = 'javascript:void(0);';
var spanObj = document.createElement('span');
spanObj.id = this.id+'NextBt';
spanObj.appendChild(document.createTextNode(this._property['Text']['Next']));
spanObj.setAttribute('class', 'NextBt');
spanObj.setAttribute('className', 'NextBt'); //IE
nextLinkObj.appendChild(spanObj);
this._nextBt.appendChild(nextLinkObj);
this._popup.appendChild(this._nextBt);
this._nextBt.style.display='none';
this._backBt = document.createElement('div');
this._backBt.id = this._property['Id']+'BackBtArea';
this._backBt.setAttribute('class', 'BackBtArea');
this._backBt.setAttribute('className', 'BackBtArea'); //IE
var backLinkObj = document.createElement('a');
backLinkObj.myObj = this;
backLinkObj.onclick = function() {
this.myObj.back();
return false;
};
backLinkObj.href = 'javascript:void(0);';
var spanObj = document.createElement('span');
spanObj.id = this.id+'BackBt';
spanObj.appendChild(document.createTextNode(this._property['Text']['Back']));
spanObj.setAttribute('class', 'BackBt');
spanObj.setAttribute('className', 'BackBt'); //IE
backLinkObj.appendChild(spanObj);
this._backBt.appendChild(backLinkObj);
this._popup.appendChild(this._backBt);
this._backBt.style.display='none';
}
}
,_setPos:function() {
var width = 0;
var height = 0;
var scroll = 0;
if(document.documentElement.clientWidth) {
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
} else if(document.body.clientWidth){
width = document.body.clientWidth;
height = document.body.clientHeight;
} else {
width = window.innerWidth;
height = window.innerHeight;
}
if(!this._isSupportPositionFixed) {
scroll = (document.body.scrollTop || document.documentElement.scrollTop);
}
var maxHeight = height;
if (typeof document.documentElement.style.msInterpolationMode != 'undefined') {
//IE7
if(document.documentElement.clientHeight && document.documentElement.clientHeight > maxHeight) {
maxHeight = document.documentElement.clientHeight;
}
if(document.body.clientHeight && document.body.clientHeight > maxHeight) {
maxHeight = document.body.clientHeight;
}
if(window.innerWidth && window.innerWidth > maxHeight) {
maxHeight = window.innerWidth;
}
maxHeight -= scroll;
}
this._bg.style.width=width+'px';
if(maxHeight >= 0) {
this._bg.style.height=maxHeight+'px';
}
this._bg.style.left = '0px';
this._bg.style.top = scroll+'px';
if(this._popup.offsetWidth > width) {
this._popup.style.left = '0px';
} else {
this._popup.style.left = ((width-this._popup.offsetWidth)/2)+'px';
}
if(this._popup.offsetHeight > height) {
this._popup.style.top = scroll+'px';
} else {
this._popup.style.top = scroll+((height-this._popup.offsetHeight)/2)+'px';
}
}
,onPopup:function(imageId) {
if(this._doFade) {
return;
}
this._doFade = true;
this._nowImgId = imageId;
if(!this._isSupportPositionFixed) {
window.onscroll=function() {
this.myObj._setPos();
};
}
window.onresize=function() {
this.myObj._setPos();
};
this._popup.style.zIndex = 100;
this._popup.style.filter = 'alpha(opacity=0)';
this._popup.style.opacity = 0;
//消す
this._bg.style.zIndex = 50;
this._bg.style.filter = 'alpha(opacity=0)';
this._bg.style.opacity = 0;
this._popup.style.visibility='hidden';
this._popup.style.display='';
this._bg.style.visibility='hidden';
this._bg.style.display='';
this._setPos();
var myObj = this;
this._nowImgSet(
function() {
myObj._fadeIn(myObj._bg, myObj._property['MaskAlplha'], 0, function() {
myObj._doFade = false;
});
myObj._fadeIn(myObj._popup, 100, 0, null);
myObj._setPos();
myObj._setNextBackBt();
}
);
}
,closePopup:function() {
if(this._doFade) {
return;
}
this._doFade = true;
window.onscroll=null;
window.onresize=null;
var myObj = this;
this._fadeOut(this._popup, 0, 100, 100, function() {myObj._doFade = false;});
this._fadeOut(this._bg, 0, this._property['MaskAlplha'], this._property['MaskAlplha'], null);
}
,next:function() {
if(this._doFade) {
return;
}
this._doFade = true;
this._nowImgId++;
if(this._nowImgId >= this._imageList.length) {
this._nowImgId = 0;
}
var myObj = this;
if(this._property['IsNextBack']) {
myObj._backBt.style.display='none';
myObj._nextBt.style.display='none';
}
myObj._closeBtArea.style.display='none';
this._fadeOut(this._imgArea, 0, 100, 100,
function() {
myObj._nowImgSet(
function() {
myObj._fadeIn(myObj._imgArea, 100, 0, function() {myObj._doFade = false;});
myObj._setPos();
myObj._setNextBackBt();
}
);
}
);
}
,back:function() {
if(this._doFade) {
return;
}
this._doFade = true;
this._nowImgId--;
if(this._nowImgId < 0) {
this._nowImgId = this._imageList.length-1;
}
var myObj = this;
if(this._property['IsNextBack']) {
myObj._backBt.style.display='none';
myObj._nextBt.style.display='none';
}
myObj._closeBtArea.style.display='none';
this._fadeOut(this._imgArea, 0, 100, 100,
function() {
myObj._nowImgSet(
function() {
myObj._fadeIn(myObj._imgArea, 100, 0, function() {myObj._doFade = false;});
myObj._setPos();
myObj._setNextBackBt();
}
);
}
);
}
,_fadeIn:function (obj, max, now, callback) {
obj.style.display='';
obj.style.visibility='visible';
if(max > now) {
var next = now + (max / this._property['FadeCount']);
obj.style.filter = 'alpha(opacity=' + next + ')';
obj.style.opacity = next/100;
var myObj = this;
setTimeout(
function() {
myObj._fadeIn(obj, max, next, callback);
}
, this._property['FadeRefreshTime']);
} else {
obj.style.filter = 'alpha(opacity=' + max + ')';
obj.style.opacity = max/100;
if(callback) {
callback();
}
}
}
,_fadeOut:function(obj, min, start, now, callback) {
if(min < now) {
var next = now - ((start-min) / this._property['FadeCount']);
obj.style.filter = 'alpha(opacity=' + next + ')';
obj.style.opacity = next/100;
var myObj = this;
setTimeout(
function() {
myObj._fadeOut(obj, min, start, next, callback);
}
, this._property['FadeRefreshTime']);
} else {
obj.style.filter = 'alpha(opacity=' + min + ')';
obj.style.opacity = min/100;
if(min <= 0) {
obj.style.display='none';
obj.style.visibility='hidden';
}
if(callback) {
callback();
}
}
}
,_setNextBackBt:function() {
if(this._property['IsNextBack']) {
this._nextBt.style.display='none';
this._backBt.style.display='none';
if(this._nowImgId < this._imageList.length-1) {
this._nextBt.style.display='';
}
if(this._nowImgId > 0) {
this._backBt.style.display='';
}
}
this._closeBtArea.style.display='';
}
,_nowImgSet:function(callback) {
if(this._imgAreaSrc == this._imageList[this._nowImgId]) {
if(callback) {
callback();
} else {
this._setNextBackBt();
}
} else {
if(callback) {
this._imgArea.onload = callback;
} else {
this._imgArea.onload = function() {};
this._setNextBackBt();
}
this._imgArea.src = this._imageList[this._nowImgId];
this._imgAreaSrc = this._imageList[this._nowImgId];
}
}
,_isSupportPositionFixed:function() {
var isSupport = false;
var obj = document.createElement('div');
if(obj.getBoundingClientRect) {
obj.style.top = '50px';
obj.style.position = 'fixed';
obj.appendChild(document.createTextNode('Check'));
var body = document.body;
body.appendChild(obj);
var scrollObj = (document.body || document.documentElement);
var backupScroll = body.scrollTop;
var backupHeight = body.style.height;
var backup1 = {
'border':document.body.style.border
,'margin':document.body.style.margin
,'padding':document.body.style.padding
};
var backup2 = {
'border':document.documentElement.style.border
,'margin':document.documentElement.style.margin
,'padding':document.documentElement.style.padding
};
var oldTop = Math.ceil(obj.getBoundingClientRect().top);
body.scrollTop = 150;
body.style.height = '2000px';
document.body.style.border = '0px';
document.body.style.margin = '0px';
document.body.style.padding = '0px';
document.documentElement.style.border = '0px';
document.documentElement.style.margin = '0px';
document.documentElement.style.padding = '0px';
var top = obj.getBoundingClientRect().top;
isSupport = ((top-oldTop) == 0);
body.removeChild(obj);
scrollObj.scrollTop = backupScroll;
body.style.height = backupHeight;
document.body.style.border = backup1['border'];
document.body.style.margin = backup1['margin'];
document.body.style.padding = backup1['padding'];
document.documentElement.style.border = backup2['border'];
document.documentElement.style.margin = backup2['margin'];
document.documentElement.style.padding = backup2['padding'];
}
return isSupport;
}
};