https://zaq.ne.jp/vcms_js/vcms_thumbnail.js

1var vcms_Filter = {
2  defaultId : 'vcms_filter',
3  show: function(){
4		var grayElement = 'vcms_filter';
5		grayElement.style.backgroundColor = '#0000ff';
6		grayElement.style.zIndex = 1;
7		this.resetSize(grayElement);
8		if(this._hideOverElements) this.hideOverElements();
9		grayElement.style.display = '';
10		return grayElement;
11	},
12	hide: function(grayElement) {
13		grayElement = this.getElement(grayElement || this.defaultId);
14		grayElement.style.display = 'none';
15		if(this._hideOverElements) this.showOverElements();
16		return grayElement;
17	},
18	fadeIn: function(color, grayElement, fadeOptions){
19		grayElement = this.createElement(grayElement || this.defaultId);
20		if(color != undefined){
21			grayElement.style.backgroundColor = color;
22		}
23		grayElement.style.zIndex = 1;
24		this.resetSize(grayElement);
25		if(this._hideOverElements) this.hideOverElements();
26		fadeOptions = this.copyProperties({to: this.getOpacity(grayElement)}, fadeOptions || {});
27		new vcms_Filter.FadeIn(grayElement, fadeOptions).start();
28		return grayElement;
29	},
30	fadeOut: function(grayElement, fadeOptions) {
31		grayElement = this.getElement(grayElement || this.defaultId);
32		fadeOptions = this.copyProperties({from: this.getOpacity(grayElement)}, fadeOptions || {});
33		var fade = new vcms_Filter.FadeOut(grayElement, fadeOptions);
34		if(this._hideOverElements){
35			fade.end = function(){
36				vcms_Filter.showOverElements();
37				vcms_Filter.FadeOut.prototype.end.apply(this, arguments);
38			}
39		}
40		fade.start();
41		return grayElement;
42	},
43	showParallel: function(otherElements, grayElement) {
44		grayElement = this.createElement(grayElement || this.defaultId);
45		this.resetSize(grayElement);
46		if(this._hideOverElements) this.hideOverElements();
47		grayElement.style.display = '';
48		for(var i = 0; i < otherElements.length; i++){
49			otherElements[i] = this.getElement(otherElements[i]);
50			otherElements[i].style.display = '';
51		}
52		return grayElement;
53	},
54	hideParallel: function(otherElements, grayElement) {
55		grayElement = this.getElement(grayElement || this.defaultId);
56		grayElement.style.display = 'none';
57		if(this._hideOverElements) this.showOverElements();
58		for(var i = 0; i < otherElements.length; i++){
59			otherElements[i] = this.getElement(otherElements[i]);
60			otherElements[i].style.display = 'none';
61		}
62		return grayElement;
63	},
64	fadeInParallel: function(otherElements, grayElement, fadeOptions) {
65		grayElement = this.createElement(grayElement || this.defaultId);
66		this.resetSize(grayElement);
67		if(this._hideOverElements) this.hideOverElements();
68		fadeOptions = this.copyProperties({to: this.getOpacity(grayElement)}, fadeOptions || {});
69		var grayFade = new vcms_Filter.FadeIn(grayElement, fadeOptions);
70		var otherFades = [];
71		for(var i = 0; i < otherElements.length; i++){
72			otherElements[i] = this.getElement(otherElements[i]);
73			otherFades.push(new vcms_Filter.FadeIn(otherElements[i], {duration: fadeOptions.duration, to: this.getOpacity(otherElements[i])}));
74		}
75		grayFade.start(function(){ grayFade.update(); for(var i = 0; i < otherFades.length; i++){	otherFades[i].update(); }});
76		return grayElement;
77	},
78	fadeOutParallel: function(otherElements, grayElement, fadeOptions) {
79		grayElement = this.getElement(grayElement || this.defaultId);
80		fadeOptions = this.copyProperties({from: this.getOpacity(grayElement)}, fadeOptions || {});
81		var grayFade = new vcms_Filter.FadeOut(grayElement, fadeOptions);
82		if(this._hideOverElements){
83			grayFade.end = function(){
84				vcms_Filter.showOverElements();
85				vcms_Filter.FadeOut.prototype.end.apply(this, arguments);
86			}
87		}
88		var otherFades = [];
89		for(var i = 0; i < otherElements.length; i++){
90			otherElements[i] = this.getElement(otherElements[i]);
91			otherFades.push(new vcms_Filter.FadeOut(otherElements[i], {duration: fadeOptions.duration, from: this.getOpacity(otherElements[i])}));
92		}
93		grayFade.start(function(){ grayFade.update(); for(var i = 0; i < otherFades.length; i++){ otherFades[i].update(); }});
94		return grayElement;
95	},
96		resetSize: function(element) {
97		var position = this._getStyle(element, 'position');
98		if(position != 'fixed'){
99			var page = this.getPageSize();
100			element.style.width  = page.width + 'px';
101			element.style.height = page.height + 'px';
102		}
103	},
104	getElement: function(element) {
105		if(typeof element == 'string'){
106			element = document.getElementById(element);
107  	}
108  	return element;
109	},
110	createElement: function(element) {
111		var id = element;
112		element = this.getElement(element);
113		if(!element){
114			element = document.createElement('div');

115			element.id = id;
116			element.style.display = 'none';
117			document.body.appendChild(element);
118		}
119		return element;
120  },
121	copyProperties: function(dest, src) {
122		for(var property in src){
123			dest[property] = src[property];
124		}
125		return dest;
126	},
127	isIE : (/MSIE/.test(navigator.userAgent) && !window.opera),
128	isWebKit : (navigator.userAgent.indexOf('AppleWebKit') != -1),
129	getWindowSize: function() {
130		var width;
131		var height;
132		if(document.compatMode == 'CSS1Compat' && !window.opera){
133			width  = document.documentElement.clientWidth;
134			height = document.documentElement.clientHeight;
135		}
136		else if(navigator.userAgent.indexOf('AppleWebKit') != -1){
137			width  = window.innerWidth;
138			height = window.innerHeight;
139		}
140		else{
141			width  = document.body.clientWidth;
142			height = document.body.clientHeight;
143		}
144		return {width: width, height: height};
145	},
146	getPageSize: function() {
147		var windowSize = this.getWindowSize();
148		var width  = windowSize.width;
149		var height = windowSize.height;
150		if(document.compatMode == 'CSS1Compat'){
151			if(document.documentElement.scrollWidth > width){
152				width  = document.documentElement.scrollWidth;
153			}
154			if(document.documentElement.scrollHeight > height){
155				height = document.documentElement.scrollHeight;
156			}
157		}
158		else{
159			if(document.body.scrollWidth > width){
160				width  = document.body.scrollWidth;
161			}
162			if(document.body.scrollHeight > height){
163				height = document.body.scrollHeight;
164			}
165		}
166		return {width: width, height: height};
167	},
168	getOpacity: function(element) {
169		var value = this._getStyle(element, 'opacity');
170		if(value)	return parseFloat(value);
171		if(value = (element.style.filter || '').match(/alpha\(opacity=(.*)\)/)){
172			if(value[1])	return parseFloat(value[1]) / 100;
173		}
174		return 1.0;
175	},
176	_getStyle: function(element, style){
177		var value = element.style[style];
178		if(value)	return value;
179		if(document.defaultView && document.defaultView.getComputedStyle){
180			var oldDisplay = element.style.display;
181			if(vcms_Filter.isWebKit)	element.style.display = 'block';
182			var css = document.defaultView.getComputedStyle(element, null);
183			if(css)	value = css.getPropertyValue(style);
184			if(vcms_Filter.isWebKit)	element.style.display = oldDisplay;
185			return value;
186		}
187		else if(element.currentStyle){
188			return element.currentStyle[style];
189		}
190		return null;
191	},
192	_hideOverElements: false /*@cc_on || @_jscript_version < 5.7 @*/,
193	overElementTagNames: ['select', 'object', 'embed'],
194	hideOverElements: function() {
195		for(var i = 0, len1 = vcms_Filter.overElementTagNames.length; i < len1; i++){
196			var elements = document.getElementsByTagName(vcms_Filter.overElementTagNames[i]);
197				for(var j = 0, len2 = elements.length; j < len2; j++){
198					elements[j].style.visibility = 'hidden';
199				}
200		}
201	},
202	showOverElements: function() {
203		for(var i = 0, len1 = vcms_Filter.overElementTagNames.length; i < len1; i++){
204			var elements = document.getElementsByTagName(vcms_Filter.overElementTagNames[i]);
205			for(var j = 0, len2 = elements.length; j < len2; j++){
206				elements[j].style.visibility = '';
207			}
208		}
209	}
210};
211
212vcms_Filter.Fade = function(element, options) {
213  this.setup(element, options);
214};
215vcms_Filter.Fade.prototype = {
216	intervalTime: 10,
217	duration: 200,
218	setup: function(element, options){
219		this.element = element;
220		this.style = this.element.style;
221		options = options || {};
222		if(options.duration != undefined)	this.duration = options.duration;
223		if(options.from != undefined)			this.from = options.from;
224		if(options.to != undefined)				this.to = options.to;
225		if(options.callback != undefined)	this.callback = options.callback;
226		this.startTime = new Date().getTime();
227		this.endTime = this.startTime + this.duration;
228		this.range = this.to - this.from;
229		if(vcms_Filter.isIE && (!this.element.currentStyle.hasLayout)){
230			this.style['zoom'] = 1;
231		}
232		this.first = true;
233	},
234	start: function(updater){
235		var self = this;
236		updater = updater || function(){ self.update(); };
237		this.intervalId = setInterval(updater, this.intervalTime);
238	},
239	end: function(){
240		if(this.intervalId != null){
241			clearInterval(this.intervalId);
242			this.intervalId = null;
243		}
244		this.execCallback();
245	},
246	execCallback: function(){
247		if(!this.callback)	return;
248		if(typeof this.callback == 'function'){
249			this.callback();
250		}
251		else{
252			for(var i = 0; i < this.callback.length; i++){
253				this.callback[i]();
254			}
255		}
256	},
257	update: function(){
258		var nowTime = new Date().getTime();
259		if(this.first){
260			this.style.display = '';
261			this.first = false;

262		}
263		if(nowTime >= this.endTime){
264			this.setOpacity(this.to);
265			this.end();
266		}
267		else{
268			this.setOpacity(this.from + (this.range * (nowTime - this.startTime) / this.duration));
269		}
270	},
271	setOpacity: function(opacity) {
272		this.style.opacity = opacity;
273		if(vcms_Filter.isIE)	this.style.filter = 'alpha(opacity=' + (opacity * 100) + ')';
274	}
275};
276vcms_Filter.FadeIn = function(){
277	vcms_Filter.Fade.apply(this, arguments);
278};
279vcms_Filter.copyProperties(vcms_Filter.FadeIn.prototype, vcms_Filter.Fade.prototype);
280vcms_Filter.FadeIn.prototype.from = 0.0;
281vcms_Filter.FadeIn.prototype.to = 1.0;
282vcms_Filter.FadeOut = function(){
283	vcms_Filter.Fade.apply(this, arguments);
284};
285vcms_Filter.copyProperties(vcms_Filter.FadeOut.prototype, vcms_Filter.Fade.prototype);
286vcms_Filter.FadeOut.prototype.from = 1.0;
287vcms_Filter.FadeOut.prototype.to = 0.0;
288vcms_Filter.FadeOut.prototype.end = function(){
289	this.style.display = 'none';
290	this.setOpacity(this.from);
291	vcms_Filter.Fade.prototype.end.apply(this, arguments);
292};
293var vcms_thumbnailProc={
294	scrollbarwidth: 16,
295	opacitystring: 'filter:progid:DXImageTransform.Microsoft.alpha(opacity=10); -moz-opacity: 0.1; opacity: 0.1',
296	targetlinks:[],
297	create_vcms_thumbnailPanel:function(){

298		document.write('<div id="vcms_thumbnailPanel"><div id="vcms_thumbnailIMG"></div><div class="vcms_thumbfooter"><input type="button" value="CLOSE" class="vcms_thumbnailX" onclick="vcms_thumbnailProc.closePanel()" /></div></div>');
299		document.write('<div id="vcms_thumbnailLoading">Now loading...</div>');
300		this.vcms_thumbnailPanel   = document.getElementById("vcms_thumbnailPanel");
301		this.vcms_thumbnailIMG     = document.getElementById("vcms_thumbnailIMG");
302		this.vcms_thumbnailLoading = document.getElementById("vcms_thumbnailLoading");
303		this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body;
304	},
305	centeringObj:function(obj){
306		var isIE = document.all && !window.opera;
307		var scroll_top  = (isIE) ? this.standardbody.scrollTop  : window.pageYOffset;
308		var scroll_left = (isIE) ? this.standardbody.scrollLeft : window.pageXOffset;
309		var docwidth  = (isIE) ? this.standardbody.clientWidth  : window.innerWidth-this.scrollbarwidth;
310		var docheight = (isIE) ? this.standardbody.clientHeight : window.innerHeight;
311		var docheightcomplete = (this.standardbody.offsetHeight>this.standardbody.scrollHeight) ? this.standardbody.offsetHeight : this.standardbody.scrollHeight;
312		var objwidth  = obj.offsetWidth;
313		var objheight = obj.offsetHeight;
314		var topposition = (docheight>objheight) ? scroll_top+docheight/2-objheight/2+"px" : scroll_top+10+"px";
315		obj.style.left = docwidth/2-objwidth/2+"px";
316		obj.style.top  = Math.floor(parseInt(topposition))+"px";
317		obj.style.visibility = "visible";
318	},
319	show_vcms_thumbnailPanel:function(){
320		this.centeringObj(this.vcms_thumbnailPanel);
321		this.currentopacity = 0.1;
322		this.opacitytimer = setInterval("vcms_thumbnailProc.opacityProc()", 12);
323	},
324	vcms_loading:function(link){
325		if(this.vcms_thumbnailPanel.style.visibility=="visible")	this.closePanel();
326		var imageHTML='<img src="'+link.getAttribute("href")+'" style="'+this.opacitystring+'" />';
327		if(link.getAttribute("title")){
328			var relA = link.getAttribute("rel").split(",");
329			imageHTML += '<div class="vcms_thumbtitle" style="width:'+relA[1]+'px;">'+link.getAttribute("title")+'</div>';
330		}
331		this.centeringObj(this.vcms_thumbnailLoading);
332		this.vcms_thumbnailIMG.innerHTML = imageHTML;
333		this.featureImage=this.vcms_thumbnailIMG.getElementsByTagName("img")[0];
334		this.featureImage.onload=function(){
335			vcms_thumbnailProc.vcms_thumbnailLoading.style.visibility="hidden";
336			vcms_thumbnailProc.show_vcms_thumbnailPanel();
337		}
338		if(document.all && !window.createPopup)	this.featureImage.src=link.getAttribute("href");
339		this.featureImage.onerror=function(){
340			vcms_thumbnailProc.vcms_thumbnailLoading.style.visibility="hidden";
341		}
342	},
343	setimgopacity:function(value){
344		var targetobject=this.featureImage
345		if(targetobject.filters && targetobject.filters[0]){
346			if(typeof targetobject.filters[0].opacity=="number")	targetobject.filters[0].opacity=value*100;
347			else	targetobject.style.filter="alpha(opacity="+value*100+")";
348		}
349		else if(typeof targetobject.style.MozOpacity!="undefined")	targetobject.style.MozOpacity=value;
350		else if (typeof targetobject.style.opacity!="undefined")	targetobject.style.opacity=value;
351		else	this.vcms_stopAnim();
352	},
353	opacityProc:function(){
354		this.setimgopacity(this.currentopacity);
355		this.currentopacity+=0.1;
356		if(this.currentopacity>1)	this.vcms_stopAnim();
357	},
358	vcms_stopAnim:function(){
359		if(typeof this.opacitytimer!="undefined")	clearInterval(this.opacitytimer);
360	},
361	closePanel:function(){
362		this.vcms_stopAnim();
363		this.vcms_thumbnailPanel.style.visibility="hidden";
364		this.vcms_thumbnailIMG.innerHTML="";
365		this.vcms_thumbnailPanel.style.left="-3000px";
366		this.vcms_thumbnailPanel.style.top="-3000px";
367//	vcms_Filter.hide();
368		vcms_Filter.fadeOut();
369	},
370	cleanup:function(){
371		this.vcms_thumbnailLoading=null;
372		if(this.featureImage) this.featureImage.onload=null;
373		this.featureImage=null;
374		this.vcms_thumbnailIMG=null;
375		for(var i=0; i<this.targetlinks.length; i++)	this.targetlinks[i].onclick=null;
376		this.vcms_thumbnailPanel=null;
377	},
378	dotask:function(target, functionref, tasktype){
379		var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
380		if(target.addEventListener)	target.addEventListener(tasktype, functionref, false);
381		else if(target.attachEvent)	target.attachEvent(tasktype, functionref);
382	},
383	vcms_init:function(){
384		var thumbnailA = document.getElementsByTagName("a");
385		for(var i=0; i<thumbnailA.length; i++){
386			if(thumbnailA[i].getAttribute("rel") && thumbnailA[i].getAttribute("rel").match(/^vcms_thumbnail/)){
387				var relA = thumbnailA[i].getAttribute("rel").split(",");
388				thumbnailA[i].onclick=function(){
389					vcms_thumbnailProc.vcms_stopAnim();
390					vcms_thumbnailProc.vcms_loading(this);
391//					vcms_Filter.show();
392						vcms_Filter.fadeIn(relA[3]);
393					return false;

394				}
395					this.targetlinks.push(thumbnailA[i]);
396			}
397		}
398		this.dotask(window, function(){if (vcms_thumbnailProc.vcms_thumbnailPanel.style.visibility=="visible") vcms_thumbnailProc.centeringObj(vcms_thumbnailProc.vcms_thumbnailPanel)}, "resize");
399	}
400}
401vcms_thumbnailProc.create_vcms_thumbnailPanel();
402vcms_thumbnailProc.dotask(window, function(){vcms_thumbnailProc.vcms_init()}, "load");
403vcms_thumbnailProc.dotask(window, function(){vcms_thumbnailProc.cleanup()}, "unload");
404var vcms_thisobj0;
405var vcms_thisobj;
406var vcms_offsetX;
407var vcms_offsetY;
408onload=function (){
409	if(document.all){
410		vcms_thisobj0 = document.all.vcms_thumbnailPanel
411		document.all.vcms_thumbnailIMG.onmousedown = onMouseDown;
412	}
413	else if(document.getElementById){
414		vcms_thisobj0 = document.getElementById("vcms_thumbnailPanel");
415		document.getElementById("vcms_thumbnailIMG").onmousedown = onMouseDown;
416	}
417   document.onmousemove = onMouseMove;
418   document.onmouseup = onMouseUp;
419}
420function onMouseDown(e){
421   vcms_thisobj = vcms_thisobj0;
422   if (document.all) {
423      vcms_offsetX = event.offsetX + 2;
424      vcms_offsetY = event.offsetY + 2;
425   } else if (document.getElementsByTagName) {
426      vcms_offsetX = e.pageX - parseInt(vcms_thisobj.style.left);
427      vcms_offsetY = e.pageY - parseInt(vcms_thisobj.style.top);
428   }
429   return false;
430}
431function onMouseMove(e){
432	if(!vcms_thisobj){
433		return true;
434	}
435	if(document.all){
436		var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
437		var scrollTop  = document.body.scrollTop  || document.documentElement.scrollTop;
438		vcms_thisobj.style.pixelLeft = event.clientX - vcms_offsetX + scrollLeft;
439		vcms_thisobj.style.pixelTop  = event.clientY - vcms_offsetY + scrollTop;
440	}else if(document.getElementsByTagName){
441		vcms_thisobj.style.left = (e.pageX - vcms_offsetX)+"px";
442		vcms_thisobj.style.top  = (e.pageY - vcms_offsetY)+"px";
443	}
444	return false;
445}
446function onMouseUp(e){
447	vcms_thisobj = null;
448}