https://www.san-ai-clinic.jp/slide/js/rs_thumbnail.js

1/*!
2 * JavaScript ライブラリ「スライド野郎」 (JavaScript Library "Slide-Yaro")
3 * サムネール表示クラス (Displaying Thumbnails Class) Ver.1.0.0
4 * http://www.root-sea.co.jp/service/slide_lp/
5 * 
6 * Copyright 2012, Root-Sea, Inc.
7 * Released under the MIT License.
8 * http://www.opensource.org/licenses/mit-license.php
9 * 
10 * Uses jquery.js
11 * http://jquery.org/license
12 */
13function RSThumbnail(id,w,h,interval,fade){this.current=1;this.id=id;this.top=0;this.left=0;this.width=w;this.height=h;this.aw=[];this.ah=[];this.type="horizontal";this.area=makeRectangle(this.id,0,0,0,0,"#FFFFFF",100);if(this.area){with(this.area.style){position="absolute";overflow="visible";visibility="hidden"}}this.loadarea=makeRectangle(this.id+"loadarea",0,0,0,0,"#FFFFFF",100);if(this.loadarea){with(this.loadarea.style){visibility="hidden"}}this.timerChange;this.loaded=0;this.objTime={interval:interval*1000,fade:fade*1000};this.aInfo=[];this.timerID=undefined;this.margin=1;this.align="left";this.valign="top";this.top=0;this.left=0;this.bgColor="#FFFFFF";this.bgAlpha=50;this.bgImage="";this.isReverse=false;this.selected="";this.parent=undefined;this.setParent=function(parent){this.parent=parent};this.addFile=function(file1,file2){this.aInfo.push({thumb:file1,thumb_on:file2})};var _this=this;this.start=function(){var my=$("#"+id).css({padding:0,zIndex:1,top:this.top,left

13:this.left});for(var i=0;i<this.aInfo.length;i++){var thmb=new Image();thmb.id=i;$(thmb).css("visibility","hidden");this.loadarea.appendChild(thmb);thmb.onload=loadedThumbnail;thmb.src=this.aInfo[i]["thumb"];var thmb_o=new Image();thmb_o.id=i;$(thmb_o).css("visibility","hidden");this.loadarea.appendChild(thmb_o);thmb_o.onload=loadedThumbnail;thmb_o.src=this.aInfo[i]["thumb_on"]}};loadedThumbnail=function(){_this.th_w=this.width;_this.th_h=this.height;_this.aw[this.id]=this.width;_this.ah[this.id]=this.height;_this.loadarea.removeChild(this);_this.loadCheck()};this.loadCheck=function(){this.loaded++;if(this.loaded==this.aInfo.length*2){setTimeout(function(){_this.makeUI();_this.parent.showExtra();_this.switchButton(1)},50)}};this.makeUI=function(){var w=this.width;var h=this.height;var x=this.left;var y=this.top;var bg=makeRectangle(this.id+"_bg",0,0,w,h,this.bgColor,this.bgAlpha,"absolute");if(this.bgImage!=""){$(bg).css("background","url('"+this.bgImage+"')")}bg.style.overflow="hidden";this.area.appendChild(bg);bg.style.zIndex=this.aInfo.length+1;if(this.type=="horizontal"){this.makeUIH()}else{this.makeUIV()}};this.makeUIH=function(){var w=this.width;var h=this.height;var x=0;var total_w=0;for(var i=0;i<this.aw.length;i++){total_w+=this.aw[i];if(i==0){total_w+=Math.max(0,this.margin)}else{total_w+=this.margin}}var tl=0;switch(this.align){case"right":x=w-total_w;break;case"center":x=Math.floor((w-total_w)/2);tl=Math.max(0,Math.floor(this.margin/2));break;default:tl=Math.max(0,this.margin);break}for(var i=0;i<this.aInfo.length;i++){var thumb=makeRectangle(this.id+"_thumb"+(i+1),x+tl,Math.floor((h-this.ah[i])/2),this.aw[i],this.ah[i],"#FFFFFF",100,"absolute");thumb.style.overflow="hidden";thumb.style.background="url("+this.aInfo[i]["thumb"]+")";this.area.appendChild(thumb);thumb.style.zIndex=this.aInfo.length+1+(i+1);thumb.onmouseover=function(){this.style.cursor="pointer"};thumb.onclick=function(){var n=this.id.substr(_this.id.length+6);_this.switchButton(n)};tl+=this.aw[i]+this.margin}};this.makeUIV=function(){var w=this.width;var h=this.height;var y=0;var total_h=0;for(var i=0;i<this.ah.length;i++){total_h+=this.ah[i];if(i==0){total_h+=Math.max(0,this.margin)}else{total_h+=this.margin}}var tl=0;switch(this.valign){case"bottom":y=h-total_h;break;case"middle":y=Math.floor((h-total_h)/2);tl=Math.max(0,Math.floor(this.margin/2));break;default:tl=Math.max(0,this.margin);break}for(var i=0;i<this.aInfo.length;i++){var thumb=makeRectangle(this.id+"_thumb"+(i+1),Math.floor((w-this.aw[i])/2),y+tl,this.aw[i],this.ah[i],"#FFFFFF",100,"absolute");thumb.style.overflow="hidden";thumb.style.background="url("+this.aInfo[i]["thumb"]+")";this.area.appendChild(thumb);thumb.style.zIndex=this.aInfo.length+1+(i+1);thumb.onmouseover=function(){this.style.cursor="pointer"};thumb.onclick=function(){var n=this.id.substr(_this.id.length+6);_this.switchButton(n)};tl+=this.ah[i]+this.margin}};this.switchButton=function(n){if(this.parent!=undefined){this.parent.switchSlide(n)}if(this.timerID!=undefined){clearTimeout(this.timerID)}this.current=n;if(this.objTime.interval>0){this.timerID=setTimeout(this.timeoutHandler,this.objTime.interval)}for(var i=1;i<=this.aInfo.length;i++){var thumb=$("#"+_this.id+"_thumb"+i);if(i==n){thumb.css("background","url("+this.aInfo[i-1]["thumb_on"]+")")}else{thumb.css("background","url("+this.aInfo[i-1]["thumb"]+")")}}};this.timeoutHandler=function(){var n=_this.current%_this.aInfo.length+1;_this.switchButton(n)}};